Stylesheets - dividing links with |'s

Author

dividing links with |'s

yawnmoth

2007-07-27, 6:22 pm

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/scri...si/divider.html

Bergamot

2007-07-27, 6:22 pm

yawnmoth wrote:
> 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/scri...si/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.

--
Berg

dorayme

2007-07-27, 10:17 pm

In article <5gv0ivF3fujm7U1@mid.individual.net>,
Bergamot <bergamot@visi.com> wrote:

> yawnmoth wrote:
>

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.

--
dorayme

yawnmoth

2007-07-28, 3:16 am

On Jul 27, 6:24 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article <5gv0ivF3fujm...@mid.individual.net>,
>
> Bergamot <berga...@visi.com> wrote:
>
>
> There are 3 approaches in this link.

I added the third one after Bergamot posted his thoughts ;)

dorayme

2007-07-28, 3:16 am

In article
<1185600250.565010.317040@l70g2000hse.googlegroups.com>,
yawnmoth <terra1024@yahoo.com> wrote:

> On Jul 27, 6:24 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
>
> 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...

--
dorayme

yawnmoth

2007-07-29, 3:17 am

On Jul 28, 1:14 am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <1185600250.565010.317...@l70g2000hse.googlegroups.com>,
>
>
>
> yawnmoth <terra1...@yahoo.com> wrote:
>
>
>
>
>
> 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...

FWIW, I enjoyed reading that :)

Rik

2007-07-29, 3:17 am

On Fri, 27 Jul 2007 21:28:35 +0200, yawnmoth <terra1024@yahoo.com> wrote=
:

> 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/scri...si/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=3D"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=3D"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 seperatio=
n =

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, b=
y =

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/
-- =

Rik Wasmus

Bergamot

2007-07-29, 3:17 am

yawnmoth wrote:
>
> I added the third one

FYI, for other examples of styling lists, see
http://css.maxdesign.com.au/listamatic/

--
Berg

dorayme

2007-07-29, 6:17 pm

In article
<1185678778.497180.132380@o61g2000hsh.googlegroups.com>,
yawnmoth <terra1024@yahoo.com> wrote:
> On Jul 28, 1:14 am, dorayme
>
> FWIW, I enjoyed reading that :)

Why, thank you, yawnmouth!

--
dorayme

Andy Dingley

2007-07-30, 6:22 pm

On 29 Jul, 04:39, Rik <luiheidsgoe...@hotmail.com> wrote:

> 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.

Rik

2007-07-30, 6:22 pm

On Mon, 30 Jul 2007 13:11:26 +0200, Andy Dingley <dingbat@codesmiths.com>
wrote:

> On 29 Jul, 04:39, Rik <luiheidsgoe...@hotmail.com> wrote:
>
>
> 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?

--
Rik Wasmus