CSS not being applied to ePub

[WV-Mike]

Greetings,
My CSS is not being applied to my ePub when I use the Android readers ReadEra and eBook.
When I view other eBooks in the same apps the CSS is applied.

When I use the Windows eBook reader FBReader and the Preview in Sigil the CSS is applied.

I have only two rules:

h1 {
font-variant: small-caps;
font-size: 1.5em;
font-family: 'Times New Roman',Times,serif;
text-align: center}

h2 {
font-variant: small-caps;
font-size: 1.2em;
font-family: 'Times New Roman',Times,serif;
text-align: center}

The eBook is here:
https://www.epicroadtrips.us/epub/
css_test.epub is a reduced version of the complete book fichtner_complete_pagina.epub

What am I missing?
Thanks,
WV-Mike

[RbnJrg]

Nothing wrong with your epub. The issue is that ReadEra is not the best app to read an epub; in fact, it doesn't honor the css styles inside an style sheet. You have to define your own styles "on the fly" in the very app. There, you must define the font you want, its size, the alignment of paragraphs, their line-height, the margins of the page. And that's all; you can't define anything more.

You'll have better by choosing any other app to read your epub: PocketBoot, Aldiko Next, Lithium, Reasily, Gitden Reader (if you can find it), Bluefire, OverDrive. And if your epub doesn't have some very advanced epub3 properties, you also will be able to read your ebook in BookFusion and Colibrio Reader. Even Infinity Reader will honor so simple css stylesheet like yours. Of course, you have set "Times New Roman" or Times as fonts; if your smartphone doesn't have them, the ereader app won't be able to show them

[WV-Mike]

Greetings,
Thanks very much for this information.
I installed PocketBook and the fonts display as I defined in the stylesheet. I am hoping this is a function of the reader and not because the font is installed on my phone.
If the latter is the case, then I guess I would need to embed the font in the ePub or change to the Android system fonts so any 'Droid user would see the correct font.

PocketBook seems quite flexible compared to ReadEra and I appreciate you pointing me in that direction.
This is all very new to me and interesting and fun.
WV-Mike
=====

Originally Posted by RbnJrg

Nothing wrong with your epub. The issue is that ReadEra is not the best app to read an epub; in fact, it doesn't honor the css styles inside an style sheet. You have to define your own styles "on the fly" in the very app. There, you must define the font you want, its size, the alignment of paragraphs, their line-height, the margins of the page. And that's all; you can't define anything more.

You'll have better by choosing any other app to read your epub: PocketBoot, Aldiko Next, Lithium, Reasily, Gitden Reader (if you can find it), Bluefire, OverDrive. And if your epub doesn't have some very advanced epub3 properties, you also will be able to read your ebook in BookFusion and Colibrio Reader. Even Infinity Reader will honor so simple css stylesheet like yours. Of course, you have set "Times New Roman" ot Times as fonts; if your smartphone doesn't have them, the ereader app won't be able to show them

[Quoth]

PocketBoot, Aldiko (any version), Lithium, and Bluefire all respect CSS. Very many apps are essentially nearly rubbish and variously ignore most or all CSS and many even only use the fonts in the App, or on the device, but never the publisher supplied ones. Many apps let you over-ride various CSS or publisher fonts, but that is optional as it should be on all decent apps.

I like Lithium as it can use eBooks on SD Card without "importing" them, so Calibre integration when updating revised versions is better. Pocketbook does TTS well and is fine if you aren't updating texts as it imports (as does Bluefire and maybe Aldiko Basic which I've had on ancient phones).

You do need to embed fonts for a random user to see them unless they are stock Android fonts, but then they likely won't be on a Sony, Kindle, Nook, Kobo, iOS etc.

[RbnJrg]

Originally Posted by WV-Mike

I installed PocketBook and the fonts display as I defined in the stylesheet. I am hoping this is a function of the reader and not because the font is installed on my phone.

PocketBook will show fonts that are installed. Tap in the center of the screen of your phone and in the menu (on bottom) that appears, choose the first option (Aa); there you'll see all the fonts you can use to read your ebook.

If the latter is the case, then I guess I would need to embed the font in the ePub or change to the Android system fonts so any 'Droid user would see the correct font.

When you installed PocketBook, it was created a folder "Fonts"; there you can copy all the fonts (.ttf) you want and PocketBook will use them.

PocketBook seems quite flexible compared to ReadEra and I appreciate you pointing me in that direction. This is all very new to me and interesting and fun.

Indeed, PocketBook is a fine reader (with two rendering engines, webkit and RMSDK) that will honor your css stylesheets. And welcome to this forum

[WV-Mike]

Greetings, all.

I used some of the CSS and the font Fontin-SmallCaps.otf from the Sigil_User_Guide_2022.05.17.epub and it seems to be working - at least on my Motorola phone and my ancient Samsung tablet.
Here is the new version:
https://www.EpicRoadTrips.us/epub/re...ont_copy.epub/

My main interest is not so much trying to get the ePubs to look "right" for me but for other users. I realize this is not going to work for everyone on every device using any reader. If only!

A good example is the new version does not display the font using FBReader on Windows.

Thanks to all for the help with this.
WV-Mike

[RbnJrg]

Originally Posted by WV-Mike

My main interest is not so much trying to get the ePubs to look "right" for me but for other users. I realize this is not going to work for everyone on every device using any reader.

I tested your new version with Lithium, Reasily, Aldiko, Book Fusion, Colibrio, Infinity Reader and OverDrive and only in OverDrive your Fontin font is not honored.

[WV-Mike]

Originally Posted by RbnJrg

I tested your new version with Lithium, Reasily, Aldiko, Book Fusion, Colibrio, Infinity Reader and OverDrive and only in OverDrive your Fontin font is not honored.

Thank you very much!
WV-Mike