CSS Property: content

Discussion in 'HTML' started by Ari Heino, Mar 11, 2009.

  1. Ari Heino

    Ari Heino Guest

    I want to add the › (›) 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.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Mar 11, 2009
    #1
    1. Advertising

  2. Ari Heino wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 11, 2009
    #2
    1. Advertising

  3. Ari Heino

    Ari Heino Guest

    Jukka K. Korpela kirjoitti seuraavasti:
    > Ari Heino wrote:
    >
    >> 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.


    Well, in many countries bullets are used to kill something - and still
    they're the default list markers without any confusion :D (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.

    >> to avoid the messy coding

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

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Mar 11, 2009
    #3
  4. Ari Heino wrote:

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


    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
    marked up simply as sequence of <div> elements, or <span> elements, or <a>
    elements, or something like that.

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


    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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 11, 2009
    #4
  5. Ari Heino

    +mrcakey Guest

    "Jukka K. Korpela" <> wrote in message
    news:lRVtl.2191$...
    > Ari Heino wrote:
    >
    >>> 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.

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

    --
    +mrcakey
    www.twitter.com/mrcakey
     
    +mrcakey, Mar 11, 2009
    #5
  6. Ari Heino

    Ari Heino Guest

    Jukka K. Korpela kirjoitti seuraavasti:
    > Ari Heino wrote:
    >> if you're looking at the page css turned of,


    Did you miss that part accidentally?

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


    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
    http://users.utu.fi/athein/
     
    Ari Heino, Mar 11, 2009
    #6
  7. Ari Heino

    Ari Heino Guest

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

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Mar 11, 2009
    #7
  8. +mrcakey wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 11, 2009
    #8
  9. Ari Heino

    dorayme Guest

    In article <gp98g6$1ad7$>,
    Ari Heino <> wrote:

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

    --
    dorayme
     
    dorayme, Mar 11, 2009
    #9
  10. Ari Heino

    Bergamot Guest

    Ari Heino wrote:
    >
    > 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.

    --
    Berg
     
    Bergamot, Mar 12, 2009
    #10
  11. Ari Heino

    Ari Heino Guest

    Bergamot kirjoitti seuraavasti:
    >
    > Ari Heino wrote:
    >>
    >> 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.


    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.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Mar 12, 2009
    #11
  12. Bergamot wrote:
    >
    > Ari Heino wrote:
    >>
    >> 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.
    >


    Like the dang blog I just looked at moments ago

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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 12, 2009
    #12
  13. Ari Heino

    dorayme Guest

    In article <>,
    Bergamot <> wrote:

    > Ari Heino wrote:
    > >
    > > 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.


    Me too.

    --
    dorayme
     
    dorayme, Mar 12, 2009
    #13
  14. Ari Heino

    Roy A. Guest

    On 11 Mar, 22:34, Ari Heino <> wrote:
    > Jukka K. Korpela kirjoitti seuraavasti:
    >
    > > Ari Heino wrote:
    > >> if you're looking at the page css turned of,

    >
    > Did you miss that part accidentally?
    >
    > >> 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

    >
    > 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">
     
    Roy A., Mar 12, 2009
    #14
  15. Roy A. wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 12, 2009
    #15
  16. Ari Heino

    dorayme Guest

    In article
    <>,
    "Roy A." <> wrote:

    > On 11 Mar, 22:34, Ari Heino <> wrote:
    > > Jukka K. Korpela kirjoitti seuraavasti:
    > >
    > > > Ari Heino wrote:
    > > >> if you're looking at the page css turned of,

    > >
    > > Did you miss that part accidentally?
    > >
    > > >> 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

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


    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)

    --
    dorayme
     
    dorayme, Mar 12, 2009
    #16
  17. Ari Heino

    Bergamot Guest

    Roy A. wrote:
    >
    > 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.

    --
    Berg
     
    Bergamot, Mar 13, 2009
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. J.Edwards
    Replies:
    0
    Views:
    1,691
    J.Edwards
    Jan 20, 2006
  2. Joshua Beall
    Replies:
    1
    Views:
    460
    Bertilo Wennergren
    Dec 10, 2003
  3. Noozer
    Replies:
    10
    Views:
    2,197
    Mitja
    Oct 13, 2004
  4. hazz
    Replies:
    6
    Views:
    49,922
    SkyUCHC
    Jun 9, 2010
  5. Julie Siebel
    Replies:
    4
    Views:
    147
    Dr John Stockton
    Feb 25, 2004
Loading...

Share This Page