Defining Text Styles

SAP Enable Now comes with several standard text styles, including paragraph styles, character styles, table styles, list styles, link styles, and block styles. If you have specific in-house styles that you are trying to match, you may want to define your own styles. This post explains how to do this.

Before you start, there are a couple of important things to bear in mind. The first is that these text styles are defined in a single Text Styles object in your Adaptable Resources. You can change the default Text Styles object, or define your own Text Styles object – but only one of these can be active at once. Which brings us to the next key point. If you create your own Text Styles resource, you need to set this as the default, so that you can use these styles in your text objects.

Another key point is that the defined text styles can be applied to text in any object that can hold text – including content object Descriptions and Short Descriptions, simulation bubbles, text elements, shapes, active areas, and so on. Significantly, they will be available in both simulation projects and Book Pages. You should therefore be careful to define styles that will work for both, or name them such that their purpose is easily identifiable (for example, BP_Heading 1 vs. SIM_Heading 1, and so on).

If you choose to create your own Text Styles resource, the best way to do this is to duplicate the default resource, and then change this new copy to meet your requirements. You will need to give it a readable name, and a unique identifier:

This will automatically be created within the Adaptable Resources group, but will only be created locally – you will need to Save to Server so it is available to other Authors.

You can now click on the Edit Text Styles button to be passed into the Text Style Editor, as shown below:

Styles are organized into categories (listed on the left of the Text Style Editor, with gray shading), according to what they apply to. Below each category, the currently-defined Styles are shown using their display format on the left. Select a Style to see the Style definition on the right.

Creating a new Style

Before we get into a description of the individual style properties, let’s look at how to create a new style.

1. Click on the New button.
   • If you have already created a custom Style, you can also select that and click Duplicate, but for some reason this feature isn’t available for the built-in styles.
   • You can also select an existing Style (custom or built-in) and click Inherit. This works the same way as Duplicate, but the new Style will have its Based On property (see below) set to the Style you selected (as opposed to using the same Based On property as the selected Style).
2. In the New Text Style dialog box:
   1. If you did not use Duplicate or Inherit, you will need to select the type of style you want to create in the Style Type field. Your choices are the same as the Categories listed on the left of the Text Styles Editor panel (except for Link Styles, which you cannot create).
   2. Enter a name for your new Style in the Display Name property. Keep this short, and try to put the distinguishing information at the front of the name, as the full name may be truncated in some dialog boxes and drop-downs.
   3. The CSS Class Name is automatically generated from the Display Name (and any similar Styles already defined). You can change this (to something unique within your Workarea) if necessary, but you should not normally need to.
   4. Click Ok to close the New Text Style dialog box.
3. Define the Style properties on the rightmost side of the Text Style Editor dialog box. Refer to the sections below for details of each.
4. Click Save to save your changes, then close the Text Style Editor dialog box.

(If you think you don’t need the descriptions of the different styles and want to skip the following sections, at least read the Publishing your Text Styles section at the end – there’s some important information there.)

Default Style

The first Style category is Default Style. This contains a single Style of Base, which defines some default settings that apply to all of the other Styles – by virtue of all other Styles being based on this Base style.

Of most significance here is the Font Family field. This provides a drop-down from which you can select from all of the fonts available on your PC or a couple of predefined ‘sequence’ definitions. This is an important concept, as Enable Now relies on a specified font being present on the device of the user who is displaying the content; it is not sufficient just for it to be on the Author’s PC. So, say you have a corporate font of GloboCorp Light, which is very similar to Verdana, which is a sans serif font, you could enter a font sequence of “GloboCorp Light, Verdana, sans serif”. This would then be interpreted at display time as: “Use GloboCorp Light if this is present on the (user’s) device, or Verdana if it is not, but just use the default sans serif font if Verdana is not available either”. This mechanism provises the best possibility of content being displayed as desired, when you can’t guarantee which fonts will be present on every user’s PC.

One more field in this section is worth noting. This is Editor Background Color. Unsurprisingly, this defines the background color of the Text Editor panel. If you use a light-colored default font you may find it helpful (or necessary) to set this field to a contrasting dark color. However, I would warn against using a light color for the default font, as this is used in a lot of places. If you use a Bubble with a dark background in your simulations, you might want to define a separate text style (called, for example, “Bubble Text”) just for this purpose, and define only that with a light font color.

Paragraph Styles

Let’s move on to Paragraph Styles. By default, SAP Enable Now ships with seven paragraph styles: one Normal paragraph, and then Heading 1 to Heading 6. Most of these properties are fairly self-explanatory, but there’s a couple that warrant closer inspection:

• Based on: This property is common to all Styles types, and specifies the Style on which the currently-selected Style is based. A Style will inherit all applicable property values from the Style on which it is based, although these can always be overridden in the individual Style definition. By default, this property is set to dgo_base, which is the Default Style > Base Style (see above).
• Line Height: This specifies the number of pixels between the baseline of successive lines within the same paragraph. Increasing this can provide more blank space between lines (not between paragraphs).
• Text Indent: This specifies the number of pixels to indent the first line of the paragraph.
• Margin | Line Start | Line End | Top | Bottom: The Margin property specifies the default amount of space (padding) to leave around all edges of the paragraph (in the inside of the containing object). This is specified in pixels. The remaining properties can be used to override the default Margin value, and apply a specific amount of space to the individual edges.
• Border Width | Border Width Left | Border Width Right | Border Width Top | Border Width Bottom: The Border properties work the same way as the Margin properties, but here there’s an additional wrinkle. If you only want a border on a specific edge, you need to set the (overall) Border property to 0, and then set the Border {Edge} property to the required width. If you don’t, the Border {Edge} property will be applied to all edges. This is likely a bug and may be fixed in a future release.
• Border Radius: This property is used to provide the border with rounded corners. The specified value represents the number of pixels down/in at which the edge should start curving. Be careful with using too large a curve, as the text within the element is not automatically moved to clear the edge – although obviously you can use the Padding properties to achieve this.

List Styles

Next, let’s look at List Styles. This is where things get interesting – and extremely useful. SAP Enable Now provides three default list styles: Bulleted, Numbered, and Upper Alpha (A, B, C…). Many of the available properties are self-explanatory or the same as Paragraph Styles (described above) so here we’ll confine our descriptions to those properties that are unique to List Styles.

First of all, notice that there is a Padding category and a Margin category, both of which contain largely the same properties. This is likely a bug, as they both do the same thing – within the context of a list item, but see Block Styles, below – and are cumulative if both specified. You should therefore use one or the other, but not both. By default SAP Enable Now specifies the list indentation in the Line Start property of the Padding category, so it makes sense to use this category. Note that the list bullet or number is displayed inside this indent. That is, the list item text will be indented by the amount specified here.

So on to the properties unique to List Styles:

• List Type: Specifies the type of number or bullet to use for items in this type of list. You have a choice of None, three types of bullet (Disc, Circle, Square), three types of numbers (1, 2, 3; i, ii, iii; I, II, III), and two formats of alphabetic characters (a, b, c; A, B, C).
• List Text: These two properties (Padding Top; Padding Bottom) allow you to specify additional space before and after the entire list – as distinct from the Paragraph > Padding settings, which apply to the line items themselves.
• List Level: These (four) sets of properties allow you to select the List Styles that should be used for nested lists below this List Style type. That is, if you consider the current List Style to be a ‘Level 1’ list, the ‘Level 2’ properties specify the style that should be applied to any subordinate list immediately below this one, ‘Level 3’ is applied to any subordinate list below that, and so on. You can also specify the amount (in pixels) by which each level should be indented – but be careful with this, as you will likely have already specified an indent on the (nested) List Style already; any indent you specify here will override any paragraph-level Padding. You will find these properties most useful if you define your own List Styles – for example, to use different list styles and/or font sizes for nested lists. This is best understood by way of a visual example, so please refer to the accompanying video, here.

Character Styles

SAP Enable Now provides several unique Character Styles, some of which are used automatically by Enable Now for its own purposes (notably, Glossary Link and Search Hit). All of these properties are self-explanatory so we won’t cover them in detail here.

Block Styles

SAP Enable Now provides one Block Style, which is used to display a box (optionally with a border) around the selected text. Note that this is a paragraph-level style, so will apply to the entire paragraph of the selected text (or the entire list, if you select one or more list items). Block Styles are distinct from Frames, which are defined as separate Adaptable Resources (and are therefore not covered in this article).

For Block Styles (like List Styles) there are both Padding and Margin categories – but here it makes sense to have both. The Padding properties specify the amount of space that should be left between the inside edge of the block and the text itself. The Margin properties specify how much space should be left between the outside edge of the block and the container object (or any other elements within the container object). This is best understood visually:

Here, you can see that Padding is set to 12px (on all edges) – which is reflected in the spacing on the inside of the yellow box, between the edge of the box and the text it contains. By contrast, the Margin is set to 20px, and only on the left (Line Start), which results in the entire box being indented by 20px from the edge of the Text Box object. Note that the width of the Border does not ‘eat into’ either the Padding or the Border; the Padding and Border are applied from the outer edge of any border.

Table Styles

SAP Enable Now provides two standard Table Styles – Border and Borderless. Table Styles aren’t particularly flexible (you can’t have banded rows, for example), but there’s still a few properties worth looking at.

As with Block Styles, there are both Margin properties – which can be used to provide space around the outside of the table, and Padding properties – which are used to provide space inside the actual table cells (between the inner border (if any) and the content of the cell).

In common with HTML, Enable Now’s Tables support separate definitions for ‘Header’ rows and ‘Body’ rows – so the Design, Border, and Padding categories apply to body cells, and Header Design, Header Border, and Header Padding categories apply (obviously) to header cells. Note, however, that the ‘Body’ properties will also be applied to the header cells unless ‘Header’ properties are explicitly defined (for example, a (Body) Padding of 10px will also be applied to the header cells unless a separate Header Padding property is specified. Also note that a ‘header’ can be applied to the first row and/or the first column (but only when the table is created; it can’t be changed later).

The only other property of note for Table Styles is the Border Collapse property. This works the same way as for standard HTML. If set to Separate, each table cell has its own border line (so you will see ‘double lines’ between adjacent cells) and if set to Collapse cells are separated by a single, common border line.

Link Styles

SAP Enable Now provides four predefined Link Styles, which are automatically applied to the various stages of Hyperlinks. You cannot define your own Link Styles, but you wouldn’t need to as you can just use Character Styles to achieve the same effect.

Publishing your Text Styles

By default, a custom Text Styles Resource will be created locally. For other users to be able to see it, you should Save to Server, and then Finish Editing. (You may also need to Release for Online Editing, as SAP Enable Now tends to keep Adaptable Resources checked out to the creator, to stop anyone from accidentally changing them.)

As noted above, only one Text Styles Resource can be ‘active’ at a time. You can make your custom Text Styles Resource the active Text Styles Resource by selecting it, and then clicking on the Set as Default button. You will only be able to do this if you are an Administrator. Once this has been done, the Resource will be listed in bold, to indicate that it is the default (and it will be listed in Configurations > Defaults > Text Styles). You will then see these styles listed in the Text Editor.