Using Attribute Values in Documents in Font

Generating Data Matrix 2d barcode in Font Using Attribute Values in Documents

Another way to display attribute values is to use a trick with the :before and :after pseudoelements. As you saw, these pseudo-elements allow a stylesheet to add text or an image before or after an element. The :before and :after pseudo-elements also allow the stylesheet to add the content of an attribute using the content property, with a value of attr(attributeName). The attributeName reference is the name of the attribute whose content you want to display.

The file attributesPsuedo.xml contains the following content: <paragraph keyWords="displaying, attribute, content, XML, CSS" xref="CSS2 Section 12.2"> This example demonstrates how we can use the <code>:before</code> and <code>:after</code> pseudo classes to add attribute content to a document. </paragraph> You can use the :before and :after pseudo-elements to include the content of the attributes: paragraph { display:block; background-color:#FFFFFF; font-family:Arial, Helvetic, sans-serif; padding:20px; } paragraph:before { display:block; background-color#CCCCCC; font-weight:bold; color:#0000FF; content:"Cross reference:" attr(xref); } paragraph:after { font-style:italic; color:#0000FF; content:"Key words: " attr(keyWords); } You can find this stylesheet saved as attributesPsuedo.css. This approach doesn t work in IE, but Netscape, Firefox, and Opera display something similar to Figure 5-23.

As you can imagine, referencing attributes with pseudo-elements is very helpful for displaying content, although you re somewhat limited with this approach because: You have limited formatting control over the attribute values: While you can display the content in either a block or inline box, or change the color, font-style, and font-weight properties, you re not able to use the text in a structure like a table. You can only present the content of two attributes in any element: You re limited to using the :before and :after pseudo-elements. The conclusion you should draw is that while CSS is capable of rendering XML documents, it s limited in its ability to display content from attributes.

Summary

In this chapter, you ve seen many different ways to display XML content in a web browser using CSS. Because an XML document is focused on content, you can only display elements by using an associated CSS declaration for each one. This is more labor-intensive than using CSS with XHTML, where the browser already understands how to render certain structural elements, such as tables. In this chapter, you learned how to use Element type selectors without class or id attributes The box model to display element content using three positioning schemes: normal flow, floating boxes, and absolute positioning CSS declarations to display tabular data Floating boxes to create more complex table layouts XLinks to create links between documents CSS background or background-image properties to force the display of an image in XML documents The :before and :after pseudo-classes to display images and text in addition to XML document content The :before and :after pseudo-classes to display attribute content Despite the flexibility of CSS, it still creates limitations when used to style XML documents directly in a web browser. The most important limitation is that support for CSS2 is mixed across the major web browsers.

Other limitations include the following: Tabular data needs element names and structures that fit a particular model, so that you can identify data correctly. If you want to display elements in a different order from the XML document, you have to use one of these two options: Absolute positioning, which requires that you know exactly how much data or how many elements will be displayed Floating boxes, which can reorder boxes from left to right within the screen s width Linking via XLink currently has limited support. A workaround is to use the XHTML namespace and <a> tags. In order to display images, you must have a different element or different attribute name for each image. You can only display the values of two attributes per element. Using CSS with XHTML documents allows you to separate content from styling information. It also allows you to update pages more easily, and prevents a web browser from having to download style rules more than once. While CSS is capable of presenting XML content, it doesn t provide the most flexible means of display for the layout of data and tables. Furthermore, the limited support for XLinks and images makes CSS a frustrating experience for the XML developer. In the next two chapters, you ll see an alternative to CSS for display purposes: XSLT. XSLT provides much more flexibility in the rendering of XML content, and you can use it to structure content that you then style with CSS. XSLT also allows for dynamic manipulation of data on the client. In later chapters, you ll see examples of using XSLT on the server, so that you can deliver XHTML to browsers without them having to interpret XSLT.