View Full Version : Text Rotation (Flip)


R3rr0
01-18-2013, 10:45 AM
Hi All.

It's possible to rotate a text of 180 deg in ADE? I'm working on a paper-book that contain some text flipped, and want to digitalize it. Since I don't want to insert images of text in it and want to maintain the original layout, I try this one:

-webkit-transform: rotate(-180deg)

that works in Sigil: the text is displayed correctly flipped. Then saving and opening with ADE, the text is straight. Even on my device (cybook odyssey) is straight. Should I use a script? Does it works in ADE?

Thanks

pholy
01-18-2013, 11:13 AM
Since ADE doesn't use the webkit software, I'm not too surprised that a webkit specific instruction doesn't work. I think you will have to create a mirror reversed version of the font and then embed the subset you need. That would work on all readers that allow embedded fonts.

-- N.B. I have no idea how hard that would be, even though it is computable :)

Jellby
01-18-2013, 11:23 AM
You could try with SVG. I used SVG to rotate same text in Tom Sawyer (Chapter 5). It worked in ADE and in my reader.

HarryT
01-18-2013, 11:31 AM
If it's just a few words, I'd use an image file. Easy and portable.

R3rr0
01-18-2013, 11:44 AM
@ Jellby
I'm downloading the epub and I'll try to understand how to do (Until now, I did only few books and I don't know svg). For now, thanks a lot :)

readx
01-18-2013, 12:02 PM
Maybe sıɥʇ (http://www.en.fliptext.net/) will work for you ;)

R3rr0
01-18-2013, 12:07 PM
the text is too long. You loose CAPS and other stuff that should remain. Trying svg but too complex, without a straight exemple of a 180 deg rotated text it's nearly impossible for me. Trying even in the book mentioned above by Jellby, but changing the value of -2.5 in "rotation" to a value of -180 simply make disappear the text.

mzmm
01-18-2013, 12:37 PM
Maybe sıɥʇ (http://www.en.fliptext.net/) will work for you ;)

fancy - didn't know about this one. ibooks has some css3 support, you know if it works there?

Jellby
01-18-2013, 12:40 PM
but changing the value of -2.5 in "rotation" to a value of -180 simply make disappear the text.

Probably because it moved out of the viewport.

You can try simpler samples:

http://tutorials.jenkov.com/svg/text-element.html
http://www.w3schools.com/svg/svg_text.asp

But I'm afraid that would only work for short texts (one line), as SVG does no automatic linebreaking.

R3rr0
01-18-2013, 12:54 PM
But I'm afraid that would only work for short texts (one line), as SVG does no automatic linebreaking.

Thanks. What make me angry, is that with webkit instruction (simple, very simple :D ) it works perfectly in Sigil, that IS an epub editor. Why does not work in ade? Really confused... I'll add to the epub the images of text, without editing. Bother&pessimism... :(

Jellby
01-18-2013, 01:24 PM
Thanks. What make me angry, is that with webkit instruction (simple, very simple :D ) it works perfectly in Sigil, that IS an epub editor.

Because that webkit instruction is specific for webkit renderers, which Sigil happens to be. And of course, ADE is not webkit-based.

Even if it were, that webkit instruction is not required by the ePub spec, so you should not rely on it. In ePub 3 maybe you can use CSS3 properties for that, but don't hold your breath either. Anyway, Sigil is not doing anything wrong there, neither is ADE, you are just using a property that's out of the ePub spec, and each renderer may or may not support it, at its discretion.

Just remember: Sigil is an ePub editor that lets you create valid ePub (2.0.1) files. It is not a reference ePub render, whatever it renders is only orientative, subject to webkit bugs and features, and other ePub viewers will have their own bugs and limitations too.

R3rr0
01-18-2013, 01:55 PM
Thanks for the explanations and for the advices, Jellby. As I say, I will skip the problem by inserting the images of the text or, more likely, make a single line note "flipped in the original text" before the text. Thanks again for the assistance.

JSWolf
01-18-2013, 03:32 PM
If it's just a few words, I'd use an image file. Easy and portable.

More of a mess when someone wants to change the text size and the image stays the same. Besides, with Calibre's font subsetting, it won't take that much space for the embedded fonts.

DaleDe
01-19-2013, 01:14 PM
More of a mess when someone wants to change the text size and the image stays the same. Besides, with Calibre's font subsetting, it won't take that much space for the embedded fonts.

Small inline images also zoom when the text size is changed in most rendering engines, although resolution doesn't improve :)

Doitsu
01-19-2013, 02:04 PM
Another possibility would be to simply embed a free upside down font. For example, Quirkus Upside Down (http://www.fonts2u.com/quirkus-upside-down.font), however, this would only be feasible for single letters because words would need to be mirrored, since very few ereaders support bidirectional control characters.
Besides, mirrored text would be rendered illegible if the user disables the use of embedded fonts.

JSWolf
01-19-2013, 02:49 PM
Another possibility would be to simply embed a free upside down font. For example, Quirkus Upside Down (http://www.fonts2u.com/quirkus-upside-down.font), however, this would only be feasible for single letters because words would need to be mirrored, since very few ereaders support bidirectional control characters.
Besides, mirrored text would be rendered illegible if the user disables the use of embedded fonts.

If the user disables the emebedded font (if possible) then it's the user's fault that the text looks wrong.