search

kobolabs / epub-spec

Details on the elements of the ePub spec that Kobo supports, as well as other information on the Kobo reading platforms.
Other
191 stars 20 forks source link

[Kobo iOS] [Kobo Android] Publisher’s default + text-align #28

Closed JayPanoz closed 7 years ago

JayPanoz commented 8 years ago

So, when text-align is not declared in the CSS and you pick “Publisher’s default” setting in the menu, the whole text is centered (by default).

For the record, if you set text-align: left for h1 for instance, then the whole text is left-aligned when using this setting.

Applies to Kobo iOS and Kobo Android.

bdugas commented 8 years ago

Can you send a sample ePub or do you know of any files formatted in this way that are already in production? I'd be interested in testing in both environments.

bdugas commented 7 years ago

@JayPanoz just checking again to see if you have a sample? It would be difficult to scan our system specifically for a file with that CSS.

JayPanoz commented 7 years ago

Ok so there’s actually no need for a sample, the solution is actually pretty simple.

In my EPUB file I had: 

div {
  text-align: center;
}

And there was no text-align declaration for other selectors.

The assumption being: “well, I'm using div only for images so I don't need to attribute it a class.”

photo 16-02-2017 12 48 33

Since contents are appended in a div, text-align: center applies to the whole HTML file (1) when no text-align user setting is set.

When the user setting is set (2), text-align is set for div#inner-book.

That's probably an edge case but as far as I can remember, it's not the first time I encounter EPUB files in which such a prop is declared for a global element so I guess it's worth reporting it.

Maybe declaring a fallback text-align for body before the author’s CSS then assigning the inherit value to#book-columns or #inner-book, without !important could solve this?

bdugas commented 7 years ago

@JayPanoz thanks for the follow up and the snippet. I'm not going to log this as a bug fix because 1) it is an edge case (we don't see this happen in any of the content we review) and 2) technically our app is doing what the content is telling it. That said if we do see this display issue pop up in QA we'll refer back to this and see if we need to implement something on Android that will compensate for justification applied to the div tag.