Output a visual representation for empty elements
Depending on the type of element, block or inline, there are different ways to visualize empty elements.
Empty elements, particularly inline elements, are hard to see and even harder to find in the user interface. For this reason, you need to provide a visual representation in the XSL stylesheet for every element that authors may want to edit. Otherwise, users cannot click on an empty element and put it in focus, and thus rendering it impossible to edit the element or add children.
The approach you should choose depends on the type of element
- For inline elements, it is preferable to use placeholders in order to represent empty elements.
- For block elements, it is also preferable to use placeholders in order to represent empty elements.
Using XSL for visual output for block elements.
XSL is a different way to output some visual HTML for block elements. The code example creates adiv element which contains an HTML element for each empty element.
<xsl:template match="foo | bar | baz">
<div>
<xsl:apply-templates/>
<!-- without the following, empty elements would not be visible in the view -->
<xsl:if test="count(*) = 0">
<span class="dummy">[<xsl:value-of select="local-name(.)"/>]</span>
</xsl:if>
</div>
</xsl:template>