[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