2. 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.
3. Contents
1 – Intro to CSS
2 – CSS Style Categories
3 – Pre-RH8 CSS Troubleshooting
4 – Some Best Practice Recommendations
5. 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.
6. 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.
7. 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.
8. “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.
9. “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.
10. 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.
11. Trends – CSS2 vs. 3
CSS3 is an extension of 2.
CSS2 syntax and commands are still valid.
CSS3 adds more options, supports HTML5.
12. 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…
13. 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.
14. 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.
15. 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.
16. 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;}
17. 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.
18. Styles Editor
Create and edit styles in the Styles editor.
19. 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.
21. 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.
22. 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.
23. 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.
24. 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.
25. 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.
27. 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.
28. 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.
29. Doing It Right Going Forward
Can no longer create list styles by opening
Styles dialog
box, selecting
New > Format
> Bullets and
Numbering,
and a bullet or
number.
Instead…
30. 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.
31. 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.
33. 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.
34. Hyper/Word Services Offers…
Training • Consulting • Development
RoboHelp • RoboInfo
RoboHelp 10 HTML5/Mobile • Apps
CSS • XML
Single sourcing • Structured authoring
35. Thank you...
Questions?
http://adobe.ly/YhbQmw
Hyper/ ord S
W ervices
978-657-5464
nperlin@nperlin.cnc.net
www.hyperword.com
