Your Script Doctor

TAKING ADVANTAGE OF TEXT STYLING

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.

THE TEST DOCUMENT

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.

Text Styles

(*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 

EXPORT TO HTML

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. 

…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.

…Viewing HTML output

Export Tagging

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.

…Tab to set Export Tagging  

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.

…Mapping H1 to style

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.)

CHARACTER STYLES

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).