The ePublisher Style Designer

Abstract

ePublisher is contains a very powerful tool called the Style Designer, which allows a graphical interface for setting style information. It conforms to CSS2 standards and includes powerful mechanisms for applying and organizing styles for any possible design requirement.

Table of Contents

Introduction

The Style Designer is the tool within ePublisher that is used to manage the look and feel of the output. The Style Designer provides a user interface to CSS, which is how the web browser knows how to render the content. The Style Designer is a very powerful tool and as such can be somewhat confusing. In order to alleviate the confusion, it is a good idea to keep some CSS references handy. This can help a great deal in understanding what each setting does to the output and how you might want to style things based on the source document's settings.

In addition to CSS, the Style Designer is the way source document information is presented in ePublisher. For example, in FrameMaker, the Paragraph Designer allows you to create and change style settings. In ePublisher, the Style Designer takes all the style used in the document and presents them in the list of available styles in order to change the settings as necessary. This is also analogous to the Format Settings in Microsoft Word.

Why Change Styles?

ePublisher is what is known as a single sourcing tool. Single sourcing is the concept that content should be created in one format and that format should be used to create other formats. The original source should be the only place where the content is manipulated. In the case of ePublisher, the source documents can be FrameMaker (structured and unstructured documents) and Word.

Both Word and FrameMaker have extensive styling capabilities, so the question should be asked, "Why do I change styling information in ePublisher?"

The biggest reason is because word processors are not designed to create output for all mediums. Word processors are meant to provide an effective means of capturing content and styling it for presentation within the context of print mediums. Of course as years roll by, word processors have become more nimble and can output content to many formats. Unfortunately, word processors can only provide basic output capabilities without compromising original functionality. This is why tools such as ePublisher have been created. ePublisher allows you to take a source document and create any necessary output formats.

Common Themes

Focus on the Web

The advent of the web has propelled HTML to the forefront of rendering technology. Most applications natively can use HTML markup to apply style to content. With this in mind, ePublisher primarily uses CSS for describing style information.

Although CSS is used, there is no reason the Style Designer could not be used for applying information to content in other ways. Adding options to the Style Designer is possible using overrides and although it is a rather advanced topic, it should be noted that the Style Designer can be used to apply information to content in ways other than just CSS.

XML for the Masses and the Machines

XML presents the opportunity for content to be usable very quickly by application developers. While databases and other technology provides similar functionality, a programmatic entry point to information, XML makes this much simpler and flexible. With this in mind, ePublisher uses XML extensively to meet the needs of content creators as well as those who must use the information after generation.

The Style Designer therefore uses XML themes such as Trees and Inheritance to provide simple, yet flexible application of style information. While this is a more technical detail, XML based source documents can easily be styled using the Style Designer due to the XML based design of the Style Designer.

Create a Project

The first step in working with the Style Designer is to create a project in ePublisher. The project should contain the fewest number of documents possible that represent the entire library of styles. A good example is to use your template document or style guide that defines style usage.

Open the Style Designer and take a look at the list of styles that are present. The list of the styles is created when the source document is scanned and added to the project. If you add a new document that has styles not present in the list, the new styles will be added to the list.

Component Overview

The Style Designer is comprised of 6 components:

Paragraph Styles
Character Styles
Table Styles
Page Styles
Graphic Styles
Marker Styles

Paragraph, Character and Table styles all are based on their corresponding tool in the source document. Graphic Styles and Marker Styles are more specific to ePublisher and allow advanced features to be created in the output without compromising the quality and capabilities of the source document.

Each component contains two tabs, Properties and Options. Properties traditionally will be related to CSS settings and how the output will be formed. This could be anything from defining a font size to specifying use of a certain tag.

Paragraph and Character Styles

Paragraph and Character styles are very similar in they both deal primarily with the actual text based content of the documents. Of the two, Paragraph styles are often the most useful and will provide the majority of required functionality. These are traditionally carried over directly from the source document, but new styles can be created and used for both applying style and organizing styles as a whole.

Table Styles

Table Styles are brought over from the source document. The Table Styles usually only apply to the table itself, which means that elements within table cells are often not affected directly by changes in the table styles.

Page Styles

Page styles define styles on the page level. By default, this is usually not something that is carried over from the source document. For example, a master page in FrameMaker is not the same as a Page Style in ePublisher. Page styles are created by adding "PageStyle" markers in the word processing application. Conceptually, the "Page" that a Page Style refers two is essentially the HTML page. To relate things back to how CSS is used in the Style Designer, the Page Styles allow settings related to the "body" tag in HTML.

Graphic Styles

Like Page Styles, Graphic Styles are established by creating a marker in the source document. Graphic Styles are helpful because it allows specific styling of graphics. This can be extremely helpful when different image types are used.

Image Type Notes

It is important to understand how graphics are rendered and processed based on the format. Images can usually be dropped in two basic categories,

Line Based Images
Color Based Images

A line based image that is primarily made up of lines, but more importantly, the lines have definite distinction and limits. A few example of line based images would be graphs, images with text, and cartoons or drawings. A line based image has fewer colors and solid edges that are important to consider when processing the image into a digital format.

Color based images are traditionally photographs and have less distinct lines. The image is created through the use of many colors and/or shades of gray. Again, this use of color needs to be considered when processing images.

Choosing and Image Format

If the image is a photograph or uses color to create the image (no solid lines) then the JPEG format is the best to use. The JPEG format focuses on dithering or slightly blurring things to save file space. When many colors are used, the dithering effectively lowers the file size. When there are very few colors, the JPEG format can make small inconsistencies in solid colors that look very poor.

If the image is based on lines (ie graphs, logos, text based images), then the PNG format is best to use. PNG is something of a progression from the GIF format in that it allows more details and does not suffer from the same limits as a GIF.

What is most important to understand is that PNG and GIF are designed to lower image size through analyzing the lines of an image, while a JPEG image is reduced by dithering the colors.

Setting Up Image Styles

In setting up image styles it is a good idea to create one style that will be for one type of image. For example, if there are 20 images in a document and 4 images are line based images with the others being color based, then create one style for line based images. This way the default settings will be the most appropriate for the type of image that will be use the most. Here is an example setting tree.:

[Default]

MainGraphicStyles
  LineBased
  ColorBased
CustomGraphicStyles
  ScreenShots
  VisioDiagrams

In this example, the only settings that might be change could be "LineBased" style with the other stylenames merely acting as a placeholder.

Marker Styles

Marker Styles are meant to allow for easy creation of more specialized details in the output without ruining the quality of the source docs. This concept of adding functionality in the output while keeping the source documents clean is very important. This makes it possible to create new functionality in the output.

The most prevolent use of markers for extra functionality is the TopicAlias marker for the WebWorks Help API. In the source document you can create a TopicAlias marker and use that marker value as a reference ID that to enter a help set at that location. This is most commonly used for context sensitive help. On a conceptual level, the marker allows a simple way of adding functionalit to the output without adding extra text, conditional text or more obstructive content in the source documents.

Likewise, Page Styles and Graphic Styles both use markers in the source document to allow more specialized formatting of their respective elements in the output.

The [Default] Style

At the top of the each styles list, there is a special style called "[Default]". This the default style that acts as a gateway between the original style settings found in the source document and the styles you will set in ePublisher.

[Default] and Inheritance

Traditionally, the source document should provide the settings on how the document should be in the output. This allows the source documents to be the only place where changes need to be made in order to update aspects such as the look and feel. In order to allow specific style information to be changed per style as needed, ePublisher uses Inheritance.

Inheritence works when an element recieves the qualities of its parent. For example:

<RootNode Font = "Arial">
  <HeadingOne title="My Life">
    <HeadingTwo title="Learning to Walk" />
    <HeadingTwo title="Learning to Run" />
  </HeadingOne>
</RootNode>

In the above example, I am using XML notation to represent a document. The example represents a document. The "RootNode" element is the document as a whole and has an attribute called "Font" that defines what the default font is for the document. The default font will be used when different elements in the document do not declare a font. In this way each element "inherits" a font setting of "Arial".

In the Style Designer, this is how the styles function by default. The "RootNode" in the example is essentially the "[Default]" style in the Style Designer. The "[Default]" style settings are set to get style information from the source document. Since all the styles in the Style Designer must inherit from the "[Default]" style, each individual style, by default, has the source document's styles automatically applied.

The following diagram represents how the source document's style information is used within the Style Designer:

Source Style               ePub Style
============               ==========

HeadOne------\           /-------HeadOne
HeadTwo------- [Default] --------HeadTwo
HeadThree----/           \-------HeadThree

Each style setting can be set to inherit from its parent style or get set explicitly. The "[Default]" style settings are set by default to get style settings directly from the source document. Each default style setting is set to inherit from its parent, which by default is the "[Default]" style. The result is that the style settings look to their parent style until it reaches the "[Default]" style, which in turn is looking at the source document for style information.

Style Trees

By providing a hierarchical model for styles, the Style Designer provides a very robust way to organize and reuse style information. The default settings are meant to provide the simplest means of using the source document style information. This is usually a good option for those who want very few changes from their source documents. As your usage increases, it is a good idea to consider organizing your styles in the Style Designer and utilize the powerful tree model.

Style Grouping by Structure

Below is a style setting example that shows how the tree of styles can be useful in consistently styling your document while preparing your projects for new styles.:

[Default]

Version1.0Styles
  Lists
    Numbered
      NumberedStructParagraph
      Points
    Bulleted
      BulletedStructParagraph
      ShortPoints
  Headings
    MainTopics
    StructureHeadings
      BookInfo
  Helpers
    Notes
    Tips
    Warnings

In this example a top level style is created called "Version1.0Styles". This is similar to the "[Default]" style in that is simply inherits all its information from the parent style. From an organizational standpoint, it provides a simple grouping for the projects first version.

The subsequent styles are also helpful in that they provide structure to the tree of styles. Like the top level style, they also may simply look to their parent for styling information. The advantage is if you did want to make changes to everything in a level, they will be inherited by all the children. A good example would be to give the "Headings" style a font setting of "sans-serif" so every heading would be in a san-serif font. Each individual heading would still get the size, color, underlining, etc. from the source document, but the font would be consistent throughout all the headings.

This structure can also be used to see if a document has used a style that is outside the scope of the intended tree. When a document is added it is scanned for styles. Any new styles will show up at the bottom of the Style Designer style tree, outside of the top level style. This will allow you to see any new, potentially incorrect, styles that have been used in a document.

Style Grouping by Domain

This example style tree take the approach that styles are grouped and organized according to their respective purpose according to the domain. This kind of organization is helpful in finding inconsistancies within the output because the output cab be easily compared with the desired look and feel represented in the Style Designer tree.:

EmphasizedContent
  SansSerif
    CoreInstruction
    SideNote
    SimpleTopic
      CriticalTodoAction
      RecommendedAction
      FunnyQuote
  Serif
    Summary
    Note
    Legalese

In this example styles are created that help to describe a look and feel or specify how styles pertain to a domain specific requirement. In this case the groupings might mimic those of a corporate style guide or some similar design document outlining marketing messages. The idea in this case is to provide organization based on an existing rules, so the output can be easily compared to the internal requirements of the organization.

Style Grouping Summary

The idea behind the examples provide is through using the tree model found in the Style Designer, styles can be applied more effectively in order to create better output. In this case, "better" can be anything from well designed documentation to more consistent application of styles throughout the output due to the organizational keys provided in the Style Designer.

[CSS]

"Cascading Style Sheets"