Download to read offline
Uploaded byNeil Perlin
Rh10 css presentation
This document provides an introduction and overview of CSS (Cascading Style Sheets) for use in RoboHelp. It defines key CSS concepts like styles, style sheets, and the cascading priority of styles. It also covers style types, best practices for CSS development, and troubleshooting issues with pre-RoboHelp 8 lists. The document is presented by Neil Perlin of Hyper/Word Services, an internationally recognized content consultant.
Rh10 css presentation
- 1. CSS fo r Robo He lp
- 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
- 4.
- 5. Why Use StyleSheets? …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 StyleSheet? 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” – Definition1 “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” – Definition2 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 UseStyles 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 – CSS2vs. 3 CSS3 is an extension of 2. CSS2 syntax and commands are still valid. CSS3 adds more options, supports HTML5.
- 12. Trends – RelativeSizes 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-SpecificStyles 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 InOne 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 FormattingPod 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.
- 20.
- 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 RH8 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.
- 26.
- 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 RightGoing 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 RightGoing 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.
- 32.
- 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