Your prescription for increased productivity and profitability
In our last post we discussed some of the benefits of using text styles. Creating styles and style sheets does add a little effort to the document creation process. But using a script to create styles or import them from standing style sheets can take a fair amount of work out of the equation. What’s more, styles enforce consistency and can help prevent error.
In this blog post we will look at another advantage of using styles; this in exporting a document to HTML or EPUB. Imagine being able to create a document for print and have the same document ready for web with little more than a keyboard shortcut. Let’s see how text styles help automate the process.
To see how all this works, you will need a document open that was created with a primary text frame. To add sample text styled with a pre-defined set of text styles you may want to use the following script which adds a handler to the script that we developed in our last blog post.
(*Adds styles to a document and adds text to test the styles. Assumes a current document exists with primary text frame*) set wordPhrase to "Now is the time for" set paraList to {{"Title", 30, 30, "Normal", 1}, {"Normal", 12, 14, "Regular", 2}, {"Heading 1", 30, 30, "Regular", 3}, {"Heading 2", 24, 24, "Regular", 3}, {"Heading 3", 18, 18, "Regular", 3}, {"Heading 4", 14, 14, "Bold", 1}, {"Heading 5", 14, 14, "Italic", 3}, {"Heading 6", 10, 10, "Italic", 3}} set charList to {"[None]", "Bold", "Italic", "Bold Italic"} tell application "Adobe InDesign CC 2018" set measurement unit of script preferences to points set stylingList to {left align, left justified, center align, right justified, away from binding side} set docRef to document 1 tell docRef set baseStyle to paragraph style 2 repeat with eachItem in paraList set theName to item 1 of eachItem set alignIndex to item 5 of eachItem set myAlignment to item alignIndex of stylingList if not (exists paragraph style theName) then set theStyle to make paragraph style with properties {name:theName, based on:baseStyle, point size:item 2 of eachItem, leading:item 3 of eachItem, font style:item 4 of eachItem, justification:myAlignment} if name of theStyle is "Normal" then set first line indent of theStyle to item 3 of eachItem end if end repeat repeat with i from 2 to length of charList set theName to item i of charList if not (exists (character style theName)) then make character style with properties {name:item i of charList, font style:item i of charList} end if end repeat end tell my testStyles(docRef, paraList, wordPhrase) end tell (*Adds sample text and styles it *) on testStyles(docRef, nameList, wordPhrase) set frameText to "" set numLines to length of nameList repeat numLines times set frameText to frameText & wordPhrase & return end repeat tell application "Adobe InDesign CC 2018" set pageRef to page 1 of docRef tell text frame 1 of pageRef set contents to frameText repeat with i from 1 to count of paragraphs set theName to item 1 of item i of nameList set applied paragraph style of paragraph i to paragraph style theName of docRef end repeat end tell end tell end testStyles
Now that you have a document with text styled using styles you are ready to export to HTML. Without doing anything more than entering the keyboard shortcut Command + E you are in the Export window. Name the output file and select HTML from the Format field at the bottom.
…Enter Name and Format
You are next given the HTML Export Options dialog.
You can leave all of the settings as set by default and click OK. Leaving the View HTML after Exporting checkbox checked, the default browser displays the page. If all was set up correctly, the page looks exactly as designed.
What makes this all possible is the fact that all paragraphs are styled with a paragraph style allowing InDesign to create the files needed to display the page in a web browser. There are two files created, an HTML file and a CSS file (describes how the tags in the HTML will be displayed). How the files are written depends largely on how the HTML export tagging is set up for the paragraph styles. This is estabished in the Export Tagging tab of the Paragraph Styles Options window.
Paragraph style to HTML mapping is established in the EPUB and HTML Tag field which is set to [Automatic] by default. The checkbox Include Classes in HTML when checked dictates if the HTML will include the name of the paragraph style as its class. With the Tag field set to [Automatic] a typical entry in the HTML for a style named Title reads as follows:
<p class="Title">Now is the time for</p>
Notice in the above how the native HTML tag is set to </p> with the name of the paragraph style used for the class (“Title”). The CSS entry for the same would read similar to the following (partial listing).
p.Title { color:#000000; font-family:Baskerville, serif; font-size:30px; font-style:normal; font-variant:normal; font-weight:normal; line-height:1; }
Having the code set this way could provide some confusion, so users are advised to “tag” native HTML tags to be used as the style id for the corresponding style. Here the tag h1 is mapped to the paragraph style Title.
With the Title paragraph style set to H1, the HTML and CSS for this style would be similar to the following.
<h1 class="Title">Now is the time for</h1> h1.Title { color:#000000; ... }
With the Title style tagged to H1, but without the Include Classes in HTML checked, the output for the HTML changes to the following:
<h1>Now is the time for<h1>
In the case that a class is not included, the styling will expect CSS defined for the H1 tag. Without the CSS, the output reverts to the default styling for the browser. Notice that when the Include Classes in HTML checkbox is unchecked, the Emit CSS checkbox will also be unchecked so no CSS is written. (Of course, you can add your own CSS file to define attributes for the H1 tag.)
HTML Tag mapping for character styles works similar to that for paragraph styles with only three native HTML tags available: <span>, <em> (for italic), and <strong> (for bold).
…Export Tagging map for Character style
It is important to know that when you style text in a document using the keyboard shortcut for bold (Command + Shift + B) as opposed to using a character style possibly named Bold will produce different results in the HTML export. Without a character style to map to, InDesign creates a CharOverride class:
<h1 class="Heading-1">Now is <span class="CharOverride-2">the</span> time</h1>
With a character style such as Bold mapped, Adobe uses the style name for the class:
<h1 class="Title">Now is <span class="Bold">the</span> time for</h1>
Certainly being able to map styling to HTML tags provides a great amount of flexibiiity and control for export to web or Epub.
InDesign gives designers additional flexibility with the option of being able to add custom CSS files to the mix. This is designated in the Advanced tab for the HTML export.
…Advanced options for HTML export
Once you have provided HTML tagging for your paragraph and character styles, save the document as a style document (in a folder named Styles in InDesign’s Presets folder. Use this file for importing your styles and give your document added functionality with style to HTML tagging without having to do a fair amount of extra work.