which readers honor -webkit-transform CSS property?

Question

I have got an ebook (in epub format) of a popular Italian series for children. However, I cannot browse it with my usual Android ebook reader (Moon+ Reader Pro) because formatting is quite wrong: for example the text is so big that a screen shows ten words or so. Sigil however displays the text fine in the preview. I checked the source code, and I noticed that for each page there are specific CSS styles. Here there is a sample:

.t18 {
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: scale(0.25);
    -ms-transform: scale(0.25);
    transform: scale(0.25);
    z-index: 2;
    position: absolute;
    white-space: pre;
    overflow: visible;
}
#t1_18{left:315px;bottom:32px;letter-spacing:3.1px;}
#t2_18{left:108px;bottom:663px;}
#t3_18{left:108px;bottom:631px;}
#t4_18{left:108px;bottom:599px;}
#t5_18{left:254px;bottom:599px;}
#t6_18{left:108px;bottom:567px;}
#t7_18{left:125px;bottom:563px;letter-spacing:3.3px;}

Here there is the text for a snippet of the page, and its rendering:

<div id="p18" style="overflow: hidden; position: relative; background-color: white; width: 614px; height: 805px;">
<div id="pg18Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"></div>
<div id="pg18" style="-webkit-user-select: none;"><img height="805" id="pdf18" src="../Images/18.png" style="width:614px; height:805px; -moz-transform:scale(1); z-index: 0;" width="614"/></div>
<div class="t18 s1_18" id="t1_18">14</div>
<div class="t18 s2_18" id="t2_18">– Senza dimenticare la scaletta per la presen-</div>
<div class="t18 s2_18" id="t3_18">tazione – annotò Colette. – Oh, ci sono ancora</div>
<div class="t18 s3_18" id="t4_18">tantissimissimi</div>
<div class="t18 s2_18" id="t5_18">dettagli da sistemare!</div>
<div class="t18 s4_18" id="t6_18">–</div>
<div class="t18 s5_18" id="t7_18">Per mille bielle sbiellate</div>
<div class="t18 s4_18" id="t8_18">,</div>
<div class="t18 s2_18" id="t9_18">per riuscire a orga-</div>
<div class="t18 s2_18" id="ta_18">nizzare tutte queste cose avremo bisogno di</div>

My guess is that I need a reader which supports -webkit-transform-origin , -ms-transform-origin, -webkit-transform and -ms-transform. Do you know of any?

Answer 1

I guess the problem is either:

• in the specific software (Moon + Reader Pro): maybe it has some bugs in parsing .css
• or in the screen size of your tablet: the scale 0.25 is too big for it

The css you provided looks reasonable:

-webkit- tags are added for compatibility with iOS readers, because those readers won't display an epub properly without this tag

-ms- tags are added for compatibility with Windows readers

As your platform is Android, the first 2 tags in the following CSS should be ignored:

-webkit-transform: scale(0.25);
-ms-transform: scale(0.25);
transform: scale(0.25);

So your reader should parse the simple transform tag.

I'd advice you to:

1. Try to change the scale(0.25) to scale(0.15) or so and see if the result is better.

2. Write to the support of Moon + Reader Pro app and ask if there can be a problem in the app when rendering your specific epub.