CSS for RoboHelp

Who Am I?

Neil Perlin - Hyper/Word Services.– Internationally recognized content consultant.– Help clients create effective, efficient, flexible

content in anything from hard-copy to mobile.– STC’s lead W3C rep – ’02 – ‘05.– Certified – RoboHelp, Viziapps, other tools.

Contents 1 – Intro to CSS 2 – CSS Style Categories 3 – Pre-RH8 CSS Troubleshooting 4 – Some Best Practice Recommendations

Intro to CSS

Why Use Style Sheets?

…instead of local formatting?– Efficiency – Style changes apply across the entire

project.– Consistency – If all authors use one CSS (correctly),

everyone’s outputs standardize.– Extensibility – Styles may form the basis of other

types of processing, like Word file import into RH.

What’s a Style?

A named set of properties for a type of content.– Like H1 style set as 16pt, Navy, Arial, Bold.

» You must apply a style, although RH does that for you in some cases.

» But if you then have to change a property, you need only do so once, for the style – the change applies everywhere you applied the style.

What’s a Style Sheet?

A file that contains all (ideally) styles and their properties for all topics in a project.

Called a cascading style sheet, or “CSS”.– Like Word’s styles conceptually but uses different

technologies and works in different ways.

“Cascading” – Definition 1

“Cascade” of three ways to apply styles.– External – CSS file that each topic links to.

» Highest efficiency, lowest priority.– Embedded – Stored in topic to which styles apply.

» Middle efficiency, middle priority.– Inline/Local – Formatting via text formatting

toolbar.» Lowest efficiency, highest priority.

“Cascading” – Definition 2

New “child” styles inherit settings from their “parent” styles.– For example, if Arial is the font for the Normal style

and you create a style based on Normal, that new style uses Arial.

– So defining as many properties as possible in parent styles = efficient CSS development.

How To Use Styles and CSSs

Apply the CSS to all your topics.– You can apply different CSSs to different topics but

this is rare. Then apply styles from the CSS to types of text.

– H1 style to all level 1 heads, H2 to subheads, etc.– Tedious, but RH applies basic style types – H1 and

Normal – for you.

Trends – CSS2 vs. 3 CSS3 is an extension of 2. CSS2 syntax and commands are still valid. CSS3 adds more options, supports HTML5.

Trends – Relative Sizes We’re used to point-based sizes – 72pt = 1” –

from our print experience – familiar and simple.

Older RH features use pts by default, but…

Problems With Points Points being fixed, are fine for print output but

have two problems in online outputs:– Text in pts can’t be resized by a browser user.– Text in pts can’t be resized automatically by a

browser. Instead, use:

– % – Based on the default size of normal on any given browser – 100%.

– Em – Based on the height of the uppercase M in each browser’s font set.

Why Relative Sizes? An image at an absolute width in

a too-narrow space.– Note the horizontal scroll bar.

And at a relative width in that same space.– No horizontal scroll bar; the

50% width makes a browser show the image at 50% of the available space – “relative”.

– In effect, each browser handles that formatting for you.

Trends – Media-Specific Styles

A “normal” CSS assumes you want to use one set of format properties for the output.

CSS2 added “media types” that let you use one CSS but define alternative style properties for different broad categories of media.

CSS3 adds “media queries” that let you target different style properties to different devices based on their specific properties, like screen size.– Supported in RH10.

CSS Coding In One Slide Structure of a style rule.

– Selector {property:value;} » Where property: value = “Declaration block”» Such as h2 {color: red;}

– Can apply multiple properties to multiple selectors at once.

» h1, h2 {color: red;} or» h2 {color: red; font-family: Verdana;} or» h1, h2 {color: red; font-family: Verdana;}

Working in RH10 You’ll rarely work at the code level unless you’re the

group CSS heavy. Instead, you’ll work in RH’s GUI mode using, mainly,

two features:– Styles editor.– Styles and Formatting pod.

Styles Editor

Create and edit styles in the Styles editor.

Styles and Formatting Pod

How to apply styles? The Styles and Formatting pod.– Click in a topic and select

View > Pods > Style Pod or select Format > Styles.

– Can see all styles or subsets.

CSS Style Types

Style Types

Paragraph – For chunks of content that end with a hard return – e.g. paragraphs.

Character – For chunks of content shorter than a paragraph – e.g. word or characters.– Like defining bold as a character style applied from

the CSS instead of using the formatting toolbar.

Style Types

Hyperlink (10) – Pseudo-classes, twisty, block.– Pseudo-class – Add effect to link styles based on the

“state” – link visited, hover, active, etc. – Twisties – Add special images for

open vs. close states of items like dropdowns.

– Block – Force the link to occupy the full line, unlike inline style which fits a link into an existing line of text.

Style Types

Image (10) – For size, margin, border, and float.– Float – New-ish concept for relative positioning of

text and graphics without using two-column tables as positioning aids.

– Insert a graphic, type the text after the graphic, then center or left-/right-align the text programmatically in relation to the graphic.

Style Types

Div (10) – For custom “division” of content.– To create a container for 2+ similar or dissimilar

elements and apply a style to them all at once. Table – What it sounds like. List – For custom bulleted/numbered lists. Multi-level List – For creating nested lists in

one shot, instead of once per level.

What About RH 8 and 9? The Styles editor and Styles and Formatting pod

are both similar to 10. But 10 adds the Image, Div, and List styles and

Media Queries feature to the Styles editor and Styles and Formatting pod.

Pre-RH8 Troubleshooting

Bullet Issues

RH has been around for so long that legacy projects often have many style problems.

One problem is that bulleted and numbered lists created in 7 or earlier break in RH 8+.– Text loses its indent in numbered lists.– Bullets use the wrong format or display as numbers.

What’s Going On?

RH moved from HTML to XHTML in 8. XHTML is almost identical to HTML but based

on XML with stricter code syntax.– Unlike HTML, which has syntax rules but doesn’t

enforce them. In effect, we’ve created lists incorrectly for

years and gotten away with it, until now.

Doing It Right Going Forward

Can no longer create list styles by opening Styles dialogbox, selecting New > Format > Bullets and Numbering, and a bullet or number.

Instead…

Doing It Right Going Forward

Open Styles and Formatting pod, click Create New Style icon, select List Style, name the style.

When the Styles dialog box opens, select a list type.

Specify the settings, inc. the bullet or number icon.

Same Bullets and Num- bering dialog box then opens but for list style.

Finish defining the style.

Fixing Legacy Material

Replace old styles with new – here’s how.– Open old project in RH 8, 9, or 10.– Create new, correct, list style(s).– Open the first topic with a pre-RH 8 list and

highlight the first list item.– Go to HTML view and copy the bullet code.– Search for and replace old list code with new.– Repeat for each type of list – sub-bullets, etc.

Some Best Practice Recommendations

Some Best Practices…

At a minimum…– Define your CSS before starting a project and then

DON’T MESS WITH IT.» Unless you have to…

– KISS.– Document it.– Stay out of the code.– Put all style code in the CSS, none in the topic.– Don’t change de facto standards like link code

settings.

Hyper/Word Services Offers…

Training • Consulting • DevelopmentRoboHelp • RoboInfoRoboHelp 10 HTML5/Mobile • AppsCSS • XMLSingle sourcing • Structured authoring

Thank you... Questions?

http://adobe.ly/YhbQmwHyper/Word Services

978-657-5464nperlin@nperlin.cnc.netwww.hyperword.com