Random thoughts from an unusual company

Thing-a-Day 1: Overriding Rich Text Inline Styles

Tim Davis  13 July 2009 08:00:00
Recently I have been working on a nice web-based Domino development and it occurred to me that over the years I have built up a bunch of tricks for handling Notes stuff on the web and making it look all Web 2.0. So this week I thought I'd share a few of them in case anyone finds them useful.

I'll do one a day, starting today with how to override the inline styles that Domino can put into rich text when it displays on the web.

Its easy enough to override the basic HTML attributes like font size="12pt" face="verdana"  with a css stylesheet. Something like this:

    font {font-size:12px;}

The problem is that Domino can put inline CSS styles inside the font tags it generates, such as font style="font-size: 12pt".

Why is this a problem? Because these inline styles take precedence over styles from stylesheets, so you can't override them to control the look of your website. Or can you?

The trick is to use the !important property in your stylesheet. This tells the browser to apply your stylesheet style over the inline style generated in the HTML.

So you would use something like this:  

    font {font-size:12px !important}

You will no longer be at the mercy of users setting bizarre font sizes and colours in their rich text.

We find many clients have an embargo on the use of third-party javascript libraries, so next I will talk about how to use some Web 2.0 effects without resorting to dojo, the yahoo ui, etc.

Tomorrow: Better dialogs.

1Tim Davis  13/07/2009 10:01:06  Thing-a-Day 1: Overriding Rich Text Inline Styles

An update: My original version of this post had the < and > around the HTML examples, and the Blog template passed these through, so we had bizarre font sizes showing, which is kind of the problem I am addressing in my post!

I haven't looked at the design of the template, but it also reminds me of another issue which is to do with writing to the page using javascript, namely the difference between innerText/textContent and innerHTML.

InnerText (IE) and textContent (Mozilla) will display your content with any special characters like this escaped, so you can include code examples as is. Using innerHTML will make the browser render any HTML in your content. Either could be appropriate depending on what effect you are trying to achieve. Here in a blog, I would want to use innerText/textContent, while for non-rich text content, I would want innerHTML.

Rich text on the web really is a minefield. You could always use Ben's CoexEdit...

2Richard Hogan  13/07/2009 13:20:40  Thing-a-Day 1: Overriding Rich Text Inline Styles

Thasks - great tip