Wouldn’t it be nice if you could have pixel precise layouts in ToolBook HTML using css?
Well now you can.
This sample demonstrates how one can use an external css style sheet to dynamically change the visual appearance of ToolBook content when published to HTML.
And the best part? This requires no post "publish to HTML" edits in the published files.
Let’s look at the css ToolBook sample
See the example here.
On page 1 you click the "Load style sheet" button to dynamically load the style sheet where as on page 2 it happens on load page so there is no need to do anything. (in real life you’d probably want to do this on load page as not to trouble the user to change the layout, although I can see an application for this in increasing the accessibility of content, by allowing the learner to chose the visual appearance of their liking)
- When you click the button you should notice that:
- the line height of the text increase
- all the text becomes small caps
- the text is justified
- and that the top padding of the text increases.
I chose these css properties to prove the point, not for necessarily for aesthetic reasons :-))
Here is how it works
On the button there is an action editor code which uses execute script to call a function in an external JavaScript file.
The name of the style sheet is passed as a parameter to the JavaScript function which takes care of linking in the style sheet.
The css file is included in a hidden file placeholder on this page. This automatically ensures that the file is copied to the media directory when the file is published to html. (For some reason my trick described here "Adding files to HTML media directory" doesn’t work with css files)
Note the required JavaScript file is linked into the book in the Book properties on the web tab.
Using CSS with You ToolBook HTML, What next?
If you want more granular control over how things are formatted in ToolBook HTML I recommend you:
- Brush up on your css skills (especially on selectors) and,
- Use a tool like firebug for Firefox to look at the HTML ToolBook generates
- Add HTML which is marked up the way you like (read my article “Dynamic HTML: HTML tables in ToolBook”) and then add css selectors to control that.
The caveats
This sample does not work when the content is set to popup. (Not because that’s impossible, I just haven’t had time to play with that).
I have tested this on Firefox 1.8.1.15 and IE7.
This approach works with obfuscation turned on or off in the publishing settings, however you should disable the option to "rename media to ensure uniqueness", as leaving it on will result in the style sheet file being renamed.
Note that ToolBook uses a lot of inline styles in its HTML and due to the rules of specificity you will not be able to override those values by including them in an external stylesheet. In most cases this will not be a problem as you can set the properties in ToolBook using the property sheet.
Have fun
Tomas
Ps. You can Download the sample (DynamicCSS (9)) from the download area. It contains the TBK file and the relevant css file and JavaScript as well as the published files.