We’ve again updated ePubCrawler, our InDesign-to-Fixed Layout EPUB tool. The list of changes for version 0.2.3 is available from http://slashti.me/epubcrawler#v000203
ePubCrawler is gradually becoming more and more powerful, and if you’re serious about Fixed Layout EPUB, you need to check it out.
This release has a lot of improvements when it comes to handling of text, which should reduce the effort for a good-looking conversion.
One of the many new features is that in this version, InDesign’s leading is converted to CSS line-height.
While testing the feature, I bumped into an interesting issue.
By increasing the leading in InDesign or increasing the line-height in CSS, you’re adding more white space between the lines. So, I naively expected the HTML version of my exported text to look fairly close to the InDesign version. Boy, was I wrong.
Turns out: InDesign adds the extra white space above the line of text. CSS instead evenly distributes the white space above and below the line of text. That’s a small detail, but it has visual consequences.
Everything is hunky-dory as long as you’re using a constant leading. But when you’re using a varying leading, things go off the rails. When you increase the leading from one paragraph to the next, the converted text in HTML seems to shift upwards by a few pixels.
This is the original text in InDesign:
As you can see, the extra white space from the increased leading in the second paragraph is put above the text. The last line of text of the second paragraph is close to the third paragraph – no extra white space there.
Export it with ePubCrawler, and you get this:
See the difference? The extra white space is now distributed evenly above and below the second paragraph, so the result looks quite different from the InDesign original.
So, I added a new setting called adjustForLeadingChanges to config.ini to try and remedy this.
Setting adjustForLeadingChanges to 1 makes ePubCrawler attempt to preserve the ‘look and feel’ of the InDesign text by manipulating the margin-top of paragraphs that follow a leading change. As long as the leading stays constant from paragraph to paragraph, no adjustments are needed. But when the leading changes from one paragraph to the next, something needs to make the CSS text shift up or down to mimic the InDesign look and feel.
This is what you get if you set adjustForLeadingChanges to 1:
As you can see, this is pretty close to the original InDesign ‘look’. Inspecting the generated XHTML shows you how I’ve done this:
... <div id="p1"> <p class="BasicParagraphP"><span class="Inline1">Explis quas eicipsa ndeliti asitio dolore ni ommosa qui ommo et, solupti ulpa nistio berio. Lacipsame qui ut mo officil luptis aut ipsaped quo corum dellaccustem quo tectia quidia in expliquia dolore, tectate es derfernatur? Qui solore, omnihillore sa que vendit repudio quibus repratet mo id unt lam, niet vent, te doluptatum fugiam, sit eum quiberectium.</span> </p> <p class="BasicParagraphP Override1" style="margin-top: 4.8px;"><span class="Inline2">Ut velis atem volorepta solorro remolor serum ex estis et, con cum atio te rest, ut dunt esti debit quo voluptat erio inciam que dolores tisque non nonestem cus doluptatus nosto incte vent quis inctorrovit, qui doluptatur as ditio ma expelis cipsunt endigentiam eventis sint vendicius</span><span class="Inline3">.</span> </p> <p class="BasicParagraphP" style="margin-top: -4.8px;"><span class="Inline4">Eseriae etur a volor atur? Quidissiti sum id mil millaces esciatus delibus excero diorum rem rest modi odis dolorer chilita tibusae eost lantibea nimil esciend ipienda delibusae maiore nos voluptatem eos aut ate rae modis dolupiet</span><span class="Inline5">.</span> </p> </div>
When the leading increases, I shift the text downwards by 4.8px (a value calculated by ePubCrawler), and when it decreases, I shift the text upwards in the opposite direction. The current version is not as clean as I want it – I’d rather put this stuff in a CSS style sheet, but for now, I am generating it smack into a CSS style associated with the <p> tag.
So, what do you think? Good idea? Tweet your feedback and make sure to mention @zwettemaan, my Twitter handle.