07-02-2015, 09:19 AM | #1 |
Zealot
Posts: 115
Karma: 10
Join Date: Jan 2011
Device: none
|
Rotating text
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. |
07-02-2015, 11:02 AM | #2 | |
Wizard
Posts: 1,572
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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); } Code:
<h1> </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> 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 Last edited by RbnJrg; 07-02-2015 at 11:42 AM. |
|
Advert | |
|
07-02-2015, 11:08 AM | #3 |
Resident Curmudgeon
Posts: 74,902
Karma: 131375774
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
There is another solution that should work even better and work in ADE. Use SVG to rotate the text.
|
07-02-2015, 11:11 AM | #4 |
Zealot
Posts: 115
Karma: 10
Join Date: Jan 2011
Device: none
|
Thanks a lot. I think, i'll go with the SVG solution.
|
07-07-2015, 05:11 AM | #5 |
Zealot
Posts: 115
Karma: 10
Join Date: Jan 2011
Device: none
|
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. |
Advert | |
|
07-07-2015, 04:43 PM | #6 | |
Wizard
Posts: 1,572
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Regards Rubén |
|
07-07-2015, 06:02 PM | #7 |
Zealot
Posts: 115
Karma: 10
Join Date: Jan 2011
Device: none
|
Thanks a lot. That's really cute. I'll certainly use it in the future.
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Literary Rotating Nominations | sun surfer | Book Clubs | 395 | 12-02-2017 09:35 AM |
iPad Rotating case? | owly | Apple Devices | 11 | 10-30-2014 09:58 PM |
rotating text | zipping | More E-Book Readers | 1 | 02-19-2011 11:13 AM |
Rotating images | rcuadro | Sigil | 3 | 11-27-2009 07:12 PM |
Rotating images (portrait/landscape) | Jellby | ePub | 10 | 02-03-2009 07:35 AM |