XML and CSS
HTML provides limited possibilities for the explicit formatting and positioning of text. The mechanisms that are provided--such as the FONT element or the ALIGN attribute--force the page designer to embed presentation-specific information within the document; a fact that makes it difficult to prepare documents for a variety of screen sizes, presentation modalities, and types of audiences. Because these limited features are not sufficient to achieve the formatting results desired by many Web designers, they commonly resort to using tables and various HTML coding "tricks." This presents many negative consequences, particularly because it is so difficult to maintain information content in HTML documents; the content is inextricably interwined with the format-related encoding. More sophisticated formatting capabilities have long been needed to support the many document types, ranging from marketing froufrou to legal documents to scientific journals.
Cascading Style Sheets (CSS) is a style sheet mechanism specifically developed to meet the needs of Web designers and users. CSS provides HTML with far greater control over document presentation in a way that is independent of document content. CSS style sheets can be used to set fonts, colors, whitespace, positioning, backgrounds, and many other presentational aspects of a document. It is also possible for several documents to share the same style sheet, which allows users to maintain consistent presentation within a collection of related documents without having to modify each document separately.
The rationale for XML is discussed at length in other papers in this issue; we will thus restrict our introduction to the observation that, in combination, XML and CSS can once again simplify document creation. XML uses markup to describe the structure and data content of a document, making it easy both for authors to write it and for computer programs to process it. CSS, on the other hand, makes it possible to present that document to the user in a browser. CSS or some type of style sheet mechanism is, in fact, a requisite for browsing XML on the Web. If CSS works well with HTML, it will work wonders with XML.
In this article we will illustrate the use of CSS and XML with two examples. We do not describe the syntax of CSS, but refer the reader to the CSS documentation on the W3C Web site.[1]
Figure 1
You can create the style sheet manually using your favorite text editor, as shown in Example 1.
Alternatively, you can create the style sheet using an editor that supports CSS, such as Grif's Symposia, as shown in Figure 2.
Example 1
PLAY { background-color : white }
FM { font-style : italic;
font-size : 14;
color : #400040;
text-align : right }
SPEAKER { font-weight : bold;
color : #ff0080 }
LINE { color : #800040;
left : 15 }
PERSONA { font-style : italic;
font-size : -1 }
PERSONAE { color : #800040 }
SCNDESCR { margin-top : 30;
font-size : 18;
color : #0000a0;
height : 20 }
STAGEDIR { font-weight : bold;
font-style : italic;
height : 20 }
PLAYSUBT { font-weight : bold;
font-size : 16;
text-decoration : underline;
height : 20 }
SPEECH { margin-top : 5 }
Figure 2
The method we will use in this example therefore is based on a draft proposal for stylesheet linking in XML which consists of inserting the XML processing instruction <?XML-stylesheet?> at the top of the document. The processing instruction has two required attributes type and href which respectively specify the type of stylesheet and its address. In our example, we thus need to add the following line to our XML document:
<?XML-stylesheet type="text/css" href="shaksper.css"?>Symposia supports this XML style sheet linking mechanism and inserts the processing instruction for you automatically when you specify an external style sheet using the "Create new Style Sheet/External" command.
Figure 3
What is clear, however, is that the limitations of CSS1 do represent a serious hinderance for its use in the more complex types of application that are possible with XML. As the following section shows, even for a somewhat simple XML application, the CSS standard needs to acquire a certain number of essential features if it is realize its full potential.
The DTD for our application is shown in Example 2.
Example 2
<!XML version="1.0"> <!DocType ContactRec [ <!Element ContactRec (Name, Company, Address, Product, Contacts)> <!Element Name (Honorific?, First, Middle?, Last)> <!Element Company (JobTitle?, CompanyName)> <!Element Address (Street+, City, Region?, PostCode, Country, Phone, Internet)> <!Element Product Empty> <!AttList Product SGMLEditor (Yes|No) #REQUIRED SGMLEditorKorean (Yes|No) #REQUIRED SGMLEditorJapanese (Yes|No) #REQUIRED ActiveViews (Yes|No) #REQUIRED SymposiaPro (Yes|No) #REQUIRED SymposiaDocPlus (Yes|No) #REQUIRED XMLProducts (Yes|No) #REQUIRED General (Yes|No) #REQUIRED> <!Element Contacts (Language, History)> <!Element Honorific (#PCDATA)> <!AttList Honorific Title (Mr|Ms|Mrs|Miss|Dr|Professor|M|Mme|Mlle|SeeContent) "SeeContent"> <!Element First (#PCDATA)> <!Element Middle (#PCDATA)> <!Element Last (#PCDATA)> <!Element JobTitle (#PCDATA)> <!Element CompanyName (#PCDATA)> <!Element Street (#PCDATA)> <!Element City (#PCDATA)> <!Element Region (#PCDATA)> <!Element PostCode (#PCDATA)> <!Element Country (#PCDATA)> <!Element Phone (DayTime, Fax?)> <!Element Internet (Email, Web)> <!Element Language EMPTY> <!AttList Language Preference (English|French) "English"> <!Element History (Events+)> <!Element DayTime (#PCDATA)> <!Element Fax (#PCDATA)> <!Element Email (#PCDATA)> <!Element Web (#PCDATA)> <!Element Events (Date, Venue, Notes)> <!Element Date (Day, Month, Year)> <!Element Venue (#PCDATA)> <!Element Notes (#PCDATA)> <!Element Day (#PCDATA)> <!Element Month (#PCDATA)> <!Element Year (#PCDATA)> ]>
A form-based interface provides many user-friendly features that make data-entry easier for the user, such as the ability to select from a predetermined list of options, or the possibility to select or unselect different options, as appropriate.
To provide an equivalent level of "comfort," we need to provide a predefined document template in which the user need only fill in the required data. Using the DTD as our guide, we can produce a document instance that contains all required document elements. Without a style sheet, however, this template is not of great value. The editor will simply display the document as a list of tags. Users need to know what information to insert where without displaying these tags--the only way we can accomplish this is by using our style sheet.
With the HTML form, it was possible to simply label each input zone with some text. Unfortunately, the CSS standard does not provide a means of displaying predefined text before or after an element. This style sheet feature was left out of CSS1 because of the inherent difficulty of implementing this feature in today's Web browsers (which, of course, by the time you read these words, will already be yesterday's Web browsers). Structure based editor/browsers such as Symposia, or indeed the thoroughbred XML structured editors to come, would have no problem implementing this type of feature, if it were included in the CSS standard.
The only viable solution for the moment seems to be to provide default text content for each data field that is then replaced by the user as he/she enters the information in the page (see Figure 4).
Figure 4
This layout is still not very satisfactory, however. Figure 5 improves the layout of the page using our style sheet to highlight certain elements and group related items together.
While we can achieve quite a pleasing presentation for our data entry screen using the style sheet. However there are two elements in the DTD which we cannot display in this same way: Product and Language. These two elements are empty and have no text content.
Product {background-image:image.gif}
Using our authoring tool, we would then be able to select the element by clicking on the image and pull up a list of the element's attributes for modification, as shown in Figure 6.
Figure 5
Figure 6
Of course, we are still left with the following problem: using CSS, it is not possible to display the attribute names or values for an element in the document itself. In our example, it would have been nice to be able to pull up the list of attributes for the Product element, supply a value for each attribute, then see these changes appear in the document (display some text or an image to indicate which products the contact was interested in, for example). Neither does CSS provide the possibility to apply conditional style rules based on an element's attribute values (one might imagine a different image to be displayed for "Yes" or for "No" values).
Despite the limitations of CSS described here we have found that the language comes close to meeting our needs. This, combined with the fact that CSS is already implemented for HTML in the major Web browsers--and our sense that the simplicity of CSS will appeal to Web designers over more complex (albeit powerful) approaches--leads us to believe that CSS will be the dominant mechanism for displaying XML documents on the Web.
Born in Morecambe, England in 1970, Stuart joined Grif in 1993 after completing a Bachelor's degree course in European Business Studies. He also holds a Certificate in Technical Writing from the American University of Paris.
XML.com Copyright © 1998-2006 O'Reilly Media, Inc.