01-31-2024, 03:21 PM | #31 | |
Resident Curmudgeon
Posts: 74,608
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
01-31-2024, 03:32 PM | #32 | |
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
Sheesh - I feel like a broken record sometimes... ...and there I go dating myself. A record is a ...nvm just look it up here: |
|
01-31-2024, 03:58 PM | #33 | |
Resident Curmudgeon
Posts: 74,608
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
01-31-2024, 04:22 PM | #34 | |
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
Just remember, fall-back code is for use when the primary code doesn't work...it's a fall-back position. Put the code you want to use in there...then, if there is a chance it won't work, the fall-back code is the safety net. Last edited by Turtle91; 01-31-2024 at 04:25 PM. |
|
02-01-2024, 12:23 PM | #35 | ||
Zealot
Posts: 131
Karma: 9236
Join Date: Jun 2020
Device: Kindle PW3 [KOReader]
|
Quote:
I changed the p classes tags to <p>,<h1>-<h3>, it’s much cleaner now There is one thing I was wondering about - new chapter pages, which are styled like this: 1. Chapter Title 2. Chapter Title Saying I want to keep the number and the dot, which are styled differently (in terms of size, margins and font type) than the Chapter Title, how should that be tagged semantically? Should it also be an <h1 class="chapter-number"> with different properties? Before that, I thought about making it <h4> Quote:
I don’t see how one could forget about the toc.ncx, but I guess it’s happened since you mention it I’m in Eastern Europe and this books are mainly produced for the local market -- online ebooks stores, Scribd-like "ebook streaming" services with rather primitive ereader apps; they may end up on Google Play Books or even Amazon, but that’s not their main destination. In any case, I will try to tackle accessibility, but I'll just run them through DAISY Consortium’s Ace and fix each issue as it comes up, hopefully I’ll learn something new in the process. I was under a deadline to produce these epubs, and the publisher has seen them, but they’re not to be actually published yet, so I still have some time to tinker with them. Thank you! |
||
02-01-2024, 12:47 PM | #36 | ||||
Evangelist
Posts: 419
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Margins only apply to block elements. You can't change the distance between lines of a single block using a margin.
And, accessibility says that you should not split what is logically a single block into multiple blocks. So, sometimes you have to adjust line-height for that block. Quote:
Quote:
Quote:
Quote:
Percent will always leave the same relative space on the screen, so that 10% will always be 1/10th of the height/width of the screen. This is how physical books have always done it...margins on paperbacks are smaller in absolute width than on a hardback, but are almost exactly the same percentage of the page. |
||||
02-01-2024, 01:05 PM | #37 | |
Evangelist
Posts: 419
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Quote:
Code:
<style> .chapter-number { font-size: 2em; font-weight: bold; text-align: center; } .chapter-name { font-size: 1.2em; text-align: center; } </style> <h1 class="chapter-number" title="1. The First Chapter">1.</h1> <p class="chapter-name">The First Chapter</p>
I've also seen multi-line chapter headings done another way, but I don't like it as much: Code:
<style> .chapter { text-align: center; } .chapter-number { font-size: 2em; font-weight: bold; } .chapter-name { font-size: 1.2em; } </style> <h1 class="chapter" title="1. The First Chapter"><span class="chapter-number">1.</span><br /> <span class="chapter-name">The First Chapter</span></h1> |
|
02-01-2024, 01:47 PM | #38 | ||||||
Resident Curmudgeon
Posts: 74,608
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
HTML Code:
<h2>Chapter</h2> <h2 class="ch">One</h2> Code:
h2 { text-align: center; text-indent: 0; margin-top: 0.8em; margin-bottom: 0; } .ch { text-align: center; text-indent: 0; margin-top: 0.2em; margin-bottom: 0.8em; } Quote:
[quote]That's because using line-height: 1; means "use the default line height for this inline element when computing the line height of the entire line". The correct line height to use is (1 / font-size). So, if the initial cap is 3em, then use a line-height of 0.33. For inline elements that use the same or smaller font size as the base text (like a superscript), line-height: 1; will work.[/quote For a large first letter, a line height of 0 works. No need to have to figure anything out. This works for ePub. But on a Kindle, you cannot use a line height as small as you are saying as it won't work. That's the problem. Quote:
Quote:
Quote:
Quote:
|
||||||
02-01-2024, 02:40 PM | #39 | |
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
I agree with much of nabsltd’s reasoning and answer, although I use a slightly different technique. I’ll put the basics here and provide a better example when I get home on my computer. Code:
CSS: h3 {yadda yadda} h3 span {display:block; yadda yadda} HTML: <h3>1. <span>Chapter One Title</span></h3> <h3>2. <span>Chapter Two Title</span></h3> <h3>3. <span>Chapter Three Title</span></h3> There is no need to use a class in the heading because the css can positively identify each part without it. I used an <h3> here because that is generally how my book levels work out, you could use any <h>: Code:
h1 - cover h2 - front matter h3 - chapters h2 - back matter h1 - back cover if there is one |
|
02-01-2024, 02:47 PM | #40 |
Zealot
Posts: 131
Karma: 9236
Join Date: Jun 2020
Device: Kindle PW3 [KOReader]
|
Thank you all for your replies! I understand your reasoning, especially if the TOC gets generated at the end, but keeping in mind my case -- I already have the TOC generated from InDesign, what would be wrong about using this? Wouldn’t it be semantically correct? I though I was just getting the hang of this
Code:
h1 { font-family:"Font1", sans-serif; font-size:2em; font-style:normal; font-weight:normal; border-width:0; margin-bottom:5%; margin-left:0; margin-right:0; margin-top:10%; text-align:center; text-indent:0; padding:0; } h1.chapter-no { font-family:"Font2", serif; font-size:1em; margin-bottom:0; margin-top:5%; } ------------------ <h1 class="chapter-no">1.</h1> <h1 id="_idParaDest-3"><a id="_idTextAnchor005"></a>>Chapter Title</h1> Last edited by paperwhite13; 02-01-2024 at 02:52 PM. Reason: code |
02-01-2024, 02:54 PM | #41 |
Wizard
Posts: 1,164
Karma: 4917718
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Not sure if you noticed, but you have one too many > in this line...
PHP Code:
|
02-01-2024, 02:56 PM | #42 |
Zealot
Posts: 131
Karma: 9236
Join Date: Jun 2020
Device: Kindle PW3 [KOReader]
|
Sorry, it’s not copied straight out of the epub, must've happened when I copied back the id’s after initially cutting them, for simplicity’s sake.
|
02-01-2024, 05:26 PM | #43 | |
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
In your case it would see two <h1>s in a row. Depending on your target market you may not see any problem at all…. Or it could look kinda ugly. |
|
02-01-2024, 05:40 PM | #44 | |
Wizard
Posts: 1,164
Karma: 4917718
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Quote:
PHP Code:
PHP Code:
Sometimes I will use the title tag to incorporate the chapter name with the chapter number in the TOC, but I didn't think it was necessary in this case, plus it would be too long for the TOC and make it wrap. And the styling is easy to change with each book. (note the enlarged first letter ) |
|
02-01-2024, 05:41 PM | #45 | |
Zealot
Posts: 131
Karma: 9236
Join Date: Jun 2020
Device: Kindle PW3 [KOReader]
|
Quote:
But other than that, would it be semantically correct to tag them as I did previously? |
|
Tags |
indesign, sigil |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Any Addons that aid in Library Cleanup and/or metadata repair/cleanup? | Meido | Calibre | 2 | 01-17-2018 03:49 AM |
Adobe InDesign and poor code | JSWolf | ePub | 15 | 01-18-2017 01:02 PM |
HTML cleanup on epub conversion | Lofwyr23 | Conversion | 4 | 06-06-2014 04:56 PM |
EPUB Expert Needed: Cant properly export epub from InDesign | crottmann | ePub | 17 | 08-27-2010 10:23 AM |
InDesign and epub | FredD | ePub | 2 | 04-13-2009 08:38 PM |