I recently gave a presentation during a webcast for Digital Book World called “Unlocking the Power of HTML5/CSS/Javascript.” To demonstrate the power of HTML5, I created my entire presentation with example code in HTML5 (you can purchase it here). During the presentation many questions were asked and I did not have the time to get to all of them. Below are some of the questions from the presentation and my answers.
Related: HTML5 Executions for Ebooks
Q: CSS3 has a huge number of new attributes it can apply to an element. Are all browsers supporting these attributes equally?
A: CSS3 does add a huge number of additional directives. There is a great website: Can I Use (http://caniuse.com/) which tracks compatibility across browsers. Many tags are widely supported, while some have minimal support.
Q: does my HTML page automatically accept HTML5 instructions, or do I need a separate heading to identify it as HTML5?
A: All that is required (HTML4 or 5) is a doctype of HTML: <!DOCTYPE html>
EPUB requires XHTML, whereas most of the web is happy simply taking HTML. The different is that XHTML requires you close every tag, properly nest tags, and format everything properly (HTML is loose, so if it encounters something bad, it will just close your tag for you, which can cause unexpected display).
HTML simply requires: “<html>” to open your document
XHTML requires and xml namespace: “<html xmlns=’http://www.w3.org/1999/xhtml’>”
Q: Does HTML5 have a <stanza> tag for Poetry?
A: A full list of HTML5 tags can be found here: http://www.w3schools.com/html/html5_new_elements.asp
There is not a <stanza> tag, but you could use <article> and <section> to define a poem (article) and stanzas (section).
Q: Do you need to be online for Javascript to work in an ebook on iBooks?
A: Javascript code can be included in your EPUB package, or referenced through a website. If it is included in the package, then you do not need to be online for Javascript to work.
Q: For “ID” in CSS, do you mean that you can only use the “ID” one time within the HTML?
A: CSS can be added 4 places: inline, class, tag, and ID.
Inline: <span style=”font-size:24px;”>This font is 24px in size</span>
Class: <span class=”large_font”>This span has the large_font class</span>
ID: <span id=”special_span”>This span has the ID of special_span</span>
These concepts can be mixed:
<span id=”special_span” class=”green” style=”font-size:24px;”>This has inline styles, a class, and an ID.</span>
Sample CSS would look like:
—– BEGIN CSS —–
#special_span { /* CSS for the ID special_span */
background-color: rgb(255,0,0); /* background-color red */
}
span { /* define the styles for all span tags
font-family: serif;
}
.green { /* define the styles for the class ‘green’ */
color: rgb(0,255,0);
}
—– END CSS —–
If there is a conflict between the styles provided, the highest order wins the conflict. The order (from highest to lowest) is: Inline, ID, Class, Tag. So, a tag style gets overridden by an ID style.
Q: Where can I get further training/info about the “IF” property of CSS?
A: Use your favorite search engine and search for “CSS Media Queries” if you want to find general tutorials. Stack Overflow http://stackoverflow.com/ is a wonderful resource for programming related questions — so go there for more specific questions like: “Media query for landscape versus portrait.”
Q: There is any recommendation for the ones wanting to develop Javascript plugins?
A: http://www.jquery.com is the best place to get started if you want to write your own plugin. JQuery is a Javascript framework that makes learning and extending Javascript easy, as well as ensures maximum compatibility across browsers and environments.
Q: Can the content of the html5 tags <article> and <section> be formatted via css?
A: Any tag in HTML can have CSS defined for it. Some tags, like <b>, <i>, <em>, <strong>, etc have default stylings set by the browser but those can be overwritten in CSS. For example, the default for <b> is to make text bold, but if you define your CSS as such:
b {
font-weight: normal;
font-style: italic;
color: rgb (0,0,255);
}
<b> tags will appear normal-weight, italic, and green.
Q: Is Firebug the same tool as “Inspect Element” in Google Chrome?
A: Yes. Safari, Firefox, Chrome, and Internet Explorer all have developer tools built in that allow you to “inspect” an HTML element and see what CSS properties are assigned to it. They also let you execute Javascript, and debug in some way. FireBug is an extension to Firefox (not the built-in inspect) that has more functionality. I personally find it the best debugger.
Q: How do you add a <p> class between list items in an ordered list, yet keep the numbering in sequence when picking up the <li> style again?
A: Proper nesting. You should not have paragraph content within your list items, as that would be a bit of a concept over-ride.
EXAMPLE OF THAT CODE
<ol>
<li><p>This is my list item</p></li>
<li><p>This is my list item</p></li>
</ol>
If your ordered list is PART of a paragraph (most likely not the case, but it may happen) you would want to nest like this:
<p>My paragraph starts here and I have a list of items to tell you about:
<ol>
<li>First item</li>
<li>Second Item</li>
</ol>
</p>
If you wish to use the <p> tag in your <li> to mimic the styling, then you should use classes in your LI or in your OL and copy the styles. Remember that what is in your HTML is telling about your content — so a <p> tag means that within is paragraph text.
Q: Can you talk about the restrictions of developing HTML5 publications and iBookstore? (i.e. what’s the threshold of what they’ll accept?)
A: There are two restrictions that I’m aware of (outside of content) when it comes to the iBookstore. The first is storage. iBooks disallows any sort of database storage. They have disabled local storage, and while cookies work with side-loaded books, I have no data showing if Apple will accept these books into their store.
The second restriction is performance. Javascript that causes animations to look choppy, or your book to respond/perform poorly will get your content rejected by Apple. Keep in mind that iBooks supports CSS3 animations (transitions and keyframing) which is significantly better performing than Javascript-based animations.
Q: not all reading systems utilize media queries in the CSS, which results in broken CSS for the whole file if it’s implemented but not utilized. When will all major ebook readers will support media queries?
A: The short answer to this question is to get devices to test on, and those devices that do not support media queries create a unique file for that retailer and send them a file specifically for their devices.
Q: Can user send his feedback from inside a book?
A: Depending on the platform, certain elements can be supports. You could create an HTML form within a book, have a user fill in information and have it post to a website (which can handle the code and processing). You can also include an email link, which would open a new email (you can pre-populate the To and Subject fields) which can let the user provide feedback. Ultimately it is about testing. Older platforms will not allow anything, newer ones will allow certain things and not others.
Q: Does the CSS code need to be in the header for the website?
A: CSS code can be applied directly to an HTML tag (which is not recommended, and is bad form, but works). Additionally, you can define a <style> tag anywhere within an HTML document — in the <head> area or in the <body>. Some browsers may dislike the <style> being in the <body>. While all these work, you should always have your CSS in a file separate from your HTML and include that file in the <head> of your HTML document.
Q: Will Javascript functionality be supported by tablet/ereader hardware, or is it too insecure?
A: There are two questions here.
1. Will javascript be supported by tablet/ereader hardware:
Yes. It is already supported on all tablets through the Web browser. Currently it is only supported by the iBooks reading system, but I expect it to be supported by other reading systems soon enough.
2. Is this insecure?
Javascript is a very secure programming language. Additionally, there are further steps that reading systems can do to sandbox their applications to make environments even more secure. All that said, Javascript still has bugs and potential exploits that are waiting to be found. These exploits exist on your desktop, and with every website you visit. The reality is that the threat of malicious code exists, but it is equal to or less than that of your computer or tablet, which you use daily and have probably never encountered an issue.