Answers.Body: <p>I guess the problem is either:</p>
  
  <ul>
  <li>in the specific software (Moon + Reader Pro): maybe it has some bugs
  in parsing .css  </li>
  <li>or in the screen size of your tablet: the scale 0.25
  is too big for it</li>
  </ul>
  
  <p>The css you provided looks reasonable:</p>
  
  <p><code>-webkit-</code> tags are added <a href="http://css-infos.net/property/-webkit-transform-origin" rel="nofollow noreferrer">for compatibility with iOS readers</a>, because those readers won't display an epub properly without this tag  </p>
  
  <p><code>-ms-</code> tags are added <a href="https://htmlcss.fandom.com/wiki/-ms-transform-origin" rel="nofollow noreferrer">for compatibility with Windows readers</a></p>
  
  <p>As your platform is Android, the first 2 tags in the following CSS should be ignored:</p>
  
  <pre><code>-webkit-transform: scale(0.25);
  -ms-transform: scale(0.25);
  transform: scale(0.25);
  </code></pre>
  
  <p>So your reader should parse the simple <code>transform</code> tag.</p>
  
  <p>I'd advice you to:</p>
  
  <ol>
  <li><p>Try to change the <code>scale(0.25)</code> to <code>scale(0.15)</code> or so and see if the 
  result is better.</p></li>
  <li><p>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.</p></li>
  </ol>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-04-15T14:43:55.377Z
Answers.Text: 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!
Answers.UserDisplayName: mau
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-04-15T10:00:45.650Z
Answers.LastActivityDate: 2020-04-15T10:00:45.650Z
Answers.UserDisplayName: olha
Body: <p>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: </p>
  
  <pre><code>.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;}
  </code></pre>
  
  <p>Here there is the text for a snippet of the page, and its rendering: </p>
  
  <pre><code>&lt;div id="p18" style="overflow: hidden; position: relative; background-color: white; width: 614px; height: 805px;"&gt;
  &lt;div id="pg18Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"&gt;&lt;/div&gt;
  &lt;div id="pg18" style="-webkit-user-select: none;"&gt;&lt;img height="805" id="pdf18" src="../Images/18.png" style="width:614px; height:805px; -moz-transform:scale(1); z-index: 0;" width="614"/&gt;&lt;/div&gt;
  &lt;div class="t18 s1_18" id="t1_18"&gt;14&lt;/div&gt;
  &lt;div class="t18 s2_18" id="t2_18"&gt;– Senza dimenticare la scaletta per la presen-&lt;/div&gt;
  &lt;div class="t18 s2_18" id="t3_18"&gt;tazione – annotò Colette. – Oh, ci sono ancora&lt;/div&gt;
  &lt;div class="t18 s3_18" id="t4_18"&gt;tantissimissimi&lt;/div&gt;
  &lt;div class="t18 s2_18" id="t5_18"&gt;dettagli da sistemare!&lt;/div&gt;
  &lt;div class="t18 s4_18" id="t6_18"&gt;–&lt;/div&gt;
  &lt;div class="t18 s5_18" id="t7_18"&gt;Per mille bielle sbiellate&lt;/div&gt;
  &lt;div class="t18 s4_18" id="t8_18"&gt;,&lt;/div&gt;
  &lt;div class="t18 s2_18" id="t9_18"&gt;per riuscire a orga-&lt;/div&gt;
  &lt;div class="t18 s2_18" id="ta_18"&gt;nizzare tutte queste cose avremo bisogno di&lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.sstatic.net/deZ5d.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/deZ5d.png" alt="rendering of part of the page"></a></p>
  
  <p>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?</p>
  
Tags: <epub><css>
Title: which readers honor -webkit-transform CSS property?
UserDisplayName: mau
ThreadText: # which readers honor -webkit-transform CSS property?
  
  (Asked by: username_0 on 2020-03-16)
  
  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](https://i.sstatic.net/deZ5d.png)](https://i.sstatic.net/deZ5d.png)
  
  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?
  
  **Tags:** epub, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2020-04-15. Score: 1 | Accepted answer
  
  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](http://css-infos.net/property/-webkit-transform-origin), because those readers won't display an epub properly without this tag
  
  `-ms-` tags are added [for compatibility with Windows readers](https://htmlcss.fandom.com/wiki/-ms-transform-origin)
  
  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.
  
  > **Comments:**
  > **username_0**: 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!  
  
  ---
  
  