Rh10 css presentation
-
Upload
neil-perlin -
Category
Technology
-
view
894 -
download
1
description
Transcript of Rh10 css presentation
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