Click to See Complete Forum and Search --> : Vertical Text in CSS3


chestertb
01-25-2009, 04:50 PM
I'm trying to draw English text rotated 90deg anti-clockwide.

I know that in IE, this does the job...
.vert {
writing-mode: tb-rl;
filter: flipv fliph;
}

This, of course, is not W3C compliant, so it doesn't work in FF.

W3C makes reference to a number of elements that combine to do the job, but I can't find any examples for English Language text, though this is specifically referred to in the W3C white paper (http://www.unicode.org/notes/tn22/RobustVerticalLayout.pdf)that sets it all out, as well as the W3C reference page (http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction), but I struggle to find spefic and relevant references.

(My person view is that while I understand the need for W3C to create something multi-lingual, their vertical text solution appears to be overly complicated.)

I tried this...
.vertical {
block-progression: lr;
direction: ltr-btt;
}

...but it doesn't work.

I found other references to "unicode-bidi", which apparently switches this capability on and off, but none that specifically related that to English.

Can anyone steer me in the right direction, or does anyone have a specific example they could share?

Thanks
CTB

Fang
01-26-2009, 07:13 AM
Afaik there is no support for vertical text as yet, apart from IE filters.

chestertb
01-26-2009, 07:22 AM
hmmm.
Thanks Fang. That's what I have come to suspect. This is very confusing. The CSS3 specification on w3c.org seems to indicate that there is.
And theywonder why IE still dominates the browser world.
Ah well. I guess I'll just make that page available to IE users only. It's an admin page, and not a public page, so it's less of a problem than it otherwise would have been.
Thanks for your help.
Cheers
CTB

Fang
01-26-2009, 08:36 AM
The CSS3 specification on w3c.org seems to indicate that there is.It's a recommendation. It takes time for browsers to implement new properties.

In the mean time: http://ccapeng.blogspot.com/2008/03/use-css-to-create-vertical-text.html