Prev: Photo Gallery: Ping Dorayme
Next: Which CSS apply to <frameset> and <frame>?
From: Jonathan N. Little on 21 Mar 2010 13:47
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, 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;
}

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
From: Thomas 'PointedEars' Lahn on 21 Mar 2010 13:51
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.


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.)
From: Jonathan N. Little on 21 Mar 2010 14:56
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. 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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
From: Thomas 'PointedEars' Lahn on 21 Mar 2010 16:02
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. 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
From: Ben C on 21 Mar 2010 16:24
On 2010-03-21, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> 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. 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:

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).
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: Photo Gallery: Ping Dorayme
Next: Which CSS apply to <frameset> and <frame>?