|
|
|
|
|
Modifying the Appearance of Paragraphs
One of the most common modifications that you will likely make to your online output is affecting paragraphs of text. You can modify the appearance of individual paragraphs by first selecting the paragraph in the Preview pane, and then adjusting the properties associated with that paragraph through the Document Designer.
You can also affect the appearance of paragraphs with the Style Designer by selecting the style that is associated with a set of paragraphs. This will allow you to globally change all paragraphs with this style, giving you a very efficient method of controlling large sections of your content.
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 Microsoft Word, 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 Paragraph
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 paragraph or paragraph 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 paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
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 a Paragraph
Borders are lines that can be drawn around any or all of the four sides of a paragraph. In terms of the CSS box model, increasing or decreasing padding for a paragraph will increase or decrease the space between the paragraph 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 different between browsers and even operating systems.
To set the border style and color of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
From Border:, choose which sides of the paragraph 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 Paragraph
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 use specific fonts (e.g., Times New Roman), as some computer systems may not have the font installed.
Instead, you may find it helpful to specify a font family, thus ensuring that a font of a similar type, even if it isn’t the exact one you expect, will be used. By selecting a font family, you are ensuring, for example, that a sans-serif font will be used.
To set the font of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
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 paragraph. |
Setting the Width and Height of a Paragraph
In regards to the CSS box model, modifying the width and height of a paragraph will adjust the content box. Thus, by modifying the width and height of a paragraph, you are essentially defining the space that the paragraph will use.
For example, if a paragraph ordinarily spans the entire page, but you then adjust the width to 250 px, the paragraph will now span only 250 pixels.
To set the width and height of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
For Width:, enter a custom value and specify a unit of measure. Leave this blank if you do not need to modify the paragraph with this property. |
|
4. |
For Height:, enter a custom value and specify a unit of measure. Leave this blank if you do not need to modify the paragraph with this property. |
Modifying the Positioning of a Paragraph
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 positioning of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
From Type:, define the values you will be using. The effect of the values you use for Left, Right, Top, and Bottom will be defined by the type of position scheme you choose: |
Static – The paragraph will reside in the same location as it would normally occupy in a normal flow; thus, the Left and Top properties do not apply.
Relative – The paragraph's position is offset from its normal position, but ignores any other objects that are positioned outside of the normal flow (i.e., with the Absolute value).
Absolute – The paragraph’s position is not considered part of the normal flow, which means that it is not considered in the layout of objects that follow (i.e., Absolute paragraphs do not affect objects using the Static or Relative value).
|
4. |
From Left:, enter a custom value and unit of measure. This property specifies how far a paragraph's left edge is offset to the right of the left edge of the paragraph's containing block. Percentages refer to the width of the containing block. Leave this blank if you do not need to modify the paragraph with this property. |
|
5. |
From Top:, enter a custom value and unit of measure. This property specifies how far a paragraph's top edge is offset below the top edge of the paragraph’s containing block. Percentages refer to the height of the containing block. Leave this blank if you do not need to modify the paragraph with this property. |
|
6. |
From Right:, enter a custom value and unit of measure. This property specifies how far a paragraph’s right edge is offset to the left of the right edge of the paragraph’s containing block. Percentages refer to the width of the containing block. Leave this blank if you do not need to modify the paragraph with this property. |
|
7. |
From Bottom:, enter a custom value and unit of measure. This property specifies how far a paragraph's bottom edge is offset above the bottom of the paragraph's containing block. Percentages refer to the height of the containing block. Leave this blank if you do not need to modify the paragraph with this property. |
|
8. |
From Float:, set this value to Left, Right, or None. To float a paragraph means that you have shifted it to the left or right on the current line. This may mean that content may flow along a paragraph’s side (or be prohibited from doing so by using Clear). If the content of the paragraph spans the width of an entire page, you may not see any noticeable change unless you assign an appropriate width (via the Width property). Leave this blank if you do not need to modify the paragraph with this property. The float property can be useful to create pull quotes or sidebars and can create interesting effects when combined with border styles. |
|
9. |
Clear: This property indicates which sides of a paragraph may not be adjacent to an earlier floating box. When the property is set on floating paragraphs, it results in a modification of the rules for positioning the float. Leave this blank if you do not need to modify the paragraph with this property. |
Left – The top margin of the paragraph is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
Right – The top margin of the paragraph is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
None – There is no constraint on the paragraph's position with respect to floats.
Both – The paragraph is moved below all floating boxes of earlier elements in the source document.
|
10. |
Display: This property controls how CSS boxes are generated for the selected paragraph. More specifically, the Display property specifies the box’s type. Leave this blank if you do not need to modify the paragraph with this property. |
None – This value causes a paragraph to generate no boxes in the formatting structure (i.e., the paragraph is not displayed and is treated as though it doesn’t exist).
Block – This value causes a paragraph to generate a principal block box.
Inline – This value causes a paragraph to essentially take on the layout properties of the previous element.
List item – This value causes a paragraph that would not ordinarily output list-item output (e.g., a bullet or a number) to include a list-item output if it is inside of a list.
|
11. |
From Z-Index, enter an integer (negative values are allowed), which corresponds with the position of the paragraph on the z-axis. Elements with a lower value (e.g., 1) will be displayed behind other elements with a higher value (e.g, 2). Leave this blank if you do not need to modify the paragraph with this property. |
Adjusting the Space Around a Paragraph
There are two different ways that you can adjust the white space around a paragraph: with Margin or with Padding.
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 paragraph and you increase the size of the padding, the border will, in effect, move away from the text in the paragraph.
Modifying the margin property will adjust the space outside of the border area; that is, if you have created a border for a paragraph and you increase the size of the margins around the paragraph, the border will remain the same distance from the text of the paragraph, although the position of the paragraph may be altered since there will be an increase of white space between the modified paragraph and other elements on the page.
To set the margin of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
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 paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
From the Properties tab, click on Padding. |
|
3. |
Enter a value and select a unit of measure for the Left, Right, Bottom, or Top margin. |
Setting the Text Color of a Paragraph
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 text color of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
Under the General properties, 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 Letters and Words of a Paragraph
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 or words in a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
Under Spacing, enter a custom value and unit of measure for Word spacing to modify the space between words. |
|
4. |
Enter a custom value and unit of measure for Letter spacing to modify the space between letters. |
Adjusting the Space between Lines of a Paragraph
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 lines in a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
Under Spacing, enter a custom value and unit of measure for Line height to modify the space between lines inside of the paragraph. |
Underlining or Creating a Strike-through of a Paragraph
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 underline a selected paragraph, or to create other similar types of modifications (such as drawing a line above, below, or through a paragraph), you will need to control the text-decoration property.
To set the text-decoration property:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
Underline style – Produces a line under the paragraph.
Overline style – Produces a line above the paragraph.
Line through style – Produces a line through the middle of a paragraph; sometimes called a strike-through.
Setting the Horizontal or Vertical Alignment of a Paragraph
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 horizontal alignment of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
Under Alignment, modify the value for Horizontal: to reflect how you want to align the paragraph. |
To set the vertical alignment of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
Under Alignment, modify the value for Vertical: to reflect how you want to align the paragraph. |
Setting the Indentation of a Paragraph
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 indentation of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
3. |
Under Flow, enter a custom value for Indentation. |
Modifying Paragraphs 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.
To set the Unicode direction of a paragraph:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
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. |
Creating Custom Bullets
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 create custom bullets:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
|
a. |
Press F12 on the keyboard to open the User Files directory. Ensure that the image you want to use as your background image is present in this directory. If it isn’t, you will need to copy the image to this directory. |
|
a. |
Enter in the special character in the Text: field. Special characters can be entered with their Windows ALT key code. |
|
b. |
In the Separator: field, enter the type of separator (e.g., a space, a non-breaking space, a colon, etc.) that you would like to use between the bullet and the beginning of the first line of text. |
|
c. |
To modify the appearance of the special character, you can use any character style that already exists in your project. To associate this character style with your custom bullet, choose the character style that you would like to use from the Character Style: drop-down menu. |
