search

dvschultz / 99problems

99 Problems and e-reader rendering are all of them
60 stars 3 forks source link

Google Play splits HTML pages in unexpected places #24

Open makeBetterEBooks opened 10 years ago

makeBetterEBooks commented 10 years ago

Google Play will split some HTML pages at arbitrary points for "performance reasons". Breaks are consistent across devices and even across versions of the ePub.

dvschultz commented 10 years ago

does this split lead to issues? (CSS not rendering correctly, poorly rendered markup). I could imagine using something like :nth-child would cause problems if they split your HTML doc in the middle.

makeBetterEBooks commented 10 years ago

You don't even need to have random splits in the HTML to end up with pseudo class failures. http://bjhollingum.blogspot.com/2014/01/bug-chasing-in-google-play-books.html

JayPanoz commented 8 years ago

How it works (at least for cloud reader but it seems consistent with the app’s behavior).

  1. to achieve pagination, Play Books slices contents (so that it can be put it into divs, which are loaded into iframes);
  2. your CSS is actually loaded in the head of each iframe, “combined” with the classes Google creates and uses (see 3);
  3. their paginator is called “ocean” and there are classes like “df6eof8op” created on the fly, in order to “scope” your styles;
  4. you end up with .df6eof8op p:first-of-type::first-letter;
  5. there are HTML5 custom elements to manage widows/orphans for instance…

In other words, it's the perfect example of file alteration which can go insanely wrong since, for instance, your html { font-size: 62.5%; }, on which all your rem sizes depend, becomes .df6eof8op html { font-size: 62.5%} in Play Books. So yeah, that's not root anymore…

tl;dr: it's somehow like a simplistic implementation of CSS Regions using iframes, divs and dynamically scoped CSS selectors.