P tag not rendering correctly in iBooks 2.0.1

橙三吉。 提交于 2019-12-23 03:56:47

问题


I have an EPUB created with InDesign 5.5 and am trying to use the built-in Futura on the iPad. H1 and H2 tags render properly in iBooks 2.0.1 but P tag and classes default to Times Roman. I've tried the samp hack, but no luck. Here's an example:

p.Narrative-Body {
font-family : Futura, Arial, sans-serif;
font-weight : normal;
font-style : normal;
font-size : 1em;
font-variant : normal;
line-height : 1.6;
text-align : left;
color : #000000; }

and here's the html:

<p class="Narrative-Body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien lorem, semper ac tempus quis, imperdiet quis dui. Morbi sed sollicitudin elit.</p> *Real copy covered by non-disclosure.*

Couldn't find any answers on the e-production sites and I re-installed iBooks. Same problem. However, it works properly in ADE and Safari and Calibre correctly shows sans-serif. Thanks in advance!


We're making progress!! I added the com.apple xml file and mapped my body style to p tags. Now they display Futura, but only if they're straight p tags or p tags with spans (used for run-in text). P tags w/classes still don't use Futura. Just as a test, I made the class names lowercase in the html and css, but still no luck. Here's the revised HTML:

<p><span class="Quote-RunIn">“Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.” </p>

The CSS is now:

p {
font-family: Futura, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 1em;
font-variant: normal;
line-height: 1.6;
text-align: left;
margin: 0 0 1em 0;
orphans: 2;
widows: 2;

}

Natasha, since I'm not using the samp tag, I should specify the font-family in the p tag, right?


回答1:


Do you have the com.apple.ibooks.display-options.xml file in your META-INF? It should have in it:

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
<platform name="*">
<option name="specified-fonts">true</option>
</platform>
</display_options>

This might just be necessary for embedded fonts; I forget. I'm sorry, LOL! Let me know if that works for you!


That's right. The font-family doesn't work inside the p tag, although it works inside the h tags. You want to take out the font-family in the p tag. Do this:

p.Narrative-Body {
font-weight : normal;
font-style : normal;
font-size : 1em;
font-variant : normal;
line-height : 1.6;
text-align : left;
color : #000000; }
samp { font-family : Futura, Arial, sans-serif; }

The the markup should be:

<p class="Narrative-Body"><samp>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien lorem, semper ac tempus quis, imperdiet quis dui. Morbi sed sollicitudin elit.</samp></p>

Please note that you will also need the file I mentioned before in your META-INF folder.

This definitely works; if you find it doesn't, then maybe run through CSS and Markup validators, and see if there's something else interfering?

Good luck!




回答2:


You definitely need the Apple Display Options file in your META-INF with specified-fonts=true. This setting is for all specified fonts - both embedded and system.

p { font-family: Futura;} is fine syntax - it will work in iBooks.

If you have access to the iOS simulator, drag your XHTML file into Safari in the simulator and test there - its sometimes pickier about capitalization, etc. That said, the capitalized class is not a problem.

Good luck!




回答3:


Well, I got it to work, thanks to all of you for your help. Adding the Apple Display Options file did the trick. I hope Adobe finds a way to generate this file automatically in future updates. I wound up leaving the font-family property in the p tag because that's how InDesign generated it. Since it was working, I figured, why tempt fate??

BTW, iBooks seems to honor img width tags in the latest version.




回答4:


says Derrick Schultz, @dvsch on twitter:

Can't speak to ePub, but in HTML that wouldn't validate because classes need to start w/ lowercase letters.



来源:https://stackoverflow.com/questions/9202398/p-tag-not-rendering-correctly-in-ibooks-2-0-1

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!