Styling text and paragraphs
There are numerous ways to format text in a template. You can apply a certain font, make text bold, transform it to uppercase, center it, color it, etc.
This topic explains how to apply local formatting to text. It is recommended though, to format text using style sheets; see Styling and formatting and Styling templates with CSS files.
Formatting text and paragraphs locally
An intuitive way of formatting text locally is by using the toolbar buttons: select some text, or an element that contains text (see: Selecting an element) and click one of the toolbar buttons to make it bold, center it, create a numbered or bulleted list, etc.
To quickly change a paragraph into a Heading, Address or Pre element, select the paragraph (see: Selecting an element) and on the Format menu, select the appropriate element.
More local formatting options are available in the Formatting dialogs; see below.
Formatting text
To open the Text Formatting dialog, select some text and then select Format > Text. In the Text Formatting dialog you can set:
- The font, font size, color and background color:
- Font: see also: Fonts. This is equivalent to setting the
font-family property in CSS. Font size. Enter the size in a measure, named size or percentage. This is equivalent to setting the font-size property in CSS. Color: this the color of the text. Select a named font color as defined in the Edit Colors dialog (see Colors) or click the colored square to create a new color or to enter a color manually. The color value must be a valid HTML color name or hexadecimal color code. This setting is equivalent to the color property in CSS. Background color: this is the background color of the text. Select a named font color as defined in the Edit Colors dialog (see Colors) or click the colored square to create a new color or to enter a color value manually. a valid HTML color name or hexadecimal color code. This setting is equivalent to the background-color property in CSS.
- The spacing between letters and words and the way the text is wrapped:
- Letter Spacing: The space between characters in a text in measure or percentage. This is equivalent to the letter-spacing property in CSS.
- Word Spacing: Set the space between each word in a text in measure or percentage. This is equivalent to the
word-spacing property in CSS. - Whitespace: Specify how the text wraps. See CSS White-Space for details. This is equivalent to the
white-space property in CSS.
- The style of the text:
- Bold: Sets the
font-weight to 700. - Italic: Sets the
font-style to italic. - Underline: Sets the
text-decoration to underline. - Strikethrough: Sets the
text-decoration to line-through. - Subscript: Sets the
vertical-align to super. - Superscript: Sets the
vertical-align to sub. - Capitalize: Sets the
text-transform to capitalize. - Uppercase: Sets the
text-transform to uppercase. - Lowercase: Sets the
text-transform to lowercase. - Small-caps: Sets the
font-variant to small-caps.
All settings in the Text Formatting dialog are in fact CSS style rules. When you change one or more settings, the selected text gets wrapped in a Span element that has an inline style tag containing the selected setting(s). Click the Advanced button to add CSS properties and values to the inline style tag of the Span directly. For more information about CSS, see Styling and formatting.
Formatting a paragraph
Through the Paragraph Formatting dialog you can set the line height and first indent, among other things. It also lets you add spacing and a border; see Spacing and Border.
To open the Paragraph Formatting dialog, select a paragraph (see: Selecting an element) or place the cursor in a paragraph, and then select Format > Text.
On the Formats tab you can set:
- Line-height: Specify the height of each line in the paragraph's text, in a measure or percentage. Note that this is not the spacing between lines, but rather the complete height of the line itself including the text. This is equivalent to the
line-height property in CSS.
- Align: Select how text should be aligned, such as left, center, right or justify. Equivalent to the
align property in CSS.
- First Indent: Specify the indentation of the first line of the paragraph. Equivalent to the
text-indent property in CSS.
- Display: Select how to display the element. This can also be used to hide an element completely using the none option. See CSS Display. Equivalent to the
display property in CSS.
- Direction: Select in which direction text should be displayed (left to right, right to left, or auto). Useful for certain languages such as Arabic, Hebrew, etc. This is equivalent to the
dir HTML attribute.
- (Page) breaks: these settings are only useful in Print , as only Print sections have pages.
- Before: Sets whether a page break should occur before the paragraph. This is equivalent to the
page-break-before property in CSS; see CSS page-break-before property for an explanation of the available options. - Inside: Sets whether a page break is allowed inside the paragraph. Equivalent to the
page-break-inside property in CSS; see CSS page-break-inside property for an explanation of the available options. - After: Sets whether a page break should occur after the paragraph. Equivalent to the page-break-after property in CSS; see CSS page-break-after property for an explanation of the available options.
- Widows and orphans: Keeps lines of text together; see Preventing widows and orphans for an explanation.
Click the Advanced button to add CSS properties and values to the inline style tag directly.
Remove local formatting from text
Layout buttons and options on the Format menu add inline style tags to the text. Style tags can look like this: <b>...</b> or like this: <p style= "color: red;" >.
Inline style tags have priority over styles defined in a CSS file. For example, when a formatting rule in a style sheet colors all paragraphs green, a paragraph with an inline style tag to color it red would still stay red. So, when a rule in a style sheet doesn’t seem to work, an inline style tag can be the culprit. In that case you might want to remove the local formatting.
To remove local formatting:
- Select the formatted text and click the toolbar button Remove Formatting. Doing this removes inline style tags from the selection.
- Alternatively, click the Source tab at the bottom of the workspace (or select View > Source View) to manually remove style tags.
When you select an element in the template, the Styles pane will show which styles are applied to that element. The link behind the style will take you to the place (the Source tab, or a CSS file) where that style is defined.
|
|