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?
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!
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!
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.
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.
Related
I have what I thought was a pretty simple layout, but in ie11, layout-wrap doesn't seem to be working. Check out this codepen, or just consider the following code:
<div layout="row">
<div layout="column">
<div layout="row" layout-wrap>
<div>lorem ipsum dolor sit amet</div>
<div>lorem ipsum dolor sit amet</div>
<div>lorem ipsum dolor sit amet</div>
<div>lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
With that html, chrome and edge will wrap as expected, but ie11 will not. If you remove outer-most container (the row), then ie11 will work as expected. Why would that container make a difference? Anyone have an idea how I can coerce ie11 into wrapping those items without removing that containing row?
So, after a more digging and experimenting, it became clear that this has nothing to do with angular material at all, and is just weird behavior in IE11. I was able to clearly reproduce the issue with plain css. Check out this CodePen here, or consider this html:
<div style="display: flex;flex-direction: row;">
<div style="display: flex;flex-direction: column;">
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
The solution was pretty easy to find here on SO as well, once I tried search for an answer that didn't involve Angular Material. Basically, it looks like you need to have a width specified for the container of the container that has flex-wrap specified (the column in the example above). You can do this with width:100%, or with a flex="100" in angular material, or probably plenty of other little tricks, but anyway, the reason the items don't wrap is because the element that contains the wrapped children will just happily go outside of its containing element in ie11. How aggravating.
My problem is similar to this post, but not identical. I somehow can't figure out the correct pandoc command line parameters for maintaining/resolving cross-document links when using a couple of interlinked HTML files as the input.
Let's say I have two files, chapter1.xhtml and chapter2.xhtml located in the /home/user/Documents folder with the following contents:
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h3>Chapter 1</h3>
<p>Next chapter<br /></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
which contains a link to the next document.
and
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h3>Chapter 2</h3>
<p>Previous chapter<br /></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
which contains a link to the previous document.
I used the following command line parameters:
$ pandoc -s --toc --verbose -o /home/user/Documents/output.markdown /home/user/Documents/chapter1.xhtml /home/user/Documents/chapter2.xhtml
And I got the following output:
---
---
- [Chapter 1](#chapter-1)
- [Chapter 2](#chapter-2)
### Chapter 1
[Next chapter](/home/user/Documents/chapter2.xhtml)\
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
### Chapter 2
[Previous chapter](/home/user/Documents/chapter1.xhtml)\
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This problem also occurs when I select docx or latex/pdf as the output format. I also tried to use relative links, but nothing worked.
What are the correct parameters for resolving cross-document links?
tl;dr I.e. I don't want link references that contain the original paths; I want them to point to the new output document.
The problem is that your links contain absolute paths (/home/user/Documents/chapter1.xhtml) instead of relative ones (chapter1.xhtml). I cannot imagine the ePUB file containing absolute paths, and if it does, the links in the file will only ever work correctly on your computer. So the solution will have to be fixing those ePUB files before feeding them to pandoc.
Note that roundtripping from pandoc from markdown to epub and back to html works as expected:
$ pandoc -o foo.epub
# foo
adfs
# bar
go [to foo](#foo)
$ unzip foo.epub
$ cat ch002.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<title>bar</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="bar" class="section level1">
<h1>bar</h1>
<p>go to foo</p>
</div>
</body>
</html>
$ pandoc foo.epub
<p><span id="ch001.xhtml"></span></p>
<div id="ch001.xhtml#foo" class="section level1">
<h1>foo</h1>
<p>adfs</p>
</div>
<p><span id="ch002.xhtml"></span></p>
<div id="ch002.xhtml#bar" class="section level1">
<h1>bar</h1>
<p>go to foo</p>
</div>
P.S.
Using two input documents like:
pandoc -o output.md chapter1.xhtml chapter2.xhtml
works as the pandoc README states:
If multiple input files are given, pandoc will concatenate them all (with blank lines between them) before parsing.
So for the parsing done by pandoc, it sees it as one document... so no wonder that cross-file links won't work.
So I am working on a WordPress website and on each page I have an H1 tag for the title of that page. I am using a special font using #font-face and it works great on windows in every browser, but when I switch over to a mac it won't display the h1 tag its just white space. I have tested this in safari and chrome on multiple mac's and its not working on any of them. If I change the font to let say Arial it works great, if I setup to have a fall back font it does not work. If I change the h1,h2,h3 tags to use NorthBergen-Light it works great, its just the NorthBergen that doesn't work and the code for both of them is the exact same. In my research I have found that some people say they have had success when they remove all of the quotes but when I do that it just breaks everything. I can't figure out why NorthBergen-Light works great but NorthBergen does not.
#font-face {
font-family: 'NorthBergen';
font-style: normal;
src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot');
src: local('NorthBergen'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.woff') format('woff');
}
#font-face {
font-family: 'NorthBergen-Light';
font-style: normal;
src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot');
src: local('NorthBergen-Light'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.woff') format('woff');
}
.services .services-inside .services-title{
font-family: 'NorthBergen' !important;
}
h1, h2, h3{
font-family: 'NorthBergen', 'Times New Roman', 'Times', 'serif' !important;
}
footer.main-footer .widget .widget-title{
font-family: 'NorthBergen-Light' !important;
}
h5, h6, p, blockquote, li, a, .main-container, h4.widget-title, .widget-title{
font-family: 'NorthBergen-Light' !important;
}
So I got it to work by using fontsquirrel and taking all the files and putting them in my FTP and changing the css file to look like.
#font-face {
font-family: 'NorthBergen';
font-style: normal;
src: url('ufonts.com_northbergen-regular-opentype-webfont.eot');
src: url('ufonts.com_northbergen-regular-opentype-webfont.eot?#iefix') format('embedded-opentype'),
url('ufonts.com_northbergen-regular-opentype-webfont.woff2') format('woff2'),
url('ufonts.com_northbergen-regular-opentype-webfont.woff') format('woff'),
url('ufonts.com_northbergen-regular-opentype-webfont.ttf') format('truetype'),
url('ufonts.com_northbergen-regular-opentype-webfont.svg#northbergenregular') format('svg');
}
Dont know anything about Wordpress, but you might need some conversion of font for all browsers:
#font-face {
font-family: 'Min_font';
src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype'); /* IE9 + later */
src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
url('../fonts/Min_font/Min_font.woff') format('woff'), /* Newer browsers */
url('../fonts/Min_font/Min_font.ttf') format('truetype'), /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini */
url('../fonts/Min_font/Min_font.svg#Min_font + regular, italic, bold) format('svg'); /*IE og iOS earlier than version 5*/
}
Try fontsquirrel: http://www.fontsquirrel.com/tools/webfont-generator
I realize that this question was from several years ago - but I used this thread as a reference when figuring out the solution, so I figured I'd share here to save others future frustration --
For me, all of the fonts were working EXCEPT on my iphone and what I had to do was to remove the ID in the svg portion of the font-face code and leave it as just the uploaded .svg file.
For example in the above code, the svg portion would read:
url('../fonts/Min_font/Min_font.svg, italic, bold) format('svg');
meaning I deleted the "#" and the ID after it.
I tried everything else - fontsquirrel, transfonter, changed the url path numerous ways.
That was the only one that worked - and it took me a week to figure it out :0
It may be the only thing that works for you, too.
My issue was related to something different, so I hope this helps someone. In my case, the font-face code was like:
#font-face {
font-family: 'My Font';
src: url('My-Font.woff2') format('woff2'),
url('My-Font.woff') format('woff');
font-weight: normal;
font-style: italic;
}
and I had all of my heading tags using this:
h1, h2, h3, h4, h5, h6 {
font-family: 'My Font';
}
Most browsers/user-agents apply font-weight:bold or a font-style:normal in some cases.
Even with this, my font still rendered correctly on Chrome/FF/Edge. It was only until I got on iOS did I notice the font didn't render correctly. I guess they are more strict about this.
Changed my CSS to:
h1, h2, h3, h4, h5, h6 {
font-family: 'My Font';
font-weight: normal;
font-style: italic;
}
In my case, the TTF file dictated the font-style and font-weight properties that Transfonter ended up applying. I just had to make sure those were the same in the CSS declaration on the element the font was being applied to. Your case may be different, but it is important to check for those discrepancies.
Started working for me after changing path.
The path fontsquirrel gave didn't had ./
After adding it, it works:
#font-face {
font-family: 'montserratblack';
src: url('./montserrat-black-webfont.woff2') format('woff2'),
url('./montserrat-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Say I have XML that partly looks like this:
... lorem ipsum dolor sit amet, <ext-link href="http://www.consectetur.org/">consectetur</ext-link> adipiscing elit ...
I can quite easily target that URL in XSD with
<xsl:template match="ext-link">
<xsl:apply-templates/>
</xsl:template>
But when my XML looks like this, I'm at a loss:
... lorem ipsum dolor sit amet, <ext-link xlink:href="http://www.consectetur.org/">consectetur</ext-link> adipiscing elit ...
This doesn't work:
<xsl:template match="ext-link">
<xsl:apply-templates/>
</xsl:template>
Neither does #xlink or #href. What essential XML/XSL knowledge am I missing here?
Update
Since I'm using Nokogiri for parsing, what I'm probably missing is how to tell it to associate namespaces - I'm not sure where to do this. I'm pulling in XML and XSL like so
doc = Nokogiri::XML(File.read('/some/xml/path'))
xslt = Nokogiri::XML(File.read('/some/xsl/path'))
result = xslt.transform(doc)
Using this, all {#xlink}, {#href} or {#xlink:href} in my XML render nothing in the result.
If the source document isn’t using namespaces (perhaps the declaration has been removed somehow) then you need to select the attribute with no namespace and the “local” name xlink:href. This is a little tricky with XPath because it will interpret the : as separating the namespace, but you can do it like this using the name() function:
<xsl:template match="ext-link">
<xsl:apply-templates/>
</xsl:template>
The source XML document will have the namespace declared somewhere higher up the tree, assuming this is the standard XLink mechanism that will be
xmlns:xlink="http://www.w3.org/1999/xlink"
In order to refer to an attribute with the local name href and the namespace URI http://www.w3.org/1999/xlink you need to bind the same namespace URI to a prefix in the stylesheet and then use this prefix in your XPath expressions. E.g.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="..."
xmlns:xlink="http://www.w3.org/1999/xlink">
<xsl:template match="ext-link">
<xsl:apply-templates/>
</xsl:template>
</xsl:stylesheet>
In this case xlink is the conventional prefix for that URI, but in general the prefix doesn't have to be the same one as the source document used, all that matters is that it maps to the right URI. This would work just as well:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="..."
xmlns:xl="http://www.w3.org/1999/xlink">
<xsl:template match="ext-link">
<xsl:apply-templates/>
</xsl:template>
</xsl:stylesheet>
I started a dojo project from scratch by trying using good practice from the very beginning. I'm really new to dojo toolkit, so I'm walking through lots of documentations and samples which leave me with a lots of cool stuff but no way on how to implement an architecture for future dev (or add-ons). I have searched the web and found this dojo boilerplate project which seems to be a good start for putting it all together, but I wanted something more, I wanted to implement the MVC pattern (I have lots of experience with JAVA and Ruby on rails dev) in my application and came across this very cool example. So, I created something like this which seems a pretty legit way to organize my project. Correct me, if I'm wrong.. or you have a better approach.
Now, I am ready to start. I have tried a couple of tutorials on dojo toolkit website. Run wonderfully when you only have one page. But right now, I was wondering how would I implement this layout tutorial into my own application. I want this kind of layout to be my main layout for my application (so, I tried to had those pieces of code into my index.html),
<div
id="appLayout" class="demoLayout"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'headline'">
<div
class="centerPanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center'">
<div>
<h4>Group 1 Content</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<h4>Group 2 Content</h4>
</div>
<div>
<h4>Group 3 Content</h4>
</div>
</div>
<div
class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'top'">Header content (top)</div>
<div
id="leftCol" class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
</div>
but it doesn't get:
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/parser"]);
So the result is basically the div and my text, but no layout whatsoever. What am I missing?
My solution: I would create only a div on my index (e.g "container") and feed him from the loader (app/run.js), (which call another script called main), this main.js file is using the concept of AMD (which I'm beginning to be familiar), and he's handling the creation of any instance of my application. So, for example, I could create a specific view for my layout and instance it on that file...
I use also dojo boilerplate project for my applications and this is my main.js:
define([ 'dojo/has', 'require', 'dojo/_base/sniff' ], function (has, require) {
var app = {};
if (has('host-browser') && isCompatible()) {
require([ './EntryPoint', 'dojo/domReady!' ], function (EntryPoint) {
app.entryPoint = new EntryPoint().placeAt(document.body);
app.entryPoint.startup();
} else {
window.location = "/admin/browser/";
}
function isCompatible() {
// browser compatibility check here
}
});
My EntryPoint module/class is a widget, i.e. EntryPoint.js looks like:
define([
"dojo/_base/declare",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/i18n!app/nls/main",
"dojo/text!./ui/templates/EntryPoint.html",
"dijit/layout/BorderContainer",
"dijit/layout/StackContainer",
"dijit/layout/ContentPane"
], function(
declare,
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
i18n,
template
){
return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template,
i18n: i18n,
postCreate: function() {
//...
}
});
});
Finally my EntryPoint.html:
<div style="height:100%;">
<div
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'sidebar', gutters: false"
data-dojo-attach-point="mainContainer"
style="height:100%;"
>
<div
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="region: 'left', splitter: true, design: 'headline', gutters: false"
data-dojo-attach-point="sidebarPane"
class="sidebarPane"
>
<div
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center'"
>
<div class="sidebarSection">${i18n.title.public_}</div>
<div
id="sidebar-posts"
data-dojo-type="app.widget.SidebarItem"
data-dojo-props="iconClass: 'sidebarIconPosts', value:'posts', name: 'sidebar'">
${i18n.title.posts}
</div>
<div
id="sidebar-pages"
data-dojo-type="app.widget.SidebarItem"
data-dojo-props="iconClass: 'sidebarIconPages', value:'pages', name: 'sidebar'">
${i18n.title.pages}
</div>
[...]
The advantage of using Widget as your main layout:
html template works out of the box with dojo build system
you can use data-dojo-attach-point and data-dojo-attach-event in your layout template
you can use ${i18n.title.members} for string substitution in html