CSS direction:rtl and top to bottom?

Question

I'm using the following CSS to read a text from right to left:

.rtl { unicode-bidi:bidi-override;direction:rtl;width:300px;}

<span class="rtl">.tfel οt thgir mοrf daer si txet sihT</span>

It's part of an experimental site that would display all the text in the source code reversed, but readable to users.

It works well if I only have a sentence of text. However, once the length of the text is longer than the size of the element (300px in this case), the order of the sentences no longer works. For instance:

Source:

<div class="rtl"> .skaerb txet eht ,htgnel niatrec a tsaP .yllamron demrof era shpargarap eht rehtehw ees ot secnetnes lareves dedulcni ev'I dna ,tfel ot thgir morf daer si txet sihT</div>

Output:

(since I can't post images, there it is: http://img4.hostingpics.net/pics/990715343.jpg )

As you can see, the first sentence, "This text is read from right to left" is aligned at the bottom, which means the order of the paragraph is wrong.

Is there another way to have to text flow normally from top to bottom and read from right to left?

Thank you

Answer 1

It seems (as I explain in a comment) that you actually want text lines to be laid out bottom to top. There is currently no standard or cross-browser way to achieve that. On IE (version 8 and newer) you can use writing-mode: rl-bt (right to left, bottom to top). You might also wish to set text-align: left, since right-to-left direction implies by default right alignment, which is OK for right-to-left languages, but not so for tricks on writing direction for left-to-right languages.