Possible book formatting issue in certain epub reading apps when aligning text to the left (example: KOReader)?

[Glenn Willey]

I recently switched over to KOReader as my epub reading app of choice and noticed a weird formatting issue when using its "left align most text" option (rather than keeping text justified) in Standard Ebook's books. Chapter titles (besides the numerals) as well as the Colophon in each book end up getting aligned to the left, which is unintended behavior. I've attached 2 screenshots from The Case of Charles Dexter Ward epub (link) showing this behavior.

I talked the issue over with some KOReader maintainers and it looks like this is happening because the default "left align most text" option KOReader uses is based on this CSS: body, p, li { text-align: left ! important; }

Apparently, it doesn't like that in Standard Ebook's books the Chapter titles and Colophon are contained within paragraph blocks (p). Potentially, is this something that could be changed so that text aligned to the left would display properly in KOReader and other apps that handle left text alignment this way? Please go simple on me in your explanations, I don't have a background in CSS/HTML and troubleshooting this cause of this has kind of been a crash course experience for me! 😅

In the meantime, it looks like I can force the text to display as intended by using the following custom CSS in KOReader (which removes the "p"): body, li { text-align: left ! important; }

[Alex Cabal]

Unfortunately not. According to the HTML spec, <hgroup> children must be
<p>, therefore we must use <p> for chapter titles.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#technical_summary

KOReader should therefore not apply `!important` alignment to `hgroup >
p` as any <p> that is a child of <hgroup> is defined as heading content.

The colophon is paragraph text, just formatted specially. Therefore <p>
is semantically correct.

On 12/11/24 12:46 PM, Glenn Willey wrote:
> I recently switched over to KOReader as my epub reading app of choice
> and noticed a weird formatting issue when using its "left align most
> text" option (rather than keeping text justified) in Standard Ebook's
> books. Chapter titles (besides the numerals) as well as the Colophon in
> each book end up getting aligned to the left, which is unintended
> behavior. I've attached 2 screenshots from The Case of Charles Dexter
> Ward epub (link

> <https://standardebooks.org/ebooks/h-p-lovecraft/the-case-of-charles-dexter-ward>) showing this behavior.

>
> I talked the issue over with some KOReader maintainers and it looks like
> this is happening because the default "left align most text" option

> KOReader uses is based on this CSS: *body, p, li { text-align: left !
> important; }*

>
> Apparently, it doesn't like that in Standard Ebook's books the Chapter

> titles and Colophon are contained within paragraph blocks (*p*).

> Potentially, is this something that could be changed so that text
> aligned to the left would display properly in KOReader and other apps
> that handle left text alignment this way? Please go simple on me in your
> explanations, I don't have a background in CSS/HTML and troubleshooting
> this cause of this has kind of been a crash course experience for me! 😅
>
> In the meantime, it looks like I can force the text to display as
> intended by using the following custom CSS in KOReader (which removes

> the "p"): *body, li { text-align: left ! important; }*
>
> --
> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit
> https://groups.google.com/d/msgid/standardebooks/e7609506-b324-458a-b80e-3a6350501076n%40googlegroups.com <https://groups.google.com/d/msgid/standardebooks/e7609506-b324-458a-b80e-3a6350501076n%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Glenn Willey]

Thank you, this helped put me on the right path!

Just in case anybody else runs into this issue, I fixed it for the time being with the following custom CSS in KOReader:

body, p, li { text-align: left ! important; }

hgroup p, section.epub-type-colophon p { text-align: center ! important; }

Alternatively, you can just use the second line of custom css and enable "left align most text" in settings.

[Glenn Willey]

Thank you for this info!

I discovered that KOReader actually has two selectable methods for rendering books. The default "traditional book look" rendering style was the one giving me issues; switching to the "HTML5 standard rendering" made the Standard Ebooks books render in beautiful way I am used to, so this issue is solved. 🙂

If one wants to justify the text in the HTML5 standard rendering, one can create custom css to do so; like you mentioned, it looks like they will just need to specify that `hgroup p` and `section.epub-type-colophon p` should be centered (and use the important tag). This also holds true if one wants to align text to the left in the "traditional book look" rendering style.

(looks like the last message I posted was deleted; I think the mailing list did so automatically because I accidentally included something code-related in it that it didn't like, but if it was manually deleted, I apologize!; just let me know why and I'll stop repeating myself!).

On Wednesday, December 11, 2024 at 1:50:31 PM UTC-5 Alex Cabal wrote:

[Alex Cabal]

You should consider sharing that with the KOreader maintainers. Their
original selector suggests they don't want to change heading content, so
`hgroup > p{ text-align: unset; }` (or whatever equivalent) might be
something desirable for them to add.

On 12/11/24 3:25 PM, Glenn Willey wrote:
> Thank you, this helped put me on the right path!
>
> Just in case anybody else runs into this issue, I fixed it for the time
> being with the following custom CSS in KOReader:
>

> *body, p, li { text-align: left ! important; }
>

> hgroup p, section.epub-type-colophon p { text-align: center ! important; }*

>
> Alternatively, you can just use the second line of custom css and enable
> "left align most text" in settings.
> On Wednesday, December 11, 2024 at 1:50:31 PM UTC-5 Alex Cabal wrote:
>
> Unfortunately not. According to the HTML spec, <hgroup> children
> must be
> <p>, therefore we must use <p> for chapter titles.

> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#technical_summary <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#technical_summary>

>
> KOReader should therefore not apply `!important` alignment to `hgroup >
> p` as any <p> that is a child of <hgroup> is defined as heading
> content.
>
> The colophon is paragraph text, just formatted specially. Therefore <p>
> is semantically correct.
>
> On 12/11/24 12:46 PM, Glenn Willey wrote:
> > I recently switched over to KOReader as my epub reading app of
> choice
> > and noticed a weird formatting issue when using its "left align most
> > text" option (rather than keeping text justified) in Standard
> Ebook's
> > books. Chapter titles (besides the numerals) as well as the
> Colophon in
> > each book end up getting aligned to the left, which is unintended
> > behavior. I've attached 2 screenshots from The Case of Charles
> Dexter
> > Ward epub (link
> >

> <https://standardebooks.org/ebooks/h-p-lovecraft/the-case-of-charles-dexter-ward <https://standardebooks.org/ebooks/h-p-lovecraft/the-case-of-charles-dexter-ward>>) showing this behavior.

> https://groups.google.com/d/msgid/standardebooks/e7609506-b324-458a-b80e-3a6350501076n%40googlegroups.com <https://groups.google.com/d/msgid/standardebooks/e7609506-b324-458a-b80e-3a6350501076n%40googlegroups.com> <https://groups.google.com/d/msgid/standardebooks/e7609506-b324-458a-b80e-3a6350501076n%40googlegroups.com?utm_medium=email&utm_source=footer <https://groups.google.com/d/msgid/standardebooks/e7609506-b324-458a-b80e-3a6350501076n%40googlegroups.com?utm_medium=email&utm_source=footer>>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "Standard Ebooks" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to standardebook...@googlegroups.com
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit

> https://groups.google.com/d/msgid/standardebooks/107d0307-0968-4050-8d0f-362ffbced348n%40googlegroups.com <https://groups.google.com/d/msgid/standardebooks/107d0307-0968-4050-8d0f-362ffbced348n%40googlegroups.com?utm_medium=email&utm_source=footer>.