Prev: Photo Gallery: Ping Dorayme
Next: Which CSS apply to <frameset> and <frame>?
From: Jonathan N. Little on 21 Mar 2010 16:48
Thomas 'PointedEars' Lahn wrote:
> 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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
From: Jonathan N. Little on 21 Mar 2010 19:02
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.
>
> 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...

--
Take care,

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

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


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: Thomas 'PointedEars' Lahn on 21 Mar 2010 20:12
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, 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.


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$8300dec7(a)news.demon.co.uk>
From: Ben C on 22 Mar 2010 03:59
On 2010-03-22, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> wrote:
> 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.
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: Photo Gallery: Ping Dorayme
Next: Which CSS apply to <frameset> and <frame>?