CSS Property: content

[Ari Heino]

I want to add the › (&rsaquo symbol as the list item marker in
my inline style navigation list. Of course I can do that by writing

<ul id="navi">
<li>› <a href="cv.html">CV</a></li>
</ul>

in html and

#navi li {
display: inline;
}

in css. I'd like to insert the marker with something like

#navi li:before {
content: "The desired marker goes here";
}

in the css (alas, not supported by IE) to avoid the messy coding but

#navi li:before {
content: "›";
}

or similar doesn't work; it inserts the entity itself, not the symbol it
represents. Is there a way to make it work (without javascript)? I guess
it's not wise to type the actual symbol itself in the stylesheet.

 

[Jukka K. Korpela]

I want to add the › (&rsaquo symbol as the list item marker in
my inline style navigation list.

That's not a particularly good idea, because that character is - at least
primarily - a quotation mark in some languages. There are many other
characters that can be used as list markers without such possibility of a
confusion.

<li>› <a href="cv.html">CV</a></li>

That would be the practical approach, if you really wanted to use such
markers.

I'd like to insert the marker with something like

#navi li:before {
content: "The desired marker goes here";
}

in the css (alas, not supported by IE) to avoid the messy coding but

#navi li:before {
content: "›";
}

or similar doesn't work; it inserts the entity itself, not the symbol
it represents.

I don't think the HTML coding is messy, though it might be called a little
illogical. And as you say, the CSS method does not work on IE, so what would
be the point in practice?

Is there a way to make it work (without javascript)? I
guess it's not wise to type the actual symbol itself in the
stylesheet.

There's no reason why you could not use the symbol itself if the encoding of
the document is properly chosen and declared.

But you can use the construct "\203A" in CSS. (Check CSS specs for details
on "\" escapes.)

 

[Ari Heino]

Jukka K. Korpela kirjoitti seuraavasti:

That's not a particularly good idea, because that character is - at
least primarily - a quotation mark in some languages.

Well, in many countries bullets are used to kill something - and still
they're the default list markers without any confusion (bad and a
very language-dependent joke)

> There are many
> other characters that can be used as list markers without such
> possibility of a confusion.

True, but they don't have quite the looks I want this time.

I don't think the HTML coding is messy

Well the code isn't, but if you're looking at the page css turned of,
THEN it looks messy for sure: bullets AND the quotation signs together
aren't pretty. I want EITHER the new symbol OR the default - not both at
the same time.

And as you say, the CSS method does not work on IE, so
what would be the point in practice?

There is none - damn IE!

There's no reason why you could not use the symbol itself if the
encoding of the document is properly chosen and declared.

I'm not gonna even ask about this, would make me a total ass (which I
just did, but I don't mind - I'm just a self-taught amateur).

But you can use the construct "\203A" in CSS. (Check CSS specs for
details on "\" escapes.)

I'll stick with that, that's what I was looking for, thanks. Is there a
table of those constructs somewhere in your pages also?

 

[Jukka K. Korpela]

Well the code isn't, but if you're looking at the page css turned of,
THEN it looks messy for sure: bullets AND the quotation signs together
aren't pretty. I want EITHER the new symbol OR the default - not both
at the same time.

Right, but you can (with the usual CSS caveats) achieve that by using
list-style-type: none
Alternatively, you could use markup other than list markup. This would not
be quite logical, but people commonly use constructs where a logical list is

I'll stick with that, that's what I was looking for, thanks. Is there
a table of those constructs somewhere in your pages also?

Well, each formalism (or "formal language") tends to have its own syntax for
"character escapes", often resembling each other just enough to confuse us.
But I've tried to summarize some of them in the list at
http://www.cs.tut.fi/~jkorpela/chars.html#esc

 

[+mrcakey]

Right, but you can (with the usual CSS caveats) achieve that by using
list-style-type: none

OP was making the point that if the user has stylesheets turned off, they'll
see both the default list markers and the HTML list marker so setting the
list-style-type won't have any effect in that scenario. Unless their user is
perverse enough to change their default stylesheet every time they visit his
site. In any case, the HTML approach rather goes against the grain of
separating structure and style doesn't it?

Unless there's some great reason to have the specific character encoded in
the document, would a more pragmatic solution not be to make a small GIF of
the character and use list-style: image?

 

[Ari Heino]

Jukka K. Korpela kirjoitti seuraavasti:
Did you miss that part accidentally?

Right, but you can (with the usual CSS caveats) achieve that by using
list-style-type: none

I have this line. But if css is turned off, this wont obviously help.
But again, who surfs css turned off? Of course, there may be someone who
has forced the bullets on (it's possible, isn't it?), but then it'll be
his/her headache.
And other media than normal computers are a whole new thing, I guess.

Alternatively, you could use markup other than list markup. This would
not be quite logical, but people commonly use constructs where a logical
list is marked up simply as sequence of <div> elements, or <span>
elements, or <a> elements, or something like that.

That may soon sound more reasonable, although it loses the semantics of
being a navigation LIST. It somehow hurts, but what can you do.

Well, each formalism (or "formal language") tends to have its own syntax
for "character escapes", often resembling each other just enough to
confuse us. But I've tried to summarize some of them in the list at
http://www.cs.tut.fi/~jkorpela/chars.html#esc

I'll take a look.

 

[Ari Heino]

Thanks, you seemed to think what I was thinking

+mrcakey kirjoitti seuraavasti:

Unless there's some great reason to have the specific character encoded in
the document, would a more pragmatic solution not be to make a small GIF of
the character and use list-style: image?

True, but being a perfectionist, I don't like the gifs being the same
size all the time if someone wants to zoom the text. I like the bullets
or whatever symbols to get bigger, also!

I make my world a hard place to live in...

 

[Jukka K. Korpela]

OP was making the point that if the user has stylesheets turned off,
they'll see both the default list markers and the HTML list marker so
setting the list-style-type won't have any effect in that scenario.

Right, sorry, I missed that part.

In any case, the HTML
approach rather goes against the grain of separating structure and
style doesn't it?

In some sense yes. Although list bullets are comparable to sentence
punctuation, which we handle at character level and not markup, there is
much more stylistic variation in the shape of bullets than in periods,
commas, etc.

Unless there's some great reason to have the specific character
encoded in the document, would a more pragmatic solution not be to
make a small GIF of the character and use list-style: image?

A pragmatic problem with that is it is very difficult if not impossible to
position the images properly then. Their placement is at the mercy of the
browser. Some people use background images instead (reserving some spacing
on the left of each item and using a non-repeating background image, for
which you can set the detailed position too), but they have some nasty
features - not rendered when image loading is off, not rendered when CSS is
off, not printed on paper (usually), not scaling according to font size,
etc.

 

[dorayme]

Well the code isn't, but if you're looking at the page css turned of,
THEN it looks messy for sure: bullets AND the quotation signs together
aren't pretty. I want EITHER the new symbol OR the default - not both at
the same time.

Consider the strategy here, then, of using a table. And before jumping
to any conclusion, please consider:

Tables are nearly if not always the right and most suitable tool to
display lists when one wants to draw attention to relationships between
the list items in the different lists. In this last sentence, I use the
phrases "lists" and "list items" in their ordinary English meanings and
not in such a way that should spark anyone to leap up and down.

A single list can be displayed in a one col table containing, or not
containing because it is obvious, a TH to inform that the items below
are a list of things the husband, for example, must fetch*. Or with no
TH because it is too obvious from the context. A table is up to the
task. It is generally not the *best* tool for the job. But it is not an
*unsuitable* tool. In your case, it is perfect. No danger of the
limitations of ULs for lists exhibiting themselves.

-----------------
* A long time ago, I would visit a long married couple who lived in a
flat together but who had not talked to each other for 30 years. We kids
were absolutely delighted with this and we would eagerly agree to visit
just to see such an extraordinary thing. The hosts were always there at
the dining table and in the lounge with their visitors and we were
expressly forbidden to giggle or remark on the situation by our parents.
These days, they could be imagined to email each other for essential
communications!

 

[Bergamot]

But if css is turned off, this wont obviously help.
But again, who surfs css turned off?

FYI, I disable CSS a lot more often than should be necessary. For me,
it's most often required to make dee-ziner sites usable, though even
that doesn't always work.

 

[Ari Heino]

Bergamot kirjoitti seuraavasti:

FYI, I disable CSS a lot more often than should be necessary. For me,
it's most often required to make dee-ziner sites usable, though even
that doesn't always work.

I bet you do. That's because you a) know it's possible and b) know it
(often) helps.
I referred to "ordinary" people who don't a) know what's css, b) know it
can be disabled or c) even care.

 

[Jonathan N. Little]

FYI, I disable CSS a lot more often than should be necessary. For me,
it's most often required to make dee-ziner sites usable, though even
that doesn't always work.

Like the dang blog I just looked at moments ago

body { font-family: verdana; font-size: 70%; }

 

[dorayme]

FYI, I disable CSS a lot more often than should be necessary. For me,
it's most often required to make dee-ziner sites usable, though even
that doesn't always work.

Me too.

 

[Roy A.]

Jukka K. Korpela kirjoitti seuraavasti:


Did you miss that part accidentally?



I have this line. But if css is turned off, this wont obviously help.
But again, who surfs css turned off? Of course, there may be someone who
has forced the bullets on (it's possible, isn't it?), but then it'll be
his/her headache.

You could use a few alternate stylesheets to solve that issue, e.g:

<link href="bergamot.css" title="Bergamot" rel="alternate stylesheet"
type="text/css">
<link href="dorayme.css" title="Dorayme" rel="alternate stylesheet"
type="text/css">

 

[Jukka K. Korpela]

You could use a few alternate stylesheets to solve that issue, e.g:

Use alternate stylesheets (which by the way aren't supported by IE) to solve
the issue what happens when CSS is off? Yeah, right. Let me guess... your
solution to the question "what happens when JavaScript is off?" is that one
could use a few alternate branches in JavaScript code.

 

[dorayme]

You could use a few alternate stylesheets to solve that issue, e.g:

<link href="bergamot.css" title="Bergamot" rel="alternate stylesheet"
type="text/css">
<link href="dorayme.css" title="Dorayme" rel="alternate stylesheet"
type="text/css">

These last would not solve one of the problems that nags at Ari - the
double bullet when all (author) CSS is off.

Given the patient's addiction to a special bullet, Dr Dorayme recommends
table html markup for a list in *this* case. And to those who say this
is too bitter a pill for anyone with any standards to swallow, I say to
them, re-examine your standards, in particular what a table element is.

<g/2>

(This is a stab at a tag for the usenet element of half grin)

 

[Bergamot]

You could use a few alternate stylesheets to solve that issue, e.g:

<link href="bergamot.css" title="Bergamot" rel="alternate stylesheet"
type="text/css">

Whatever the issue, I wouldn't bother with alternate stylesheets, mostly
because few people even know about them, let alone bother looking for
them. I never do. It's so much easier just to turn CSS off altogether or
invoke one of my own user stylesheets to get around some display issue.