Surfulater Content Style Issues

A few people have mentioned that sometimes content they capture from Web pages into Surfulater doesn’t display using the same styles used on the originating Web page. I want to explain why this occurs.

First let me say that if you capture complete web pages, this isn’t an issue. It only occurs with content displayed in the Surfulater content window, and that’s the key.

All content in Surfulater uses HTML. HTML has default styles which can be overridden by Cascading Style Sheets or CSS as commonly referred to. By styles I’m referring to things such as font size, color, bold, italic etc.

As an example lets look at how a paragraph style works. Text inside a paragraph tag <p> will either use a default style dictated by your Web browser, a style embedded in the web page or and style in an external style sheet. The last two cases override the browsers default style and cause all paragraph text to be displayed in some other style, a larger bold font for example.

Surfulater enables you to view all of the articles in a folder at once, which is a great feature that many people want and one that sets Surfulater apart from the competition. What this means however is that you are most likely viewing HTML captured from a whole range of Web sites, each with its own Cascading Style Sheet. So paragraph’s on one Web site may well be displayed with quite different styles to its next door neighbour .

This mix of styles (CSS) from different Web sites basically makes it very difficult, if not impossible for us to use the same styles as the original site, simply because they will all conflict with each other. For this reason we don’t even bother bringing across external CSS information when we capture selected content.

The story is quit different when we save complete Web pages though. In that case we are only ever dealing with a single web site and only ever display a single page from the one site at a time. We capture all embedded and external CSS when we capture the web page and use that in turn when we display the page again.

Surfulater does use its own Cascading Style Sheets, so we can offer a good degree of control over the styles used in the content window. At present we have two CSS’s. One is used when E-Mailing content from Surfulater (surfulater.css) and the other is used for the Content window and is embedded inside Surfulater. I plan to pull this out and make it an external file in a future release. This will enable styles to be set for headings, paragraphs etc. In fact my example above which used paragraph’s, wasn’t a very good one as heading tags are the ones that show up worst.

So the bottom line is we can improve on the current situation and will, however it is unlikely we’ll see the exact same styles as on the original web page, unless of course you save and attach the entire page!

Update 26 Nov 2005 Putting ones thoughts in writing often helps you to see things that were hidden away before. And such is the case here. I can now see a way clear to get the styles to match up correctly. I just need to write the code and see if I’m right.