Re: 'locking' symbols with text

Bert,

thank you so much for taking the time to consider this issue and reply.
I need a real world ubiquitous solution, so A) wasn't suitable.

You've clearly understood the requirement, however I added some  
horizontal centering as graphics are usually a fixed size relative to  
text, but word length changes.

        a.locked {display: inline-block; text-align: center; }
        a.locked img {display: block; margin-left: auto; margin- 
right: auto; }

C) worked well on Safari only IE, Opera and Mozilla all failing badly

B) worked okay on Opera and Safari but not IE or Mozilla
However the inline-block text appears noticeably raised. Is this  
intentional? is their a sensible workaround?

I'm really perplexed as I am due to start a project next week and  
there doesn't seem to be any reasonable solution.
I'd would not want to use tables for layout, but am struggling to  
find an alternative solution.

For the record, it is also important that text could be on top of  
images, and flow inline. More able readers may prefer to read the  
text and only refer to images in extremis.

cheers

x:"

On 2 Sep 2005, at 13:42, Bert Bos wrote:


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



Jonathan Chetwynd
Accessibility Consultant on Learning Disabilities and the Internet

29 Crimsworth Road
SW8 4RJ

020 7978 1764

Received on Tuesday, 6 September 2005 09:20:22 UTC