1

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>

rendering of part of the page

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?

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.

| improve this answer | |
  • Thank you for your answer! I tried to change scale to 0.1 for all three transforms tags: Sigil shows the words in the right position but really tiny, which is expected, but in Moon+ Reader Pro there was no effect. I guess the only option is to ask the developer of Moon+ Reader Pro. Thanks again! – mau Apr 15 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.