Thread: Rotating text
View Single Post
Old 07-02-2015, 11:02 AM   #2
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,830
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by kamanza View Post
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?

Click image for larger version

Name:	Image1.png
Views:	419
Size:	107.2 KB
ID:	139930

The .css styles are:

Code:
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:

Code:
<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:

Click image for larger version

Name:	Image2.png
Views:	444
Size:	85.7 KB
ID:	139933

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

Regards
Rubén
Attached Files
File Type: epub Rotate Text.epub (2.6 KB, 410 views)
File Type: epub Rotate Text for ADE.epub (3.0 KB, 346 views)

Last edited by RbnJrg; 07-02-2015 at 11:42 AM.
RbnJrg is offline   Reply With Quote