Re: 'locking' symbols with text

On Friday 02 September 2005 10:02, Jonathan Chetwynd wrote:
> People with learning disabilities or cognitive disability may prefer
> graphics with their text. This can be as frequently as one graphic
> per word, often above the word. More able students may have a graphic
> per page, or at the beginning of each sentence
>
> There should be a simple way to lock an image to a word, so that they
> scale together.  Where these are links, people using a keyboard don't
> necessarily want to tab through two links for each word and image
> when they refer to the same link. Using tables for layout is one
> method....
>
> There doesn't appear to be a simple CSS solution to either of these
> issues.
>
> Anyone have any suggestions or require further clarification?
>
> as an example using xhtml strict 1.0:
>
> <div id="img1"><a href="where.html"><img src="rgba.png" alt="Sabina"
> /
>
>  ></a></div>
>
> <div id="list1"><h2><a href="where.html">Where</a> can I get help?</
> h2></div>
>
> How could one write this so that it would validate, but only have one
> href for both "Where" and the image?
>
> This issue isn't that complex, but may not have been considered by
> the CSS working group.
>
> The current result is that the majority of webmasters resort to using
> tables for layout as this allows text and graphics more readily to be
> associated in a predictable fashion.

Let me first check if I understand correctly.

  1) You want to write a sentence with images above several of the
     words, somewhat like this (where ### is an image):

             #####  #####            #####  
             #####  #####            #####
             #####  #####            #####
        The  apple  fell  from  the  tree.

  2) You want the pair image+word to be a source anchor, but only a
     single one, not two anchors that happen to have the same target.

  3) You also want the image and the word to be close to each other in
     the source, so that editing is easier and so that the text is still
     more or less readable if the browser doesn't understand the CSS
     properties.


If that is correct, then there does exist a simple solution, at least in 
theory. In fact, there are three. Unfortunately, browsers are rather 
buggy...

  a) With ruby mark-up. This is probably the best mark-up from a
     semantical point of view, because the image is indeed an annotation
     on the word. Unfortunately, support for this mark-up is very rare.

       <p>The
       <a href="where1"><ruby><rb>apple</rb>
           <rt><img src="apple" alt=""/></rt></ruby></a>
       <a href="where2"><ruby><rb>fell</rb>
           <rt><img src="fell" alt=""/></rt></ruby></a>
       ...

     No CSS is needed in this case (but still allowed, of course, to
     enhance the look).

  b) With HTML4 elements. In this case the image has to come before the
     word, otherwise the CSS rules become very obscure. The mark-up is
     even simpler than above. Several browsers support the required CSS,
     but the implementations are unfortunately rather buggy.

       <p>The
       <a class=locked href="where1"><img src="apple" alt=""> apple</a>
       <a class=locked href="where2"><img src="fell" alt=""> fell</a>
       ...

     The trick is to consider the A element as an inline-block, i.e., an
     element that can be in the middle of a line, but that itself can
     contain multiple lines. Then we force the image to be a line of its
     own, so the A element ends up having two lines:

       a.locked {display: inline-block}
       a.locked img {display: block}

  c) As above, but using CSS tables instead of inline-block. The mark-up
     is the same, but the CSS rules are now as follows:

       a.locked {display: inline-table; vertical-align: bottom}
       a.locked img {display: table-cell}


I briefly tried Konqueror, Opera, Safari and Mozilla. The result is 
meagre:

  - (a) is not supported

  - (b) works in Konqueror and Safari, but it needs an extra rule
    'a.locked {vertical-align: bottom}' to work around a bug in the
    alignment of the words. Opera shows the stack of image+word, but the
    words are misaligned. Mozilla doesn't support 'inline-block' yet.

  - (c) works in Konqueror and Safari. Opera doesn't display the images,
    I don't know why. I don't understand what Mozilla does, but it is
    not correct.


As for the scaling part: if you mean that the size of the image should 
be related to the size of the text, you can do that, e.g., by adding

    img {width: 3em}

(If you just mean that the word and the image should always be next to 
each other, then the earlier rules are enough.)



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Friday, 2 September 2005 12:42:15 UTC