Libra 2 CSS being ignored -- looking for workaround

[Phssthpok]

I have a book containing tables containing rows that have this rule:

tr {
  vertical-align: top;
}

They look OK on other platforms, but show up as middle-aligned on my Libra II. It seems that it is ignoring the CSS and using the default.

Similarly, I have another book with inline tables subject to the following rules:

table {
  display: inline-table;
  vertical-align: middle;
}

Again, the vertical-align rule is ignored, and the table is top-aligned with the surrounding text.

Can anyone suggest a workaround to allow me to fix these alignment issues?

[enuddleyarbl]

I don't know what you're using to edit the books. But in Calibre's Editor, you can use the Live CSS tab in the File Preview pane (at least, that's where it is on my system) to see what might be overriding your CSS:

https://manual.calibre-ebook.com/edi...live-css-panel

Hopefully, that'll give you a starting point to figure out what's happening.

[Phssthpok]

It seems the problem is down to the rendering engine used for EPUBs. It seems to ignore vertical-align rules for table elements. If I convert to KEPUB, it works fine.

However, the displayed font size is now about half what it was when the book was an EPUB, too small to read. If I change the font size so it's readable, EPUBs come out as "font-size: bloody-enormous". Is there a way to set display defaults for KEPUBs separately for those used for EPUBs? Or do I have to convert all my books (8700+) from EPUB to KEPUB and re-upload them all? Or (plan B) find all the books affected by this problem (a dozen or so) and add "body { font-size: 2em }" to each of them...

[Phssthpok]

Originally Posted by enuddleyarbl

I don't know what you're using to edit the books. But in Calibre's Editor, you can use the Live CSS tab in the File Preview pane (at least, that's where it is on my system) to see what might be overriding your CSS:

https://manual.calibre-ebook.com/edi...live-css-panel

Hopefully, that'll give you a starting point to figure out what's happening.

I'm using Calibre, and everything shows up fine in the editor preview pane, the calibre viewer, and every other platform I've tried. The only styles being applied are those I listed.

[DNSB]

There is a patch called Unify Font sizes which makes the font size come close to matching between the two renderers. I would also suggest the My 10 Line Spacing Value patch which allows matching the line height for kepubs closer to the one use for epubs.

The Kepub rendering engine is ePub3 and understands the ePub subset of CSS3 while the RMSDK rendering engine is ePub2 and supports very little CSS3.

[Phssthpok]

Originally Posted by DNSB

There is a patch called Unify Font sizes which makes the font size come close to matching between the two renderers. I would also suggest the My 10 Line Spacing Value patch which allows matching the line height for kepubs closer to the one use for epubs.

The Kepub rendering engine is ePub3 and understands the ePub subset of CSS3 while the RMSDK rendering engine is ePub2 and supports very little CSS3.

But vertical-align has been there since CSS1. Oh well.

I tried using Calibre's conversion dialog: in Look & Feel I unchecked "disable font size rescaling" and set "Font size key: 18.0" but it had no apparent effect.

Where can I find the patches you mentioned?

[DNSB]

Vertical align for tables was introduced in CSS2 but use of all the properties wasn't until CSS3. This allowed replacing the valign attribute according to my vague memories.

For firmware 4.38.23697, check the Patches for Firmware 4.38.23697 thread.

You can also check the KoboPatch WebUI: customization (NickelMenu, KOReader) and patching via your browser for an alternate approach to patching.

[Phssthpok]

Originally Posted by DNSB

Vertical align for tables was introduced in CSS2 but use of all the properties wasn't until CSS3. This allowed replacing the valign attribute according to my vague memories.

For firmware 4.38.23697, check the Patches for Firmware 4.38.23697 thread.

You can also check the KoboPatch WebUI: customization (NickelMenu, KOReader) and patching via your browser for an alternate approach to patching.

Ah, I'd forgotten about valign, it's been so long...

So now in addition to the CSS I have a valign attribute -- belt & braces. If the deprecated valign is ignored, the CSS vertical-align will do the job. And primitive renderers which ignore vertical-align in tables will be primitive enough to honor the valign attribute.

And lo, it works -- except that for the book with inline tables, adding valign=middle to the table element has no effect. Oh well, in that one case I'll have to convert to KEPUB and somehow fix the font size.

Thanks for the links!

[JSWolf]

Originally Posted by Phssthpok

I have a book containing tables containing rows that have this rule:

tr {
  vertical-align: top;
}

They look OK on other platforms, but show up as middle-aligned on my Libra II. It seems that it is ignoring the CSS and using the default.

Similarly, I have another book with inline tables subject to the following rules:

table {
  display: inline-table;
  vertical-align: middle;
}

Again, the vertical-align rule is ignored, and the table is top-aligned with the surrounding text.

Can anyone suggest a workaround to allow me to fix these alignment issues?

You want the code to be...

td {
  vertical-align: top;
}

I've tested it with ADE 2.0.1 so it should work with RMSDK on a Kobo.

[Phssthpok]

Originally Posted by JSWolf

You want the code to be...

td {
  vertical-align: top;
}

I've tested it with ADE 2.0.1 so it should work with RMSDK on a Kobo.

Aha. Yes, I solved it by adding valign=top to the <tr> elements, but I see that this should also work.

Meanwhile I'm banging my head against the inline-table problem. Converting to KEPUB requires me to insert body { font-size: 2em } when converting from EPUB, but then various other funnies show up: italicised text is also bold, and hyperlinks are underlined despite being styled with text-decoration: none. Editing the KEPUB with Calibre, it looks fine and everything has the stylings I specified, but the Kobo knows better! Aaaargh!

[JSWolf]

You need to install the patch that makes the font sizes the same for KePub and ePub.

[Phssthpok]

Originally Posted by JSWolf

You need to install the patch that makes the font sizes the same for KePub and ePub.

But will that stop italic text being boldened and links underlined despite my CSS rules?

[Phssthpok]

I solved my inline table problems by replacing the tables with spans having display: inline-block and a suitable vertical-align, then used block elements inside those for the table rows. So I can avoid using KEPUBs altogether, which saves me a lot of hassle.

[JSWolf]

Originally Posted by Phssthpok

But will that stop italic text being boldened and links underlined despite my CSS rules?

The patch to make KePub and ePub font sizes the same have nothing to do with CSS. It's to do with the system software being patched.

[Phssthpok]

Originally Posted by JSWolf

The pactch to make KePun and ePub font sizes the same have nothing to do with CSS. It's to do with the system software being patched.

What I thought. It seems KEPUBs fix some problems but then have a whole different set of issues, so I think I'm best off avoiding them. But thanks for all the advice and guidance.