Code samples rendering wrong in iBooks

[chriskrycho]

Throughout the ePub version, the monospace font for code samples is rendered incorrectly in iBooks if you choose any reading font besides "Original"—it appears the style sheet isn't overriding some of the classes. See here, for example (using Charter):

As you can see, the bits that are wrapped in syntax highlighting spans (<span class="dt"> etc. in the XHTML source) are falling back to the main typeface instead of the monospace typeface.

[pbrisbin]

Thanks for reporting this. Strange, it looks like just the type signatures, not the function definitions are rendered in the wrong font.

@trevororeilly do you have any ideas?

[chriskrycho]

It does kind of look that way, but that's just a function of what gets highlighted; note that the highlighted bits (User, <$>, "name", "email",=, and <*>) all have the same issue—it's not obvious, but you can tell because they're the wrong widths.

[pbrisbin]

Ah, right I do see that now.

[trevororeilly]

@pbrisbin Apologies for not getting back sooner, was on client work for most of the day. Let me investigate and see what I can find.

[chriskrycho]

It looks like iBooks is doing something (Javascripty, maybe) that overrides these classes, possibly because they're span type elements. All the affected elements have custom attributes, __ibooks_font_override="true" and __ibooks_align_override="true"; it appears the former is what's causing the problem, and from what I can tell from reading up a bit, it looks like Apple applies this to all p, div, or span elements. And whatever Apple is doing there is making it so that no override I apply works; I've even tried getting as mind-boggling specific as a selector like code > span.kw[__ibooks_font_override="true"][__ibooks_align_override="true"] (and, for that matter, just setting a style attribute value on it directly in the inspector). Nothing works. 😕

Edit: amusingly, setting a <font> inside those span tags works… but I can't exactly recommend that as a solution. 😉

[chriskrycho]

Per SO, you can retain styles using iBooks Author, so it may be worth seeing what output that generates for something like this. It'll certainly entail more than just the pandoc output, unfortunately.

[calebhearth]

@pbrisbin @trevororeilly How's this looking?

[pbrisbin]

When I read via the Kindle app on my phone (Nexus 5), I also see non-monospaced font for the code samples -- it does look correct on my actual Kindle though.