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?

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/

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)

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.

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?

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

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

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/

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)

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? ;)