A content versus presentation paradox

The topic under discussion

The concept of using a mark-up language like HTML to supply content, and a style control language like CSS to suggest presentation, is well known.

The question posed by this article isn't whether to try to separate concerns such as presentation & content. That is a given. The questions are where the separation should be, and how do we recognise it. That is not obvious.

Process versus task

A discussion about "content" versus "presentation", and the need to keep these separate, is typically about how to write the HTML (or other mark-up) that is published on the web. There is widespread agreement that good HTML concentrates on identifying the content in a well-structured way, while presentation is the domain of the CSS (style sheet). But this takes a very narrow view of the issue!

With inherently visual material such as a photograph, presentation is the concern of the whole process from (at least) taking the photograph to when it is seen by the viewer. What the HTML might consider to be content may have considerable amounts of presentation in it. The final task, where the user agent such as a browser combines the HTML with the CSS to build a display on a screen, is simply one task, in the overall process, that needs to be sympathetic to what has gone before.

The pages identified below illustrate this, by showing how there can even be choices about where identical-looking presentation can be added to the original material. In all the examples below, the presentation feature (borders to the photograph) are added using exactly same CSS, even where these borders are part of the final JPEG content.

The example here happens to be about photography. It could also be about other forms of visual material.

The original photograph

The following page shows a photograph of an original scene. It provides the context for everything else that follows.

In order to avoid diversions into whether other ways of adding presentation (such the features of a photo-editor) are "presentation" in the way that using CSS is presentation, the examples all use just one CSS whatever the stage. (In practice, CSS is rarely if ever used to control photo-editing).

Adding a border using CSS

There are (at least) 2 ways of adding a border to a photograph such as the above by using a CSS. One way results in the border being part of the JPEG image. The other adds the border to the JPEG image at browse-time. The following page shows both methods. (It also links to another page which avoids the use of a style sheet, so that it is clear what the JPEG images look like). In other words:

First image on page: JPEG > web, where typically the CSS will add a border.

Second image on page: JPEG + CSS to add a border > another JPEG > web, where no border will be added by the CSS.

(The method of adding the border before creating the second JPEG was to make it the content of HTML, display it using a browser, and then take a screen-copy. In other words, web authoring is used throughout the process, not just at the final stage).

Adding a second border using CSS

The page below is a simple, and fairly obvious, extension of the above. The three images are as follows:

First image on page: JPEG > web, where typically the CSS will add two borders.

Second image on page: JPEG + CSS to add a border > another JPEG > web, where typically the CSS will add a extra border.

Third image on page: JPEG + CSS to add a border > another JPEG + CSS to add another border > another JPEG > web, where no border will be added by the CSS.

Summing up

With inherently visual material, presentation is the concern of the whole process from conception to final viewing. Final web editing is not a task that should be thought of as having its own separate principles.

The reason I wrote this article was to counter a certain view that, because of the uncertainty about what would happen to presentation once the content had been put on the web, the author should not strive for perfectly-controlled presentation at all.

I accept that the user agent and viewer are in final control of what presentation happens (if any!) But that is not a reason for the author to give up all control. It may be worthwhile for a photographer to spend effort getting every pixel of the photograph looking right. So why isn't it also worth spending effort to ensure that, at least if the viewer uses suitable technology and default settings, the final presentation on the screen also looks right to the last pixel?

There are lots of uncertainties, and often the technology around is a handicap. But there are lots of uncertainties with inherently visual material anyway. The viewer may be colour blind, or be using the wrong spectacles. These are not reasons to give up. They are reasons to "control the controllables", to hope that such problems become rarer in future, and to deliver the best results for the largest number of people in the target audience within the budget available.


ps: what does "the HTML expects the CSS to add a border" mean?

There are statements in some of the pages above such as "the HTML for the image below expects the standard CSS to add 2 borders", or "the HTML for the image below does not expect the standard CSS to add a border". What do such statements mean?

This is perhaps a different paradox, or it may be an example of bad authoring! All photograph pages on this web site came from a standard template that passes, to the CSS, control of the positioning, background colour and image, and borders, etc. (And also control of the text style and colour for the description of the photograph). The standard CSS happens to add a simple border (but in principle it could do lots of other things, or for that matter nothing at all).

For the purposes of this discussion, sometimes no borders were required, sometimes 2 or even 3. Therefore the HTML that normally simply passed control to the CSS was deliberately "tweaked" so that the CSS would be persuaded to add more or fewer borders than it was designed for. In other words, if the CSS is in practice set up to add a border of a particular style, the HTML causes it not to, or to add 2 or 3 such borders. The HTML partly controls the number of times the CSS does what it was set up to do.

Hm! Hardly a complete separation between "content" and "presentation"!