Scripsit Chris Riesbeck:
What's the right way to make sure checkboxes stick with their labels
when the window is resized?
To put the checkbox and its label on a separate line with no other
content and to make the label as short as possible (but not shorter).
Under any normal circumstances, this removes the risk of line wrapping.
It is also an essential accessibility and usability feature. A user who
sees or hears
.... foo [ ] bar [ ] zap [ ] zip ...
may have difficulty in understanding whether he should click on the box
_before_ "bar" or _after_ "bar" when he wants to select "bar".
Admittedly, this might indicate slowness of understanding, or even
retardedness. Accessibility means, among other things, making pages
accessible to retarded people, too.
Right now I'm trying <label><input ...text</labelwith
white-space:nowrap on label, but this only seems to work in Firefox
and IE 7.
It's a technically correct way to prevent line breaks inside <label>
elements, but for some odd reason, line breaking control works oddly.
There are many ways to prevent line breaks in HTML documents, such as
the above CSS setting, the nowrap attribute for <tdelements, the
nonstandard but widely supported <nobrelement, the no-break space
character and other characters defined to be "non-breaking", including
special controls in Unicode. And the different ways work under different
conditions, with little logic. For a summary, check
http://www.cs.tut.fi/~jkorpela/html/nobr.html#prevent
I have yet to see a situation where <nobrdoes not work, but you might
have difficulties in explaining things to a pointy-haired boss who has
been commanded to require "standards compliance". So what _I_ would do -
if I really wanted to make the best effort to prevent a line break in
this case - is
<nobr><label><i nput ...>text</label></nobr>
In IE 8 and Opera I get one long line, as if the nowrap applied
outside the label elements.
Sounds like a refreshingly nasty bug. But IE 8 is beta test software, so
nobody should care what it does, except people devoted to testing the
software. (I'd love to test it, but why would I do that for free? It's
hard work.)
In Safari for Windows, it groups the text with the checkbox on the
right instead of the left! That one I can't figure at all.
Neither can I, but I think we can draw the conclusion that the approach,
though technically correct, just isn't feasible.
http://www.cs.northwestern.edu/~ries...ie-nowrap.html
IT'S BETTER NOT TO SHOUT. Text is more readable in mixed-case. If you
really love all-caps presentation, you could make the _content_
mixed-case and set text-transform: uppercase in CSS. This would imply
that by switching CSS support off, the user sees the content more
readably.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/