Rotating text

[kamanza]

Is it possible to rotate text in ePUB to get something like this:
I could do it with images, but a css solution, if possible,would be more elegant.

[RbnJrg]

Originally Posted by kamanza

Is it possible to rotate text in ePUB to get something like this:

I could do it with images, but a css solution, if possible,would be more elegant.

Something like this?



The .css styles are:

h1 {
 height: 250px;
 width: 1.2em;
 margin: 0;
 border-right: 2px solid;
 text-align: left;
}

p {
 font-family: "Lucida Sans Unicode"; /* Of course, this font can be anyway you want */
 font-size: 1em;
 text-align: left;
 text-indent: 0;
 margin: 0
}

.vertical {
 float: left;
 font-family: "Impact"; /* Of course, this font can be anyway you want */
 font-weight: bold;
 font-size: 2.75em;
 height: 1em;
 width: 0.7em;
 text-align: center;
 margin: 35px 15px 0px 0;
 -webkit-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotate(-90deg);
}

and in the .xhtml file the code is:

<h1>&nbsp;</h1>

<p><span class="vertical">ONE</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>

However, there is a problem with this solution; the property "transform" (-webkit-transform; -ms-transform, etc.) are not soported for all ereader; so far you can use it with new kindle devices (those one who support .kf8), iPad and if you want to employ ADE, you need to utilize ADE 4.x and convert the epub2 to epub3 with the Sigil plugin. Also, take in count that the height, width and margins of the class "vertical" is linked with the font-family you want to use. So if you employ any other sans-serif font, you'll have to modify those values.

The other way is to employ a float .svg image with the rotated text you want (in this case "ONE"). Of that way you'll be able to read the ebook even with ADE 2.x.

This is how it looks in ADE with text as .svg image:



You can watch the Rotated Text for ADE.epub I attach to see how to get that result.

Regards
Rubén

[JSWolf]

There is another solution that should work even better and work in ADE. Use SVG to rotate the text.

[kamanza]

Thanks a lot. I think, i'll go with the SVG solution.

[kamanza]

After experimenting with the SVG, I had to use the images after all for 2 reasons:
1) Each chapter number needs a separate SVG wrapper with different values - as many as images - and more importantly,
2)Text in Svg has absolute dimensions & doesn't change with the font size changes in the main text, whereas image size can be expressed in 'em', scaling them with the main text.

[RbnJrg]

Originally Posted by kamanza

After experimenting with the SVG, I had to use the images after all for 2 reasons:
1) Each chapter number needs a separate SVG wrapper with different values - as many as images - and more importantly,
2)Text in Svg has absolute dimensions & doesn't change with the font size changes in the main text, whereas image size can be expressed in 'em', scaling them with the main text.

You can get relative size also with .svg images (that is, when the font size changes, the .svg image also changes). Below I attach a new epub; watch the changes I made to the code (now the class "float_left" is applied to the <img> tag instead of the <p> tag and I gave the class "float_left" new properties -width, height and font-size).

Regards
Rubén

[kamanza]

Thanks a lot. That's really cute. I'll certainly use it in the future.