Prev: Photo Gallery: Ping Dorayme
Next: Which CSS apply to <frameset> and <frame>?
From: Axel Dahmen on 21 Mar 2010 10:00
> That is not the same as the OP's suggestion as you can readily see when
> there is a word-wrap in a list element. The word-wrapped content would
> align with the list-item marker when it should align with the first word
> of
> the content instead.
>
> While there is the possibility to use images as list-item markers (`list-
> style-image: url(...)'), images have the shortcomings that they do not
> scale with or position according to font-size (only when the entire
> viewport content is zoomed), and that they require yet another HTTP
> request, which places more burden on the Web server or filesystem and
> slows
> down rendering of the document. So there really should be a way to make
> use of arbitrary Unicode characters for list-item markers.

Thanks, Thomas.


> That said, ISTM that section 6 to 9 of the current CSS3 Lists draft in
> combination with the current CSS3 Generated and Replaced Content draft
> would allow that already:
>
> ul.with-character li::marker {
> content: "»";
> }
>
> <http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-content1>
> <http://www.w3.org/TR/2003/WD-css3-content-20030514/#block>
>
> (Neither Gecko nor WebKit [which so far appeared to be foremost in CSS 3
> support] appear to support this yet. Test case:
> <http://PointedEars.de/styles/test/list-marker>)

Yes, absolutely. But then again, this solution suffers the lack of style. It
looks more like a workaround than a clean list implementation to me. I'd
very much appreciate to have the <string> value added to CSS3
list-style-type.


> In any case, the OP should post his suggestions to the www-style(a)w3.org
> mailing list where Working Group members and other interested individuals
> read. (Of course, they would have to abandon their antisocial standards-
> violating practice of using invalid address headers to do that.) CSS3
> Lists is still an early working draft, so there is hope for change yet.

Yes, I did that years ago. But actually that's the problem with
mailing-lists: They flood my inbox with loads of e-mails I'm not interested
in. I wouldn't go that far to call these "unsolicited", but that's basically
what they are: An unfiltered list of unsolicited e-mails...

I have suggested to the W3C to use newsgroups before, but that's like
talking to the wind... I want to read only those threads I'm interested in,
not a plethora of e-mails I'm _not_ interested in... Particularly not in my
e-mail inbox where there are other, important, e-mails arriving... That's
why I'm now taking this approach, hoping "they" will read it still.

Cheers,
Axel Dahmen

From: Jonathan N. Little on 21 Mar 2010 10:29
Thomas 'PointedEars' Lahn wrote:
> That is not the same as the OP's suggestion as you can readily see when
> there is a word-wrap in a list element. The word-wrapped content would
> align with the list-item marker when it should align with the first word of
> the content instead.
>

ul.with-character-css21 {
list-style-type: none;
}

ul.with-character-css21 li:before {
content: "»"; margin-left: -1em; margin-right: .5em;
}


<ul class="with-character-css21">

<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,</li>

<li>sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</li>

</ul>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
From: Thomas 'PointedEars' Lahn on 21 Mar 2010 10:42
Jonathan N. Little wrote:

> Thomas 'PointedEars' Lahn wrote:
>> That is not the same as the OP's suggestion as you can readily see when
>> there is a word-wrap in a list element. The word-wrapped content would
>> align with the list-item marker when it should align with the first word
>> of the content instead.
>
> ul.with-character-css21 {
> list-style-type: none;
> }
>
> ul.with-character-css21 li:before {
> content: "»"; margin-left: -1em; margin-right: .5em;
> }

That is a crude workaround (that does not need to work), not a solution. In
my case (Iceweasel 3.5.8), the `L' of "Lorem" does not align with the `d' of
"diam", or the `m' of "magna", when it did before.


PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)
From: Jonathan N. Little on 21 Mar 2010 11:34
Thomas 'PointedEars' Lahn wrote:
> Jonathan N. Little wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> That is not the same as the OP's suggestion as you can readily see when
>>> there is a word-wrap in a list element. The word-wrapped content would
>>> align with the list-item marker when it should align with the first word
>>> of the content instead.
>>
>> ul.with-character-css21 {
>> list-style-type: none;
>> }
>>
>> ul.with-character-css21 li:before {
>> content: "»"; margin-left: -1em; margin-right: .5em;
>> }
>
> That is crude workaround (that does not need to work), not a solution. In
> my case (Iceweasel 3.5.8), the `L' of "Lorem" does not align with the `d' of
> "diam", or the `m' of "magna, when it did before.
>

ul.with-character-css21 li:before {
content: "»"; display: block;
position: relative; left: -1em; top: 1em;
}

Salt and pepper to taste.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
From: Thomas 'PointedEars' Lahn on 21 Mar 2010 12:25
Jonathan N. Little wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Jonathan N. Little wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> That is not the same as the OP's suggestion as you can readily see
>>>> when there is a word-wrap in a list element. The word-wrapped content
>>>> would align with the list-item marker when it should align with the
>>>> first word of the content instead.
>>>
>>> ul.with-character-css21 {
>>> list-style-type: none;
>>> }
>>>
>>> ul.with-character-css21 li:before {
>>> content: "»"; margin-left: -1em; margin-right: .5em;
>>> }
>>
>> That is crude workaround (that does not need to work), not a solution.
>> In my case (Iceweasel 3.5.8), the `L' of "Lorem" does not align with the
>> `d' of
>> "diam", or the `m' of "magna, when it did before.
>
> ul.with-character-css21 li:before {
> content: "»"; display: block;
> position: relative; left: -1em; top: 1em;
> }
>
> Salt and pepper to taste.

That is still far from being reliable. Understand that you cannot know how
wide and high the list-item marker is going to be, or where it is going to
be displayed.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: Photo Gallery: Ping Dorayme
Next: Which CSS apply to <frameset> and <frame>?