Stylesheets - vertical alignement of character in text

Author

vertical alignement of character in text

michael

2004-06-17, 7:16 pm

I have a group of links prefixed with the arrow as follows:
»link1 »link2 »link3

I would like the arrows to be vertically aligned middle of the text, like
as if they were bullets of list item, but without linebreaks.

The text would be quite large and set to a percentage, eg. 200%, so
there's no way of knowing the exact pixel height.

If all items were simply placed after each other, the arrow would naturally
fall to the baseline of the text.

Using an old table, the align middle effect could be done as follows:
<table><tr>
<td> » </td><td> link1</td
<td> » </td><td> link2 </td>
<td> » </td><td> link3 </td>
</tr></table>

But a table isn't very flexible, as linebreaks do not occur if the window
is scaled down to less than the combined width of all links.

What CSS way(s) are there which can do this better?

Jukka K. Korpela

2004-06-17, 7:16 pm

michael <nomail@example.com> wrote:

> I have a group of links prefixed with the arrow as follows:
> »link1 »link2 »link3

The character » is not an arrow but a quotation markup. Common as it
might be to use it as an arrow symbol, I would recommend using either a
real arrow character or an image. On the other hand, arrows have the
connotation of _direction_, so is this really a "breadcrumb" as it would
suggest to many people?

> I would like the arrows to be vertically aligned middle of the text,
> like as if they were bullets of list item, but without linebreaks.

Assuming that the links are in a block element with no other content,
i.e. something like

<div class="nav">
»<a href="...">link1</a>
»<a href="...">link2</a>
»<a href="...">link3</a>
...
</div>

then you could use a little trick like

..nav a { vertical-align: -0.2ex; }

which lowers the links so that the quotation marks appear as if (roughly)
middle aligned with them.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

James Moe

2004-06-17, 11:15 pm

michael wrote:
> I have a group of links prefixed with the arrow as follows:
> =BBlink1 =BBlink2 =BBlink3
>=20
I suggest using an image; you have a lot more control over the=20
appearance and positioning.
The quote marks shown above may not sit on the baseline in all fonts. =

So adjusting the text to match may work for your system but not others.

--=20
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

Neal

2004-06-17, 11:15 pm

On 17 Jun 2004 23:16:54 GMT, James Moe <jmm-list.TRSPAMTR@sohnen-moe.com>
wrote:

> michael wrote:
> I suggest using an image; you have a lot more control over the
> appearance and positioning.
> The quote marks shown above may not sit on the baseline in all fonts.
> So adjusting the text to match may work for your system but not others.
>

In what way would you suggest using an image improves the chances of a
more suitable positioning, seeing that some browsers don't resize images
with the text?

Using a chracter re-positioned relative to the font size is going to give
a better appearance IMO.

michael

2004-06-18, 12:15 pm

Neal wrote:
> Using a chracter re-positioned relative to the font size is going to give
> a better appearance IMO.

I agree it would be better to use a text character for resizin purposes,
whilst I guess an image could simply be align=middle, how exactly could I
re-position the » character relative to the font size?

Neal

2004-06-18, 12:15 pm

On Fri, 18 Jun 2004 16:11:48 +0200, michael <nomail@example.com> wrote:

> Neal wrote:
>
> I agree it would be better to use a text character for resizin purposes,
> whilst I guess an image could simply be align=middle, how exactly could I
> re-position the » character relative to the font size?

Like Jukka said, using a font-size-based measurement like ex or em. You
did see Jukka's response? I quote it below.

"Assuming that the links are in a block element with no other content,
i.e. something like

<div class="nav">
»<a href="...">link1</a>
»<a href="...">link2</a>
»<a href="...">link3</a>
...
</div>

then you could use a little trick like

..nav a { vertical-align: -0.2ex; }

which lowers the links so that the quotation marks appear as if (roughly)
middle aligned with them."

michael

2004-06-18, 7:16 pm

> Like Jukka said, using a font-size-based measurement like ex or em. You
> did see Jukka's response? I quote it below.

Yes I read it, but I also read somewhere that ex is badly approximated by
browsers, but maybe that's old information. I'll test. Thanks for the info.

Jukka K. Korpela

2004-06-18, 7:16 pm

michael <nomail@example.com> wrote:

> - - I also read somewhere that ex is badly approximated by
> browsers, but maybe that's old information

It is still true in the sense that browsers generally do not implement ex
as it should be implemented, as the font's x height value. Instead they
treat as 0.5em. But although this is incorrect - the x height varies by
font, so that for serif fonts, ex is usually smaller than 0.5em, for
sans-serif fonts it is usually larger than 0.5em - it gives reasonable
results in cases like this.

In effect, one can use ex when it is acceptable that browsers implement
it as 0.5em and desirable that they implement it correctly as the
x height.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

James Moe

2004-06-18, 11:14 pm

Neal wrote:
>
> In what way would you suggest using an image improves the chances of a
> more suitable positioning, seeing that some browsers don't resize images
> with the text?
>
The image would not necessarily re-size, of course, but would at least
be positioned in the middle as desired. Using the text arrow assumes the
user's font will actually display what the OP thinks will be displayed.

--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

Neal

2004-06-19, 4:14 am

On Fri, 18 Jun 2004 21:34:53 +0000 (UTC), Jukka K. Korpela
<jkorpela@cs.tut.fi> wrote:

> michael <nomail@example.com> wrote:
>
>
> It is still true in the sense that browsers generally do not implement ex
> as it should be implemented, as the font's x height value. Instead they
> treat as 0.5em. But although this is incorrect - the x height varies by
> font, so that for serif fonts, ex is usually smaller than 0.5em, for
> sans-serif fonts it is usually larger than 0.5em - it gives reasonable
> results in cases like this.
>
> In effect, one can use ex when it is acceptable that browsers implement
> it as 0.5em and desirable that they implement it correctly as the
> x height.
>

Question: if -0.2ex might be rendered differently, wouldn't -0.1em yield
more predictable results, and therefore be more desirable? Especially when
the actual pixel height of 1em would be under 20px, the actual center of
the ex-height wouldn't vary more than a pixel... or am I missing
something? And what is it? ;)

Jukka K. Korpela

2004-06-19, 4:14 am

Neal <neal413@yahoo.com> wrote:

> Question: if -0.2ex might be rendered differently, wouldn't -0.1em
> yield more predictable results, and therefore be more desirable?

More predictable, yes; but not necessarily more desirable, if -0.2ex
describes better what you really want.

> Especially when the actual pixel height of 1em would be under 20px,
> the actual center of the ex-height wouldn't vary more than a pixel...

In this particular case, dealing with a specific character (which IMHO
should not be used instead, since it is a punctuation mark [sorry for my
typo "markup" in my original reply]), it seemed, after some quick tests,
that -0.2ex might be close to the desired appearance. I tend to think
such things in terms of the x height, and therefore used the ex unit. In
this case it would indeed rarely matter whether one uses -0.2ex or
-0.1em. But I think that typical when you set the vertical-align property
for a piece of text (e.g., for <sub> or <sup> elements to get a more
consistent appearance), ex better relate to the goal. For example, to set
some character in a suitable superscript position, I would rather
describe "suitable" in terms of the x height than the font height.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

michael

2004-06-22, 7:22 pm

> In effect, one can use ex when it is acceptable that browsers implement
> it as 0.5em and desirable that they implement it correctly as the
> x height.

I tested this, across browsers and the result is fine. Thanks for the info!