Homepage
Login
Profile
BookClubs
dmBox
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?
Free books android app tbrJar TBR JAR Read Free books online gutenberg
(1)More posts by @Phylliss
1 Comments
Sorted by latest first Latest Oldest Best
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:
Try to change the scale(0.25) to scale(0.15) or so and see if the
result is better.
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.
Free books android app tbrJar TBR JAR Read Free books online gutenberg