Quickie-InlineBlocksInEpubMobi

Inline-block in Epub and Mobi

This page is begun 2018 Feb 7. The question has arisen whether inline-blocks behave properly in mobi, tested in Kindle Previewer. So I constructed a test with the following css

body {
 margin: 0.5em;
 padding: 0.5em;
 font-size: 130%;
 width: 20em;
}
div,
span {
 margin: 0;
 padding: 0;
 text-indent: 0;
 text-align: center;
}
.dexample-xiii {
 text-align: left;
 padding-left: 1.5em;
 text-indent: -1.5em;
}
.nowrap,
.smcap {
 display: inline-block;
}
.smcap,
.smmaj {
 font-style: normal;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
b {
 font-weight: normal;
 margin: 0;
 padding: 0;
 text-indent: 0;
}
b,
.smmaj {
 font-size: 0.75em;
}

and the following html

 <div class="dexample-xiii">
 <span class="smcap">T<b>HE</b></span>
 <span class="smcap">T<b>ESTING</b></span>
 <span class="smmaj">OF</span>
 <span class="smcap">P<b>APER</b>,</span>
 <span class="smcap">M<b>ECHANICAL</b>,</span>
 <span class="smcap">C<b>HEMICAL</b>,</span>
 <span class="smmaj">AND</span>
 <span class="smcap">M<b>ICROSCOPICAL</b></span>
 </div>

 <div style="text-align: justify;
             border: thin gray solid;
             width: 15em;">
 blah blah
 <span class="nowrap">(<span class="smmaj">AARDVARKS</span>).</span>
 blah blah
 <span class="nowrap">(<span class="smmaj">AARDVARKS</span>).</span>
 blah
 <div class="nowrap">blah blah
 <div class="nowrap">
 123<br />456<br />789</div></div>
 blah
 <span class="nowrap">(<span class="smmaj">AARDVARKS</span>).</span>
 blahbla
 <span class="nowrap">(<span class="smmaj">AARDVARKS</span>).</span>
 blahblablahbla
 <span class="nowrap">(<span class="smmaj">AARDVARKS</span>).</span>
 blahblablahblablahbla
 <span class="nowrap">(<span class="smmaj">AARDVARKS</span>).</span>
 bla
 <span class="nowrap">(<span class="smmaj">AARDVARKS</span>).</span>
 blahbla blahblablahbla blahblablahbla</div>

This gave the following results in Mobi, Adobe Digital Editions, and in Chrome on my WIN10 PC.

Very interesting. In no case was the punctuation around AARDVARKS messed up, so I tentatively conclude that either a) there's no problem, or b) the inline-block code did indeed save the day, in Mobi, ADE, and in Chrome/WIN10.

Of the two handheld formats, ADE produces a considerably more accurate rendition, taking Chrome/WIN10 as a standard of excellence. If anything, ADE performed better than Chrome, in that ADE found room for an extra “blah” on the end of the second line, making the justification in lines 3–7 work better. Probably just random; but it's good.

Kindle Preview, as usual, ignored my sacred command to justify the text, but otherwise there's no evidence of misbehavior in the punctuation around AARDVARKS. Of course with left-align, one shouldn't expect any problem with such punctuation. KP 3.17.1 does seem to know the basics of how an inline-block should behave, though it's strange, and I believe wrong that the inline-block with the numbers and <br> elements should be on a line by itself. Update 20180207 10:18: Ramón asked about Kindle Previewer ver. 2.94, which often or usually performs better than KP 3.17.1. The result is―

which does indeed appear to be as good as Chrome/WIN10. Ramón and Craig have argued, here, for example, that KP version 2.94 should be used for testing DP code now (2018Feb) instead of whatever Amazon claims to be the current version of Kindle Previewer (today it is v.3.17.1).

I welcome and invite constructive comments, questions, and suggestions Richard