text at any angle without flash and js

Earlier, an article was presented here on how to make vertical text with pictures generated by php.

Now I want to tell you about how to do the task without pictures, flash and js, only by means of html and css. In addition, it became possible to make the text at an arbitrary angle. At the end of the article there is a ready-made example.



Cross-browser compatibility:

• Internet Explorer 6, 7, 8
• Mozilla Firefox 2, 3
• Opera 9
• Safari 3, Google Chrome (webkit)

Limitations:
It is possible to make the text only in one line, and in a block with rigidly defined dimensions in pixels.
')

Let's start:

So, we need a framing block with a given width and height, as well as a line height equal to the width of this block (to align the text in the center):

css:
.vertical { overflow:hidden; line-height:30px; position:relative; white-space:nowrap; width:30px; height:200px; border:1px solid #999; }

html:
<div class="vertical"></div>

For modern browsers we will use svg:

css:
.vertical object { width:30px; height:200px; display:block; } - .

html:
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='18' font-family='Arial' font-size='12' fill='#000000' transform='rotate(-90)' text-rendering='optimizeSpeed'> </text></svg>">
</object>
— x='-200' - object, y='18' - object,
font-family='Arial' font-size='12' - , ,
fill='#000000' - ,
transform='rotate(-90)' - -90 .

For all versions of IE:

Since IE even the 8th version does not support svg (the developers said that they already had a lot of work), we will use specific properties:
writing-mode: tb-rl; - the text is placed vertically from top to bottom and from right to left
filter: flipv () fliph (); - we reflect horizontally and vertically.

css:
.vertical object { display:none; } - svg.
.vertical span { filter:flipv() fliph(); writing-mode:tb-rl; display:block; position:absolute; left:0; bottom:0; height:200px; width:30px; }

html:
<span> </span>

for text at an angle css looks like this:
.vertical3 span {top: -8px; left: -31px; width: 200px; writing-mode: lr-tb; filter: progid: DXImageTransform.Microsoft.Matrix (M11 = '0.985', M12 = '- 0.174', M21 = '0.174', M22 = '0.985', SizingMethod = "auto expand"); }

top, left - empirical values. are experimentally.
M11 = cos (angle in degrees)
M12 = -sin (angle in degrees)
M21 = sin (angle in degrees)
M22 = cos (angle in degrees)
Negative values ​​do not take! if we need to rotate by -45 degrees, then we take the values ​​of trigonometric functions from an angle of 315 degrees.

Total:

We got a way to make vertical and oblique text in all major browsers, which allows us to use this on real projects, if it is really necessary.

Specifically, in my case, a real project helped me to understand this — an online bookstore in which the designer painted a basket-bookshelf in which the names of books for purchase were written on the spine.

Ready example:
www.site-creator.info/html/vertical-text.php

PS Thanks enternet for helping get rid of hacks for Safari and Google Chrome
PPS Added example text at an arbitrary angle.

PPPS If you are using article material, provide a link to this article! Here I will add sites with illegal copying:
0. The site was, but already corrected

If the author of such an article indicates the source, then his site will leave this list.