01-31-2024, 11:24 AM | #16 | |
Resident Curmudgeon
Posts: 76,310
Karma: 136006010
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Due to a bug in Modify ePub, your CSS section break graphic will be deleted if anyone uses the option to remove excess graphics. Modify ePub does not take into account graphics in CSS so any in CSS will get deleted. So you would have to put the <img> code in every section break. Also, for accessibility, the code has to be <hr.transition/>. Last edited by JSWolf; 01-31-2024 at 11:27 AM. |
|
01-31-2024, 11:31 AM | #17 | |
A Hairy Wizard
Posts: 3,219
Karma: 19000635
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
According to Accessible Publishing Knowledge Base it says <hr/> is used for accessibility, and then it gives examples using <hr class="transition">. I didn't see anywhere where using that particular class was required. Maybe I missed it. Do you know where it says you must use class="transition"?? I checked my code with an online accessibility checker and it says there is nothing wrong with it. Also, the html5 standard doesn't use a class at all. There's obviously nothing wrong with using 'transition', but I was just wondering if it is required. Last edited by Turtle91; 01-31-2024 at 12:08 PM. |
|
Advert | |
|
01-31-2024, 11:36 AM | #18 | |
A Hairy Wizard
Posts: 3,219
Karma: 19000635
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
|
|
01-31-2024, 12:52 PM | #19 | |
Evangelist
Posts: 457
Karma: 7897546
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Quote:
My take is that "bare" elements should have all properties set to the default value as defined by the CSS standard. In other words, a normal "CSS reset". I have seen EPUBs styled with a "bare" div being set as essentially a block quote: Code:
div { margin-left: 2em; margin-right: 2em; margin-top: 1em; margin-bottom: 1em; font-size: 0.9em; } |
|
01-31-2024, 12:59 PM | #20 | |
Grand Sorcerer
Posts: 5,517
Karma: 100606001
Join Date: Apr 2011
Device: pb360
|
Quote:
In my opinion as a reader of ebooks, I think specifying "normal paragraph" text alignment, font weight and size is just as wrong as not using semantic tags where appropriate and such details should be left to the rendering software / end user partnership, with the rendering software giving high weight to end user preferences. (JSWolf's "... all have to go. They are excess code" comment was in the context of a "normal paragraph". I have also experienced the large first letter problems he describes on kindles. In addition, they play havoc with word search reseults.) |
|
Advert | |
|
01-31-2024, 01:04 PM | #21 |
Grand Sorcerer
Posts: 5,517
Karma: 100606001
Join Date: Apr 2011
Device: pb360
|
|
01-31-2024, 01:44 PM | #22 |
A Hairy Wizard
Posts: 3,219
Karma: 19000635
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Hmmm…. I think I’m just going to say “yadda, yadda” whenever I put up example code…
Again, the intent of the example was for showing the differences between inline styling, classes on everything, and basic tags with classes only on special cases. Y’all can certainly code however you want to! lol As for having to override the bare tag settings when you have special classes… umm, yeah… that’s what you are supposed to do. When you have a special class, then that class is listed after/below the basic tag so you take advantage of cascading style. Can you miss something, sure, I’ve missed a bunch of things over the years. That doesn’t change the idea of setting a base tag with your 98.7% solution. Real, the problem is, with nested div/font-size shrinking. So, be aware of it when coding. I rarely use a nested div… when I do, I don’t set the font size in the parent div… it really shouldn’t be there in the first place. I will set a default <div> with styling of the div (basic margins, borders, corners, colors, etc.), but then all the other, non div specific, styling goes in the child tags. The large first letter word search problem is because people use a work-around to compensate for inadequate devices/apps. They use <span>s around the first letter to enable styling it differently. I don’t use that work-around. I use css to style the first letter that way there is no issue with word search or spelling corrections. Yes, I know some older devices are incapable of using current technology… that’s why I said it was possible ‘in some circumstances’ and that they needed to test on their target devices/apps to see if it works. If not, then use fall-back coding. The simple coding I use for drop-caps or large-first-letter is: Code:
HTML: <p class="first">This is the first paragraph in the chapter.</p> CSS: p.first {yadda yadda yadda} p.first:first-line {yadda yadda small-caps yadda} p.first:first-letter {yadda yadda large letter or drop cap yadda} Last edited by Turtle91; 01-31-2024 at 01:52 PM. |
01-31-2024, 01:56 PM | #23 | |||||||
Evangelist
Posts: 457
Karma: 7897546
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
You gave lots of styling opinions. For example, you don't like a line-height greater than 1.1, yet many people find that too tight. This results in your "never use line-height", which is wrong.
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
|
|||||||
01-31-2024, 02:03 PM | #24 | |
Resident Curmudgeon
Posts: 76,310
Karma: 136006010
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, 02:08 PM | #25 |
Evangelist
Posts: 457
Karma: 7897546
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
|
01-31-2024, 02:17 PM | #26 | |
Resident Curmudgeon
Posts: 76,310
Karma: 136006010
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
I use a left/right margin of 1.5em for <blockquote> and I have another class called .blockquote for when a <blockquote> may be the last bit in the chapter so the margin does not maybe run into the next page and cause a blank page. The bottom margin is set to 0. This is what I use for a naked <p>. Code:
p { margin-top: 0; margin-bottom: 0; widows: 1; orphans: 1; text-indent: 1.2em; } I prefer no class in most cases where possible except <div> where I think it should have a class to differentiate a <div> I can dump. For chapter headers, this is what I prefer... <h2>Chapter 01</h2>. Last edited by JSWolf; 01-31-2024 at 02:20 PM. |
|
01-31-2024, 02:27 PM | #27 | |
Resident Curmudgeon
Posts: 76,310
Karma: 136006010
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Yes, my comment about the CSS code that should go is in terms of a normal paragraph. I find a lot of CSS has extra code and when I edit an eBook, I'll remove the extra code. |
|
01-31-2024, 02:30 PM | #28 | |
Resident Curmudgeon
Posts: 76,310
Karma: 136006010
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Can you create code for a large first letter that works with a Kindle so the first line of the paragraph has the same height? Last edited by JSWolf; 01-31-2024 at 02:37 PM. |
|
01-31-2024, 02:41 PM | #29 | |
A Hairy Wizard
Posts: 3,219
Karma: 19000635
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
Yes, I can, and do. I’ll take a screen shot and post it when I get home. Edit: Looks like you changed your comment while I was writing mine . You had said that code was only good for ePub3, which is not true. We’ve had this discussion before where you think pseudo-selectors are only ePub3, they are not. Also, here is a screenshot from my phone. I used the above code, ePub2, and have a large first letter, small-caps for the first line - all with no spans or forced uppercase. Edit-Edit: I'm not sure what the MR rules are about an excerpt from a copyright book. The copyright notice in the book says brief quotes are allowed for book reviews. So, I'll put a quick review here if anyone is interested. Spoiler:
Last edited by Turtle91; 01-31-2024 at 04:11 PM. |
|
01-31-2024, 03:07 PM | #30 | ||||||||
Resident Curmudgeon
Posts: 76,310
Karma: 136006010
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
|
||||||||
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 |