|
|
|
|
|
Modifying the Appearance of Characters
In general, ePublisher generates output based upon the properties of the content from the original source document, thus mirroring the look and feel of the original text. However, if you prefer to modify the appearance of your online content to reflect a unique look, you can do so without having to modify your original source documents.
In order to modify the appearance of individual characters or words within a paragraph, you will need to use the Style Designer. Through the Style Designer, you will be able to adjust the look and feel of any character styles used in the original source document without having to modify the appearance of the entire paragraph. In this way, you will be able to optimize styles for print (i.e., the style used in the source document) and optimize the content for online media (i.e., the style is redesigned to appear in a browser).
The Prototype Style
The Prototype style is the parent to all other styles. When you set a property for Prototype, every other style inherits the value of that property. You can use Prototype to quickly apply a property change to all styles within your project.
Depending on how your styles are arranged in your source document, you may not have one style as the base, or parent, style on which all others are based. In Microsoft Word, usually all styles are based on Normal, but that may not always be the case. The Prototype style ensures that each of your Microsoft Word styles will have a parent style within your WebWorks ePublisher Pro project.
Setting the Background Color of a Character
In terms of the CSS box model, "background" refers to the background of the content and the padding areas. If you modify the padding for a particular character style to increase or decrease in size, you will also see the background color area increase or decrease in size.
To set the background color of a character:
|
2. |
From the Properties tab, click on Background. |
|
3. |
Select a color from the color chooser in the drop-down menu, or, if you know the RGB value of a color, enter that value in the Color text field. |
Setting the Border Style and Color of Characters
Borders are lines that can be drawn around any or all of the four sides of a character. In terms of the CSS box model, increasing or decreasing padding for a character will increase or decrease the space between the character and the border.
Keep in mind that not all browsers render border styles the same way; some may not differentiate dotted lines from solid lines, for example, or the size and spacing of the dots in a dotted line may appear differently between browsers and operating systems.
To set the border style and color of a character:
|
2. |
|
3. |
From Border:, choose which sides of the character will display a border. |
|
4. |
From Color:, select a color from the color chooser in the drop-down menu, or, if you know the RGB value of a color, enter that value in the Color text field. |
|
5. |
From Style:, choose the type of border you wish to display (e.g., solid line, dotted line, etc.). |
|
6. |
From Width:, choose the width of the border. |
Setting the Font for a Character
Setting fonts for online output is an important step in ensuring that your content will be properly displayed for your end users. Because many browsers and online Help systems use only the fonts available on the end user’s computer, you may not be able to specify specific fonts (e.g., Times New Roman), as some computer systems do not have some fonts installed. The best method for setting a font is to choose a font family and not a specific font, since not all fonts are installed on all computers.
To set the font of a character:
|
2. |
|
3. |
From Family:, click on the more options |
button. A new window will open.|
4. |
Select generic font families, or choose specific fonts that are installed on your system. After you make your selections, move them to the Selected fonts column by clicking on the arrow. Only fonts that appear in the Selected fonts column will be used for your output. |
|
5. |
Click OK. |
|
6. |
From Size:, select a size of the font from the drop-down menu, or enter in a custom value and unit. |
|
7. |
From Variant, choose Normal or Small caps. |
|
8. |
From Weight:, choose the weight (e.g., normal, bold, light) of the character. |
Adjusting the Space around Characters
There are two different ways that you can adjust the white space around characters in all directions: with Margin or with Padding. Alternatively, you can adjust spacing in a horizontal frame by adjusting the kerning.
In terms of the CSS box model, modifying the padding property will adjust the space inside of the border area; that is, if you have created a border (or background color) for a character and you increase the size of the padding, the border will, in effect, move away from the character.
Modifying the margin property will adjust the space outside of the border area; that is, if you have created a border for a character and you increase the size of the margins around the character, the border will remain the same distance from the character, although the position of the character may be altered since there will be an increase of white space between the modified character and other elements on the page.
To set the margin of a character:
|
2. |
|
3. |
Enter a value and select a unit of measure for the Left, Right, Bottom, or Top margin. |
To set the padding of a character:
|
2. |
|
3. |
Enter a value and select a unit of measure for the Left, Right, Bottom, or Top margin. |
Setting the Color of Characters
In general, ePublisher generates output based upon the properties of the content from the original source document, thus mirroring the look and feel of the original text. However, if you prefer to modify the appearance of your online content to reflect a unique look, you can do so without having to modify your original source documents.
To set the color of a character:
|
3. |
Under General, select a color from the Color drop-down menu, or, if you know the RGB value of a color, enter that value in the Color text field. |
Adjusting the Kerning between Characters
In general, ePublisher generates output based upon the properties of the content from the original source document, thus mirroring the look and feel of the original text. However, if you prefer to modify the appearance of your online content to reflect a unique look, you can do so without having to modify your original source documents.
To set the space between letters of characters:
|
3. |
Under Spacing, enter a custom value and unit of measure for Letter spacing to modify the space between letters. |
Underlining or Creating a Strike-through of Characters
To underline characters, or to create other similar types of modifications (such as drawing a line above, below, or through characters), you will need to control the text-decoration property.
To set the text-decoration property:
|
2. |
Underline style – Produces a line under the character.
Overline style – Produces a line above the character.
Line through style – Produces a line through the middle of a character; sometimes called a strike-through.
Creating Subscript or Superscript Characters
In general, if you have already created characters in your source document that are set as either superscript or subscript text, output generated with ePublisher will essentially mirror the look and feel of the original text. However, if you prefer to modify the appearance of your online content, you can do so without having to modify your original source documents.
To set the vertical alignment of characters:
|
3. |
Under Alignment, modify the value for Vertical: to reflect how you want to align the paragraph. Choose Sub for subscript alignment or Super for superscript alignment. |
Modifying Characters for Bidirectional Languages
In some documents, in particular those written with the Arabic or Hebrew script, and in some mixed-language contexts, text within a single paragraph may appear with mixed directionality; that is, some characters are read from left to right, while others within the paragraph may be read from right to left. This phenomenon is called bidirectionality, or "bidi" for short.
If a document contains right-to-left characters, and if the browser is able to display the language with the proper character set (i.e., not arbitrary substitutes such as a question mark, a hex code, a black box, etc.), the browser must apply the bidirectional algorithm.
ePublisher Pro allows the designer of the document to be able to ensure that the browser will display the content correctly by offering the Unicode direction and Unicode-bidi (bidirectional) properties.
If you prefer to have direct handling over a particular phrase, you can control any particular character style with the use of Unicode direction and Unicode-bidi.
To set the Unicode direction of a character:
|
2. |
|
3. |
Under Unicode, select one of the following from Unicode Bidi: |
Embed – This value allows the Unicode-bidi algorithm to choose when it would be appropriate to use the value chosen for Direction. Only the specific text that is read in a different direction will be modified; the rest of the paragraph is left in its default direction.
Bidi override – This value forces the characters to be displayed by the value chosen for Direction. All text in the paragraph is modified to reflect a different direction, completely overriding any other instructions to display the text in the default direction.
|
4. |
From Direction:, choose if the language should be read Left to right or Right to left. |
