![]() |
#1 |
Zealot
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 131
Karma: 9236
Join Date: Jun 2020
Device: Kindle PW3 [KOReader]
|
InDesign epub code cleanup
Hello, I’m a fairly experienced typesetter working in InDesign and I've recently been asked to begin producing epubs. Is there a guide somewhere about cleaning up InDesign code? For instance, I’ve seen people saying nested divs are bad, but I don’t exactly know why and what I should do about it. I got a couple of more questions, but I’ll wait to see if there isn’t such a guide first that already answers them. Thank you!
|
![]() |
![]() |
![]() |
#2 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
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
|
Here is the Adobe help page for exporting to ePub.
As for a guide on how to cleanup what it produces… I’m not aware of one other than the various examples people use here. I’d search the threads for any specific question and then ask if you can’t find it. There are some online tools that claim to do the job automagically… beware, here there be dragons… some may work fine, others could leave you with just as big of a mess as you had to begin with. Also, be aware that you lose all control of your document whenever you upload it to the web…who knows what gets done with it?? That may be an issue if you are working with copyrighted material. In general, you want to use correct semantic markup and keep it as simple as possible. - Use a paragraph, <p>…</p>, to denote a paragraph… not a <div>. - Use a header, <h1-6>…</h1-6>, to denote headers… not a paragraph or div. - Do NOT use a header <h> just to make a section bold or centered. - Do NOT use a class to denote the style of a standard paragraph… that should be done in the stylesheet. Eg. Use <p>, not <p class="normalpara"> - Use <em> or <i> to denote emphasized or italic text (there IS a difference) not <span class="italic">; same with <strong> and <b>. You can use find/replace to cleanup most of that fairly easily. For example: Find: <div class="para">(.*?)</div> Replace: <p>\1</p> There are plenty of techniques people use. I imagine you will get lots of (differing?) advice here. Just try and differentiate when someone is giving a styling preference vs. when they are giving a best practice. Keeping the styles simple, and the html clean, makes the book much more likely to display properly in the widest number of devices/apps. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
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
|
To specifically address the nested <div>s question:
There is nothing technically wrong with using nested <div>s. The book will pass inspection and display properly. The issue is using tags that are not semantically correct. Some parsers rely on the correct tags to work - the parser can't tell the difference between <div> and <div class="header">... For example, some accessibility software wouldn't be able to do it's job properly if it can't tell the difference between a header and a div. When editing your code, especially if you plan on doing a lot of it, it makes it much easier if you don't have to mentally parse what the heck is going on. With simple html you can just see the blond, brunette, red-head. Spoiler:
Using CSS, both of the options below can display identically, but which would you rather see (and have the renderer crunch through): Code:
<div class="blockquote"> <div style="margin:0.86% 0.00% 0.00%; text-indent:1.7em; line-height:131%; font-size:1.0rem"> <span style=" font-size:1.0rem">Roses are red,</span></p> <div style="margin:0.86% 0.00% 0.00%; text-indent:1.7em; line-height:131%; font-size:1.0rem"> <span style=" font-size:1.0rem">Violets are blue,</span></p> <div style="margin:0.86% 0.00% 0.00%; text-indent:1.7em; line-height:131%; font-size:1.0rem"> <span style=" font-size:1.0rem">This HTML <span class="italic">sucks</span>,</span></p> <div style="margin:0.86% 0.00% 0.00%; text-indent:1.7em; line-height:131%; font-size:1.0rem"> <span style=" font-size:1.0rem">So…what can you do?</span></p> </div> Code:
<div class="poem"> <p>Roses are red,</p> <p>Violets are blue,</p> <p>This HTML <em>sucks</em>,</p> <p>So…what can you do?</p> </div> Last edited by Turtle91; 01-30-2024 at 12:31 PM. |
![]() |
![]() |
![]() |
#4 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
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
|
Sorry...I had to maker another post so that I could get to my 3000 posts!! It was really annoying me saying 2999...
![]() ![]() ![]() |
![]() |
![]() |
![]() |
#5 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,663
Karma: 134319570
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
That should be enough for now. |
|
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
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:
Legend red = opinion blue = ok to do under certain circumstances green = best practice - chapter header size can be whatever you want to express the style you are trying to achieve...just remember that a lot of people read on small screen sizes (phones) and you may have an unwanted display if your chapter header takes up the whole screen...or worse, only has on line of textr at the bottom. - in general, don't set left/right margines and/or line-height for the entire book...it is certainly ok to use them for small sections of text. - you can certainly use a large first letter/dropcap if that is what you need stylistically for that book. Just make sure you test on your target devices/apps to make sure they support it, or, better yet, have fall-back coding (media-queries) to cover the devices that don't look so good. - I mostly agree with having some kind of fleuron as a section break rather than blank space. With a reflowable ePub you just don't know where the space will appear. If it's at the bottom, or top, of the screen the reader may not know that a section break has occured without a fleuron. A fixed format ePub doesn't have that concern. - use a <blockquote> to surround a block-quote (semantically correct). A <div> is used for a generic section of text that does not have a more semantically correct tag to use. - you certainly can make offset text smaller, especially if you are using a font that is larger by default. Again, remember some users use small screens to read, so don't go crazy with the change in font size. - you most certainly CAN use embedded fonts, but, again, realize some devices may not support it. Test for your target market and provide fall-back coding if there is a chance it could be read on devices that don't support embedded fonts. - I concur about the copyright page, but that is more of an annoyance than anything...it's not as if anyone actually READS the copyright page ![]() 10 9 8 7 6 5 4 3 2 1 Cheers! |
|
![]() |
![]() |
![]() |
#7 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,283
Karma: 6700678
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Quote:
That Printer's key, I thought that was the Release number or print run. So if the "1" is visible, then the pbook is the first release / edition / print run; "2" is the second print run etc. Is that not the case? And I disagree with the enlarged first letter comment. I've never seen it as a problem. The enlarged first letter is the start of a chapter or scene bread, so there is nothing above it to interfere with. |
|
![]() |
![]() |
![]() |
#8 |
Zealot
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 131
Karma: 9236
Join Date: Jun 2020
Device: Kindle PW3 [KOReader]
|
Thank you everyone for the very helpful comments!
Adding to my story ![]() I’ve already exported two epubs and due to some deadline concerns, I’ve skipped the "Map text styles to HTML and CSS tags" step entirely, so it’s all a bunch of <p class="...">. <div>s only actually come up on two pages as simple class="Basic-Text-Frame" and as nested divs where footnotes/endnotes appear <div class="_idFootnotes"> <div id="footnote-154" class="_idFootnote" epub:type="footnote"> There are no <div class="para">s, fortunately I could go back to InDesign and map the text styles properly, but I've made some edits in the epub directly, so I’d rather make the changes here, and I guess that’s what I was asking in the first place -- if it’s possible to change the relevant p classes to h1, h2 etc. I am fairly competent with regex, that’s one of the boons of using InDesign for so long I am forced to use embedded (unencrypted) fonts, that’s my publisher’s request. A couple of readers show the document very nicely, fonts and drop caps included -- Calibre Viewer, Lithium on Android--, while others don’t -- FB Reader, KO Reader on my Kindle, SumatraPDF (the latter doesn’t show *any* formatting at all, which is a little worrying) I have to say I am less concerned with accessibility at the moment (there are almost no rules or laws to support it in my region and ebook market is shrinking anyway here), and more with wider compatibility, although I understand they go hand in hand. I don’t want to pick up bad habits, of course, but if using <em> everywhere instead of <i> or <span class="italic"> gets me wider compatibility, that’s what I'm after at the moment, even if in some places italic would be semantically correct instead of emphasis. I usually use a dinkus (* * *) for a section break, what would the semantically correct way to tag this? The little accessibility reading I've done suggests mapping this to <hr>, which would explain why many ebooks I've read have both a horizontal line, and a fleuron -- which I find a little annoying, strictly from a presentation point ![]() Thank you everyone again! |
![]() |
![]() |
![]() |
#9 | ||
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
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:
As is normal when a new process gets started, zealots will push it HARD. So a naked tag <p> would be wrong, where a <p class="normal-paragraph"> would be more 'proper'. That is also the time when a lot of these software suites were created...like InDesign in '99... They put classes on everything! As is also normal after a few years of getting used to a new process, fixes are made and a new balance point is found. Except the software had already been written, and it works, so why spend the money to change it? A 'normal paragraph' is what makes up 98.7% of a chapter. Why have <p class="normal-paragraph"> when it is easier just to have that as a naked tag <p>?? When cleaning up a book's code, that is what I consider 'low hanging fruit', easy to fix, and makes a big improvement in readability. Spoiler:
Quote:
That is obviously not needed in today's eBook world where you can simply change the "edition" or "version" by updating the copyright page with something as simple as "V2.5" or "Second Edition". Last edited by Turtle91; 01-31-2024 at 09:29 AM. |
||
![]() |
![]() |
![]() |
#10 | |||
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
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:
Quote:
Quote:
![]() Here is the method I use and I haven't seen it display both on my readers. Spoiler:
Edit: The slight offset from center you see with the fleuron is because, in this example, I left the letter-spacing for all <hr>s. If you use a fleuron image, just remove the letter-spacing and the image will be perfectly centered. Last edited by Turtle91; 01-31-2024 at 10:27 AM. |
|||
![]() |
![]() |
![]() |
#11 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,663
Karma: 134319570
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
I mentioned the overall L/R margins. Of course it's OK to have L/R margins for offset text and other specific things. As for line-height, there's no need for it as you're not going to be using a dropcap of large first letter. A large first letter does not work properly on a Kindle because you cannot set the line-height to be smaller. So the first line of the chapter and/or section has a different space to other lines. And since Kindles are basically fixed with a line-height, why bother? With a Kobo, I can change the line-height to what I want. Why cripple that? Dropcap or large first letter don't really work well. Change the font and/or change the line-height and it's a fail. Plus, when they fail, they look awful. <blockquote> just works. If you like the default, you don't need extra CSS. IT's better then a <div> about the offset text. The problem with a blank space is that the way most do it, it can be a major fail. If you use a margin to give you that space and it falls at the end/top of a page, the space gets swallowed-up. You need to use padding to have the space not get swallowed. Also, in a pBook you get *** when the space hits the top/bottom of the page. I've seen this translated over to the eBook. So you get *** in the middle of the page and you can still have the space at the top.bottom and again, it's swallowed-up. That's why I do prefer something in that space. But what I really dislike is when there is a graphic used and there is a seperate file for every occurrence of that graphic. I like my idea of a 2px 60% wide black line. I use an <hr/> with the appropriate CSS for this. Looks good and works well. Plus, I don't need any graphics for it. Most embedded fonts do not work well. A common font is Adobe Garamond Pro and it's a disaster on an eInk screen as it's way too light. Also, on a Kindle, most people won't see your embedded fonts as they don't switch to Publisher Font. There are some cases where an embedded font works, but that will only really work with ePub. Why do you want pBook specific stuff in the eBook? For example, a note saying that if you got the book without a cover is illegal is senseless. What I do wish we had on all eBooks is the version number so if it gets updated and we download it again, we'll know it's a newer version. One thing I did leave out. Do not use % where em will work better. I do think following my instructions will give a rather good looking eBook. |
|
![]() |
![]() |
![]() |
#12 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,663
Karma: 134319570
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
![]() |
![]() |
![]() |
#13 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,663
Karma: 134319570
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
![]() |
![]() |
![]() |
#14 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,663
Karma: 134319570
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
<p class="somereallyuselessclass"> should be just <p>. Your Basic-Text-Frame should be changed for a <blockquote>. * * * for a section break looks like you don't have a clue how to do it so it looks good. What embedded fonts are you using/ Most will not work well on an eInk Reader and on a Kindle will never be seen by most Kindle users who read your book. The drop cap has to go as it will not work in too many cases. I bet on my Kobo it will be a fail given the settings I like to read with. As to the section break, you need to use <hr.transition> for accessibility. The following code works well. Code:
hr.transition { margin-top: 0.9em; margin-right: 40%; margin-bottom: 0.9em; margin-left: 40%; border-top: 2px solid; } Do not forget to have an NCX ToC. |
|
![]() |
![]() |
![]() |
#15 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
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:
The example I gave, that you quoted above, was an example of using inline styling vs. css classes. It was not meant to tell people to style things any particular way. Having said that, text-align:left is perfectly fine under certain circumstances, like forcing a left-alignment for stylistic purposes. Setting default font weight and size is also perfectly acceptable...it sets a baseline from which you can change with specific classes. Are they necessary - maybe not, but are they wrong - no. |
|
![]() |
![]() |
![]() |
Tags |
indesign, sigil |
|
![]() |
||||
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 |