Question for those who edit .CSS files

[icallaci]

Oh, that makes sense. I suspect I would feel the need to go back and make ALL of my books consistent, which is the last thing I need right now, lol.

Originally Posted by JSWolf

I didn't go back and redo all my eBooks when I changed how I do it. I just started using my new way of doing going forward.

[Mr_H_Poirot]

Created my first epub by copying and pasting text in from a very short pdf and then playing around. I did nick a style sheet from online and then tweaked it as I wanted

Only one issue. I have the number 1 in the middle of a bit of text in a bullet list (i.e. not the numbered bullet. But in the middle of the text). And it shows as 1 on the kobo and calibre viewer. But in thorium shows as Roman Numeral I. There's nothing in my css code that references the word 'roman'. I think it is because Thorium treats it as epub3 rather than epub2 maybe?

The code is

<li>text text text 1 part in 10¹⁶ text text text.</li>

and the 1 is a 1 on the kobo and calibre viewer, but I in Thorium

[JSWolf]

Can you please post your CSS in a code block? Then we can see if it could be something in your CSS.

[Mr_H_Poirot]

Thanks. It is below. I should say it is a bit of a mis-mash as I found a basic boilerplate one online and then I tweaked it

--

Spoiler:

body {
font-family: "Source Sans Pro", serif;
font-size: 1em;
font-weight: 300;
line-height: 140%;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 120%;
page-break-after: avoid;
text-align: left;
}
h1 {
font-size: 2.5em;
max-width: 80%;
line-height: 100%;
}
h2 {
margin: 1.5em 0 0.5em 0;
padding-top: 0.5em;
}
h3 {
margin: 1.5em 0 0.5em 0;
padding-top: 0.5em;
}

/* Paragraphs and related */

p, ul, ol, blockquote, dl {
max-width: 40em;
}
p {
margin: 0;
text-indent: 1.5em;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}

/* Class for the first paragraph (no indent) */
p.no-indent {
text-indent: 0;
}

p.titlepageauthor {
text-indent: 0;
font-size: 2em;
}

sup {
vertical-align: super;
font-size: 0.8em;
line-height: 0;
}
li p { /* a paragraph inside a list item */
margin: 0;
}

/* Blockquotes */
blockquote {
margin: 0.5em 0 0.5em 0;
padding: 0.5em 1em 0.5em 1em;
font-size: 1em;
line-height: 120%;
border-left: 5px solid #ddd;
max-width: 20em;
}
blockquote p { /* a paragraph inside a blockquote */
margin: 0;
padding: 0;
}
li blockquote { /* a list item inside a blockquote
*/
margin: 1em 0;
}

/* Definition lists, which I use for side-notes */

dl {
color: #666;
border: 1px solid grey;
padding: 1em;
}
dt {
margin: 0 0 0.25em 0;
font-weight: 600;
}
dd {
}

/* Tables */

table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 0.5em;
}

/* Code text */

pre, code {
font-family: "Source Code Pro", monospace;
white-space: pre-wrap;
background-color: #f9f9f9;
padding: 0.1em 0.3em;
border-radius: 0.2em;
font-weight: 200;
font-size: 0.9em;
}

/* Links */

a {
text-decoration: none;
color: #5f738c;
}

/*
* Title page
*/

.titlepage-title {
font-size: 2.5em;
font-weight: 700;
margin: 20% 0 0 0;
line-height: 100%;
}
.titlepage-subtitle {
font-size: 2.5em;
font-weight: 400;
margin: 0 0 1em 0;
line-height: 100%;
}
.titlepage-author {
font-size: 1.5em;
margin: 0 0 2em 0;
}
.titlepage-logo {
width: 100px;
}

/*
* Copyright page
*/

.copyright-logo {
width: 100px;
margin: 1em 0;
}

/*
* Table of contents
*/

.toc h2 {
font-weight: 400;
font-size: 1.25em;
margin: 1em 0 0.5em 0;
}
.toc ol {
margin: 0;
padding: 0;
}
.toc ul {
list-style-type: none;
margin: 0 0 1em 0;
padding: 0;
}
.toc li {
margin: 0 0 0.5em 0;
}
.toc a {
text-decoration: none;
}

[Mr_H_Poirot]

I am wondering if it is Thorium's style sheet reading it for some reason? TBH, I don't use Thorium much anymore so I could just use a different e-reader viewer on my pc

[theducks]

I supect Thorium does not have access to your body font and is substituting on where the number 1 looks like an I. AFAIK style sheets do not change the actual character.
Try embedding the desired font

[JSWolf]

Originally Posted by Mr_H_Poirot

Thanks. It is below. I should say it is a bit of a mis-mash as I found a basic boilerplate one online and then I tweaked it

--

Spoiler:

body {
font-family: "Source Sans Pro", serif;
font-size: 1em;
font-weight: 300;
line-height: 140%;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 120%;
page-break-after: avoid;
text-align: left;
}
h1 {
font-size: 2.5em;
max-width: 80%;
line-height: 100%;
}
h2 {
margin: 1.5em 0 0.5em 0;
padding-top: 0.5em;
}
h3 {
margin: 1.5em 0 0.5em 0;
padding-top: 0.5em;
}

/* Paragraphs and related */

p, ul, ol, blockquote, dl {
max-width: 40em;
}
p {
margin: 0;
text-indent: 1.5em;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}

/* Class for the first paragraph (no indent) */
p.no-indent {
text-indent: 0;
}

p.titlepageauthor {
text-indent: 0;
font-size: 2em;
}

sup {
vertical-align: super;
font-size: 0.8em;
line-height: 0;
}
li p { /* a paragraph inside a list item */
margin: 0;
}

/* Blockquotes */
blockquote {
margin: 0.5em 0 0.5em 0;
padding: 0.5em 1em 0.5em 1em;
font-size: 1em;
line-height: 120%;
border-left: 5px solid #ddd;
max-width: 20em;
}
blockquote p { /* a paragraph inside a blockquote */
margin: 0;
padding: 0;
}
li blockquote { /* a list item inside a blockquote
*/
margin: 1em 0;
}

/* Definition lists, which I use for side-notes */

dl {
color: #666;
border: 1px solid grey;
padding: 1em;
}
dt {
margin: 0 0 0.25em 0;
font-weight: 600;
}
dd {
}

/* Tables */

table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 0.5em;
}

/* Code text */

pre, code {
font-family: "Source Code Pro", monospace;
white-space: pre-wrap;
background-color: #f9f9f9;
padding: 0.1em 0.3em;
border-radius: 0.2em;
font-weight: 200;
font-size: 0.9em;
}

/* Links */

a {
text-decoration: none;
color: #5f738c;
}

/*
* Title page
*/

.titlepage-title {
font-size: 2.5em;
font-weight: 700;
margin: 20% 0 0 0;
line-height: 100%;
}
.titlepage-subtitle {
font-size: 2.5em;
font-weight: 400;
margin: 0 0 1em 0;
line-height: 100%;
}
.titlepage-author {
font-size: 1.5em;
margin: 0 0 2em 0;
}
.titlepage-logo {
width: 100px;
}

/*
* Copyright page
*/

.copyright-logo {
width: 100px;
margin: 1em 0;
}

/*
* Table of contents
*/

.toc h2 {
font-weight: 400;
font-size: 1.25em;
margin: 1em 0 0.5em 0;
}
.toc ol {
margin: 0;
padding: 0;
}
.toc ul {
list-style-type: none;
margin: 0 0 1em 0;
padding: 0;
}
.toc li {
margin: 0 0 0.5em 0;
}
.toc a {
text-decoration: none;
}

That CSS is a bit of a mess. It could use some real cleaning up.

What you need is to know what you want and edit the element or class to do what it is you want.

[Mr_H_Poirot]

I agree Jon. As it was the first time I'd done anything like this, I found a CSS online and copied it so I had something to work from

I think what I may do is delete all the bits I don't need and then also format and structure it properly. I can then save it as a template for future

[JSWolf]

Originally Posted by Mr_H_Poirot

I agree Jon. As it was the first time I'd done anything like this, I found a CSS online and copied it so I had something to work from

I think what I may do is delete all the bits I don't need and then also format and structure it properly. I can then save it as a template for future

calibre has a feature to remove unused classes from the CSS and HTML. Sigil has a plugin to do the same thing.

[Mr_H_Poirot]

Will have a look for the sigil plugins

[Jaws]

Originally Posted by theducks

I supect Thorium does not have access to your body font and is substituting on where the number 1 looks like an I. AFAIK style sheets do not change the actual character.
Try embedding the desired font

I have not tried Thorium, but three other free read-epubs-on-a-Windows-device programs have trouble with "just" embedded fonts, and seem to work better by pretending (when doing the embedding) that the epub is for an Apple. There's an extra file that has to be inserted to make Apple's native readers fully recognize an embedded font; I'm away from the machine that has a sample of it (you can find it in a lot of commercial epubs, too, and adapt it easily). Whether it should be this way is for others to argue over, I just shrug my shoulders and do it.

So don't give up if just embedding the fonts doesn't make Thorium behave the way you want.

[theducks]

Remember that EPUB files are 100% case sensitive.

[Mr_H_Poirot]

I gave up on Thorium and installed a different e-reader on my windows pc.

Although Jon has helped me in DMs and I have cleaned up a fair bit of my code on my stylesheet including removing the font family and a bunch of other stuff entirely (My code is still not as minimalist as Jon would advise but it is a lot cleaner. So thanks Jon)

[JSWolf]

Originally Posted by Jaws

I have not tried Thorium, but three other free read-epubs-on-a-Windows-device programs have trouble with "just" embedded fonts, and seem to work better by pretending (when doing the embedding) that the epub is for an Apple. There's an extra file that has to be inserted to make Apple's native readers fully recognize an embedded font; I'm away from the machine that has a sample of it (you can find it in a lot of commercial epubs, too, and adapt it easily). Whether it should be this way is for others to argue over, I just shrug my shoulders and do it.

So don't give up if just embedding the fonts doesn't make Thorium behave the way you want.

You don't need that file Apple requires for embedded fonts. There's a way to do it in the OPF. I cannot tell you what it is. Thorium doesn't need any of the code Apple Books needs to handle embedded fonts.

I've not heard of any program other then Books that need extra code to allow embedded fonts.

[Mr_H_Poirot]

Aquile reader was the reader I installed on Windows 11. Very nice. I don't actually use the pc very often to read books. It's usually only when I have a reference book (e.g. chess openings) and I have that on one half of the screen and a chess board on the other half