CSS3: Suggestion for another list-style-type
Axel Dahmen
in the current WD on CSS3 Lists I am missing a list-style-type of <string>.
It doesn't seem to be easily possible to create lists with any arbitrary
character (sequence), e.g.:
* foo
* bar
or
ยป foo
ยป bar
So I'd like to suggest to expand the list-style-type property definition to:
<glyph> | <algorithmic> | <numeric> | <alphabetic> | <symbolic> |
<non-repeating> | <string> | normal | none
RFC
Axel Dahmen
Jonathan N. Little
Already can to in CSS2.1
ul.with_character { list-style: none; }
ul.with_character li:before { content: "ยป "; }
<ul class="with_character">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Axel Dahmen
adding some arbitrary :content to the <li> element is more a workaround than
a clean implementation.
I tend to believe that this kind of list style should be more intrinsic to a
true list.
What would be your thoughts about it?
Cheers,
Axel Dahmen
-----------------
"Jonathan N. Little" <lws...@gmail.com> schrieb im Newsbeitrag
news:ho2ukp$8r5$1...@news.eternal-september.org...
Lars Eighner
Dahmen broadcast on comp.infosystems.www.authoring.stylesheets:
> Yes, John, I agree.... But basically _disabling_ a list first
I don't agree that the list has been disabled. The list is in the
markup. It hasn't gone away. It has all of its structural properties.
What is being "disabled" is one rendering, and it is being replaced by
another. No elements harmed.
> and then
> adding some arbitrary :content to the <li> element is more a workaround than
> a clean implementation.
> I tend to believe that this kind of list style should be more intrinsic to
> a true list.
There is nothing intrinsic about style.
> What would be your thoughts about it?
--
Lars Eighner <http://larseighner.com/> Warbama's Afghaninam day: 109
2624.6 hours since Warbama declared Viet Nam II.
Warbama: An LBJ for the Twenty-First century. No hope. No change.
Thomas 'PointedEars' Lahn
> Axel Dahmen wrote:
>> in the current WD on CSS3 Lists I am missing a list-style-type of
>> <string>.
>>
>> It doesn't seem to be easily possible to create lists with any arbitrary
>> character (sequence), e.g.:
>>
>> * foo
>> * bar
>>
>> or
>>
>> ยป foo
>> ยป bar
>>
>>
>> So I'd like to suggest to expand the list-style-type property definition
>> to:
>>
>> <glyph> | <algorithmic> | <numeric> | <alphabetic> | <symbolic> |
>> <non-repeating> | <string> | normal | none
>
> Already can to in CSS2.1
>
> ul.with_character { list-style: none; }
> ul.with_character li:before { content: "ยป "; }
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.
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>)
In any case, the OP should post his suggestions to the www-...@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.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300...@news.demon.co.uk>
Axel Dahmen
> 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-...@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
Jonathan N. Little
> 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>
Thomas 'PointedEars' Lahn
> 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.
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$8300...@news.demon.co.uk> (2004)
Thomas 'PointedEars' Lahn
> 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.
Jonathan N. Little
> 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.
Thomas 'PointedEars' Lahn
> 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
Jonathan N. Little
> 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.
Actually one can argue that you have *more* control, An often heard
complaint is that with list-style-position the designer really has no
control of bullet placement, other than inside or outside the block the
bullet placement is up to the UA
ul.with-character-css21 li:before {
content: "-|-"; display: block; position: relative;
left: -1.5em; top: 1.3em;
}
ul.with-character-css21 li:before {
content: "*"; display: block; color: red; font-size: 2em;
position: relative; left: -1em; top: 1.1em;
Thomas 'PointedEars' Lahn
> Thomas 'PointedEars' Lahn wrote:
>> 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.
>
> Actually one can argue that you have *more* control, [...]
>
> [even greater nonsense than before]
>
> ul.with-character-css21 li:before {
> content: "*"; display: block; color: red; font-size: 2em;
> position: relative; left: -1em; top: 1.1em;
> }
You are still missing the point. A font-size of 2em does not mean that the
marker will be 2em wide or high.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
Jonathan N. Little
> Jonathan N. Little wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> 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.
>>
>> Actually one can argue that you have *more* control, [...]
>>
>> [even greater nonsense than before]
>>
>> ul.with-character-css21 li:before {
>> content: "*"; display: block; color: red; font-size: 2em;
>> position: relative; left: -1em; top: 1.1em;
>> }
>
> You are still missing the point. A font-size of 2em does not mean that the
> marker will be 2em wide or high.
>
No, you're missing the point. Yes, font-size is a relative measurement
with respect to the font being used, but if you have defined for your
bullet the same font-family as the list content then 2em with be twice
the size of content text. Using a different font-family for the bullet
could have unpredictable results because you are not guaranteed
specified fonts would be on the users system, but you can design with
adequate space to work within tolerance.
Next, OP asked about a static character, "*" and "ยป" were the exact
examples. Although it is also possible to increment counters if you
wish. It would require for you to make allowances for the space the
increment range.
My point was that you have more control over the bullet with above than
you currently do with "list-*" properties. Placement, color, size
specifically...with list-position you only have rudimentary control (and
browsers are not consistent at all with this). Color and size requires
additional elements like spans to accomplish.
Does it take planing and consideration to accomplish? Absolutely! It is
why they call it web design.
Thomas 'PointedEars' Lahn
> Thomas 'PointedEars' Lahn wrote:
>> Jonathan N. Little wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> 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.
>>>
>>> Actually one can argue that you have *more* control, [...]
>>>
>>> [even greater nonsense than before]
>>>
>>> ul.with-character-css21 li:before {
>>> content: "*"; display: block; color: red; font-size: 2em;
>>> position: relative; left: -1em; top: 1.1em;
>>> }
>>
>> You are still missing the point. A font-size of 2em does not mean that
>> the marker will be 2em wide or high.
>
> No, you're missing the point. Yes, font-size is a relative measurement
> with respect to the font being used, but if you have defined for your
> bullet the same font-family as the list content then 2em with be twice
> the size of content text.
2em will be twice the _font-size_ of the content text (as if that was even
asked for here), but that is beside the point. The point is, a character
of a font does not need to be as wide as the font-size. Take the character
`i' for example, which is in many fonts only a fraction as wide as the
character `M' of the same font, from which the font-size was originally
derived in typography (the Em square) and is derived in CSS 2.1:
<http://www.w3.org/TR/CSS2/fonts.html#font-size-props>
> Using a different font-family for the bullet could have unpredictable
> results because you are not guaranteed specified fonts would be on the
> users system, but you can design with adequate space to work within
> tolerance.
font-family does not enter into it, at least not in the way you are
assuming. You would need to use a *fixed-width* font for both the list-
item marker and the list-item to be sure that your assumption that
positioning the marker -1em left of the left border of the list-item box
would be remotely correct.
Even then you would not yet have made sure that the marker is vertically
centered in the first line (like the default markers) even though you would
set its height to the font-size because the position of a glyph in a
character depends on the font, and you cannot make sure that a fitting font
is used. For example, in several sans-serif fonts the character `*' is
placed above the mean line, rather aligning vertically with the cap height
at which the topmost pixel of the `L' of "Lorem" is supposed to be.
(<http://en.wikipedia.org/wiki/Cap_height>)
That is emphasized by your suggesting
top: 1.1em;
which is a mere guess based on the font and the character *that* *you*
*have* *tested* *with*. (In addition, you have inserted something like an
empty line before each list-item in the process. Incidentally, your
suggestion causes a completely different presentation than that which was
asked for. You must not have tried it at all.)
> [...]
> Does it take planing and consideration to accomplish? Absolutely! It is
> why they call it web design.
And you have obviously missed one or two important lectures.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
Ben C
The width of the em square is not the width of an M. It's just a rough
measure of the height of the font. Fonts vary: in some no character is
quite as high as the em square, in others, some go outside it a bit.
><http://www.w3.org/TR/CSS2/fonts.html#font-size-props>
>
>> Using a different font-family for the bullet could have unpredictable
>> results because you are not guaranteed specified fonts would be on the
>> users system, but you can design with adequate space to work within
>> tolerance.
>
> font-family does not enter into it, at least not in the way you are
> assuming. You would need to use a *fixed-width* font for both the list-
> item marker and the list-item to be sure that your assumption that
> positioning the marker -1em left of the left border of the list-item box
> would be remotely correct.
Well you could make it a bit more than 1em just in case the user has one
of those fonts where some of the glyphs stray out of the em square.
But you don't have any control over where the bullets go if you use
normal outside list item markers anyway.
> Even then you would not yet have made sure that the marker is vertically
> centered in the first line (like the default markers)
Who says the default markers are vertically centered in the first line?
That isn't required by any specification, and I doubt very much any
browsers do it. You just get wherever a bullet character happens to be
in its em square (about half-way up).
Jonathan N. Little
> Jonathan N. Little wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> Jonathan N. Little wrote:
>>>> Thomas 'PointedEars' Lahn wrote:
>>>>> 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.
>>>>
>>>> Actually one can argue that you have *more* control, [...]
>>>>
>>>> [even greater nonsense than before]
>>>>
>>>> ul.with-character-css21 li:before {
>>>> content: "*"; display: block; color: red; font-size: 2em;
>>>> position: relative; left: -1em; top: 1.1em;
>>>> }
>>>
>>> You are still missing the point. A font-size of 2em does not mean that
>>> the marker will be 2em wide or high.
>>
>> No, you're missing the point. Yes, font-size is a relative measurement
>> with respect to the font being used, but if you have defined for your
>> bullet the same font-family as the list content then 2em with be twice
>> the size of content text.
>
> 2em will be twice the _font-size_ of the content text (as if that was even
> asked for here), but that is beside the point. The point is, a character
> of a font does not need to be as wide as the font-size.
I didn't say that it was. I said that the character will be twice the
size of the referenced text. It will be proportional as will be the
width if measured in ems. Pixels would be another issue.
> Take the character
> `i' for example, which is in many fonts only a fraction as wide as the
> character `M' of the same font, from which the font-size was originally
> derived in typography (the Em square) and is derived in CSS 2.1:
>
> <http://www.w3.org/TR/CSS2/fonts.html#font-size-props>
True I did not say otherwise. But the OP asked about designing for a
*specific* character, not an arbitrary one. Anyway if the bullet is to
be a *single* character than a value of -1em to -1.5em will surely do
unless you are using some very-very odd expanded font which would be a
bad idea since no one would have it on their system. Wide Latin comes to
mind, but even that with the character "W" -1.5em would work...
>
>> Using a different font-family for the bullet could have unpredictable
>> results because you are not guaranteed specified fonts would be on the
>> users system, but you can design with adequate space to work within
>> tolerance.
>
> font-family does not enter into it, at least not in the way you are
> assuming. You would need to use a *fixed-width* font for both the list-
> item marker and the list-item to be sure that your assumption that
> positioning the marker -1em left of the left border of the list-item box
> would be remotely correct.
Again OP was talking about a single character bullet, and one
predefined, surely -1.5em will do.
>
> Even then you would not yet have made sure that the marker is vertically
> centered in the first line (like the default markers) even though you would
> set its height to the font-size because the position of a glyph in a
> character depends on the font, and you cannot make sure that a fitting font
> is used. For example, in several sans-serif fonts the character `*' is
> placed above the mean line, rather aligning vertically with the cap height
> at which the topmost pixel of the `L' of "Lorem" is supposed to be.
>
> (<http://en.wikipedia.org/wiki/Cap_height>)
You have *no* control at all with list-position, so your point?
>
> That is emphasized by your suggesting
>
> top: 1.1em;
True, but it will be close enough, ditto from above.
Jonathan N. Little
> Thomas 'PointedEars' Lahn wrote:
>> font-family does not enter into it, at least not in the way you are
>> > assuming. You would need to use a*fixed-width* font for both the list-
>> > item marker and the list-item to be sure that your assumption that
>> > positioning the marker -1em left of the left border of the list-item box
>> > would be remotely correct.
> Well you could make it a bit more than 1em just in case the user has one
> of those fonts where some of the glyphs stray out of the em square.
>
> But you don't have any control over where the bullets go if you use
> normal outside list item markers anyway.
>
Exactly! That was my point, with list-position you have *no* control
over bullet positional verses where with generated content you have
*some* control. Yes not absolute control but "some" in *more* than none
which supports my statement.
Also, for those folks using legacy browser IE you still have a list just
no fancy bullets--big whoop! CSS styling is optional anyway and you
should always design so the page is usable without styling...
Thomas 'PointedEars' Lahn
> Thomas 'PointedEars' Lahn wrote:
>> Jonathan N. Little wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> Jonathan N. Little wrote:
>>>>> ul.with-character-css21 li:before {
>>>>> content: "*"; display: block; color: red; font-size: 2em;
>>>>> position: relative; left: -1em; top: 1.1em;
>>>>> }
>>>> You are still missing the point. A font-size of 2em does not mean
>>>> that the marker will be 2em wide or high.
>>> No, you're missing the point. Yes, font-size is a relative measurement
>>> with respect to the font being used, but if you have defined for your
>>> bullet the same font-family as the list content then 2em with be twice
>>> the size of content text.
>> 2em will be twice the _font-size_ of the content text (as if that was
>> even asked for here), but that is beside the point. The point is, a
>> character of a font does not need to be as wide as the font-size.
>
> I didn't say that it was.
Of course not, but that is what one must assume that you assume when you
position a list-item marker like that. Else it is fairly obvious that you
are merely guessing the correct position, and will be more often wrong than
right in doing so. In particular, you will be only correct for a specific
character of a specific font with a specific font-size, font-style, and
text-decoration. While you may be able to control the first one, and maybe
even the latter to, you have absolutely no control about the font that will
be used. And that is where this approach fails bad to meet the
requirements of a list-item marker.
> I said that the character will be twice the size of the referenced text.
And nobody asked for that. What was asked for was that a character
(string) could be used in place of a default list-item marker, with all the
properties that such an entity has. Your suggestions so far all fall short
of that simple requirement. Indeed, in forcing adequate presentation (and
failing to do so), you have even created another problem.
> It will be proportional as will be the width if measured in ems.
So what?
> Pixels would be another issue.
Yes. You are discounting a lot of issues nobody brought up here, no?
>> Take the character `i' for example, which is in many fonts only a
>> fraction as wide as the character `M' of the same font, from which the
>> font-size was originally derived in typography (the Em square) and is
>> derived in CSS 2.1:
>>
>> <http://www.w3.org/TR/CSS2/fonts.html#font-size-props>
>
> True I did not say otherwise.
That you *think* otherwise follows from your approach. Either that or you
have not fully understood the repercussions if your approach would be
followed.
> But the OP asked about designing for a *specific* character, not an
> arbitrary one.
No, he absolutely did not. He has merely provided an example to support
his suggestion that CSS3 (Lists) should allow "any arbitrary character
(sequence)." for a list-item marker.
> Anyway if the bullet is to
> be a *single* character than a value of -1em to -1.5em will surely do
It will _not_ because not all characters of a font (fixed-width fonts
aside) are of the same width (or height, but that does not even apply to
fixed-width fonts), and the space between the marker and the list-item
block is not of an em-sized width, too. Not to mention that few glyphs
are vertically centered in their characters.
> unless you are using some very-very odd expanded font which would be a
> bad idea since no one would have it on their system. Wide Latin comes to
> mind, but even that with the character "W" -1.5em would work...
No, you don't seem to understand how this works.
>>> Using a different font-family for the bullet could have unpredictable
>>> results because you are not guaranteed specified fonts would be on the
>>> users system, but you can design with adequate space to work within
>>> tolerance.
>>
>> font-family does not enter into it, at least not in the way you are
>> assuming. You would need to use a *fixed-width* font for both the list-
>> item marker and the list-item to be sure that your assumption that
>> positioning the marker -1em left of the left border of the list-item box
>> would be remotely correct.
>
> Again OP was talking about a single character bullet,
No, read more carefully.
> and one predefined, surely -1.5em will do.
It will not as I have explained already. You need to listen what people
are saying for a change.
>> Even then you would not yet have made sure that the marker is vertically
>> centered in the first line (like the default markers) even though you
>> would set its height to the font-size because the position of a glyph in
>> a character depends on the font, and you cannot make sure that a fitting
>> font is used. For example, in several sans-serif fonts the character
>> `*' is placed above the mean line, rather aligning vertically with the
>> cap height at which the topmost pixel of the `L' of "Lorem" is supposed
>> to be.
>>
>> (<http://en.wikipedia.org/wiki/Cap_height>)
>
> You have *no* control at all with list-position, so your point?
list-position is very well beside the point. Yet another red herring,
I suppose?
>> That is emphasized by your suggesting
>>
>> top: 1.1em;
>
> True, but it will be close enough, ditto from above.
It is not. Try a bit harder and see.
Thomas 'PointedEars' Lahn
> Ben C wrote:
>> Thomas 'PointedEars' Lahn wrote:
>>> font-family does not enter into it, at least not in the way you are
>>> > assuming. You would need to use a*fixed-width* font for both the
>>> > list- item marker and the list-item to be sure that your assumption
>>> > that positioning the marker -1em left of the left border of the
>>> > list-item box would be remotely correct.
>> Well you could make it a bit more than 1em just in case the user has one
>> of those fonts where some of the glyphs stray out of the em square.
Utter nonsense. You have absolutely *no* control over the *font* that will
be used, and with pure CSS you cannot dynamically modify the marker's
position so that it fits the glyph so that the text still aligns with the
block. And you don't want to use the `display: block; top: ...' approach
either, for the reasons already given.
>> But you don't have any control over where the bullets go if you use
>> normal outside list item markers anyway.
>
> Exactly! That was my point, with list-position you have *no* control
> over bullet positional verses where with generated content you have
> *some* control. Yes not absolute control but "some" in *more* than none
> which supports my statement.
You are gibbering. The very point of having a character, in particular a
symbol character like in the OP's example, as a replacement for a default
list-item marker is that it would have the same properties, which includes,
UA-dependent display.
> Also, for those folks using legacy browser IE you still have a list just
> no fancy bullets--big whoop! CSS styling is optional anyway and you
> should always design so the page is usable without styling...
You are delusional. Get better.
Ben C
> Jonathan N. Little wrote:
>
>> Ben C wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> font-family does not enter into it, at least not in the way you are
>>>> > assuming. You would need to use a*fixed-width* font for both the
>>>> > list- item marker and the list-item to be sure that your assumption
>>>> > that positioning the marker -1em left of the left border of the
>>>> > list-item box would be remotely correct.
>>> Well you could make it a bit more than 1em just in case the user has one
>>> of those fonts where some of the glyphs stray out of the em square.
>
> Utter nonsense. You have absolutely *no* control over the *font* that will
> be used,
No, you don't know what font will be used, but you do know that the
glyphs in it are about 1 of its own em's tall.
> and with pure CSS you cannot dynamically modify the marker's
> position so that it fits the glyph so that the text still aligns with the
> block. And you don't want to use the `display: block; top: ...' approach
> either, for the reasons already given.
I don't understand the problem you're trying to solve here.
Axel Dahmen
you have provided so far, Jon, are all heuristic. Your solutions are trying
to reproduce a non-existing feature by making assumptions on the font that's
being used. Or even on the bullet character being used.
But that's not the design principle behind CSS - and I'm referring to the
word "cascading" in CSS here... If I have assigned a bullet character in
some rule and a font in some other rule, perhaps even some other file, then
I *can't* possibly know the dimensions of the bullet. And getting so much
hard-coded isn't desired at all. CSS is not about try & error, it's about
abstract design.
Let me give some examples of how I imagine Jon's examples to be implemented
*with* my suggestion in place:
body
{font-family: SomeGaudyFont, serif;
}
ul
{list-style-type: "—";
}
ul:marker
{color: red;
font-size: 200%;
}
Axel Dahmen
body
{font-family: SomeGaudyFont, serif;
}
ul
{list-style-type: "|---->";
}
ul:marker
{color: red;
font-size: 200%;
padding-right: 1em;
}
Ben C
> Of course not, but that is what one must assume that you assume when you
> position a list-item marker like that. Else it is fairly obvious that you
> are merely guessing the correct position,
As opposed to having the browser guess it for you.
> and will be more often wrong than right in doing so. In particular,
> you will be only correct for a specific character of a specific font
> with a specific font-size, font-style, and text-decoration.
What's the criterion for "correct" here?
> While you may be able to control the first one, and maybe even the
> latter to, you have absolutely no control about the font that will be
> used. And that is where this approach fails bad to meet the
> requirements of a list-item marker.
What are the requirements of a list-item marker?