 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / July 2007dividing links with |'s
Say I wanted to place a | between a bunch of links. What would be the best / most accessible way to do this? Here are two approaches I've come up with but I'm not sure which one would be easier for someone with a screen reader or whatever to make sense of: http://www.frostjedi.com/terra/scripts/demo/reversi/divider.html > Say I wanted to place a | between a bunch of links. What would be the > best / most accessible way to do this? Here are two approaches I've > come up with but I'm not sure which one would be easier for someone > with a screen reader or whatever to make sense of: > > http://www.frostjedi.com/terra/scripts/demo/reversi/divider.html Neither approach is very good. You're only focusing on the vertical bar itself, but you need to consider the semantics for the whole thing. An unordered list would be better markup because an anonymous series of <span> (or <a>) is just a run-on sentence to a screen reader, and degrades poorly in almost any other browsing situation, too. You can style a list so it looks pretty much the same as your second attempt. Just use display:inline and adjust margins/padding to your liking.  SignatureBerg > > Say I wanted to place a | between a bunch of links. What would be the > > best / most accessible way to do this? Here are two approaches I've > > come up with but I'm not sure which one would be easier for someone > > with a screen reader or whatever to make sense of: > > > > http://www.frostjedi.com/terra/scripts/demo/reversi/divider.html There are 3 approaches in this link. > Neither approach is very good. If anyone can be bothered who has easy access to a screen reader, it would be interesting to get a rough summary or precis transcript of at least one of the first 2 approaches and the last inline list one. Signaturedorayme > In article <5gv0ivF3fujm...@mid.individual.net>, > [quoted text clipped - 6 lines] > > There are 3 approaches in this link. I added the third one after Bergamot posted his thoughts ;) In article <1185600250.565010.317040@l70g2000hse.googlegroups.com>, > > In article <5gv0ivF3fujm...@mid.individual.net>, > > [quoted text clipped - 8 lines] > > I added the third one after Bergamot posted his thoughts ;) I suspected as much a few secs later. The upright separator is often nicer to look at, the border being too high. The separator is in essence a loner. It is a little hardy upright thing with a lot of self respect. It even has its own key on billions of keyboards. Compare that with a lone right border! The poor thing is sitting there as a border and sort of pining for its missing top, bottom (and possibly other side) brothers. You know, I saw a border like this once in a right proper state. It was crying. I asked what's the matter. The poor sobbing convulsive thing went on and on about its loneliness, how it felt unnatural, how it was being pressed into service as a separator. I tried to point out that in a way, that is what a border is, it is part of the nature of a border to separate things. But it would have none of this, it felt this was an insult to borders, that it caused alienation among the individual borders, that a happy border is a border in a family of borders, all together in their rectangularity. A happy border is a border in a family that _frames_ things. Has no one noticed how single borders, separated by text and space from other alienated single borders, look so forlornly towards each other. What they really want is their own little family, not a goddamn bunch of strangers over some fences. If you listen very very carefully, you will notice them talking to each other. "Hey, Jake, I hope to God the padding and margins have not been em dimensioned so that we become further apart at the behest of the user... Honestly, I prefer pixels, we know where we stand with pixels..." But we authors must simply do what we have to do. Yes, that sometimes means hardening our hearts and em basing things. There may be ways of making borders feel better. Border priests or rabbis may be needed... Signaturedorayme > In article > <1185600250.565010.317...@l70g2000hse.googlegroups.com>, [quoted text clipped - 46 lines] > may be ways of making borders feel better. Border priests or > rabbis may be needed... FWIW, I enjoyed reading that :) In article <1185678778.497180.132380@o61g2000hsh.googlegroups.com>, > On Jul 28, 1:14 am, dorayme > > > On Jul 27, 6:24 pm, dorayme > > FWIW, I enjoyed reading that :) Why, thank you, yawnmouth! Signaturedorayme >> > >http://www.frostjedi.com/terra/scripts/demo/reversi/divider.html > > I added the third one FYI, for other examples of styling lists, see http://css.maxdesign.com.au/listamatic/ SignatureBerg > Say I wanted to place a | between a bunch of links. What would be the > best / most accessible way to do this? Here are two approaches I've > come up with but I'm not sure which one would be easier for someone > with a screen reader or whatever to make sense of: > > http://www.frostjedi.com/terra/scripts/demo/reversi/divider.html This works in FF && Opera BTW: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> ul.linklist{ list-style-type:none; } ul.linklist li { display:inline; } ul.linklist li + li::before{ content: ' | '; display: marker; color: red; } </style> </head> <body> <ul class="linklist"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </body> </html> Then again, I would not rely on CSS3 yet for this. In terms of seperation of content & layout it has it advantages. - Although the 'content' property is dubious, one can easily make this list in a horizontal one on a style change without the pipe-character, by only altering the css. - When the user decides to copy the content as plain text, the pipe character will still show keeping even some layout in the pasted plain text. Possible reading material: http://www.w3.org/TR/css3-content/ SignatureRik Wasmus > display: marker; What's the useful state of display: marker; ? AIUI, this is CSS 2 but CSS 2.1 dumped it and CSS 3 introduced ::marker as a pseudo- selector (I may have the chronology wrong here). My concern is that display: marker; would fall into the gap between never having any support, then already being obsolete. >> display: marker; > > What's the useful state of display: marker; ? Well, maybe to make stuff like marker-offset work on it. > AIUI, this is CSS 2 > but CSS 2.1 dumped it and CSS 3 introduced ::marker as a pseudo- > selector (I may have the chronology wrong here). My concern is that > display: marker; would fall into the gap between never having any > support, then already being obsolete. Aha, I'll look into it. Any reading material you can recommend, saving me a google trip wading through superficial CSS sites? SignatureRik Wasmus |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.