Home Forums General XMetaL Discussion CSS Formatting Questions Reply To: CSS Formatting Questions

Derek Read

Reply to: CSS Formatting Questions

Your assumptions about what is not supported are correct.

The following are supported for display (with the default being inline):
inline|block|table|table-row|table-cell|list|list-item

Additional table formatting beyond telling XMetaL to render arbitrary elements as a table, table-row or table-cell (borders, width, etc) is not currently supported for table-row and table-cell. CSS width is not supported for anything (including tables rendered this way, or any other element) at the moment. The only way to control table cell/column width is via the appropriate attributes when editing HTML or CALS tables.

A list of supported CSS properties is included in a large table in the XMetaL Developer Customization Guide.

I think, as Su-Laine has stated, your best option may be to format your child elements using display:inline as this will give your users an easier editing experience, though it may not match the output as closely. Complex table editing support (as provided for true HTML and CALS tables) is not currently available when arbitrary elements are formatted as a table using CSS.

You may wish to play around with white-space:pre|pre-wrap to see if that helps keep these elements on the same line when the content is wider than the screen width (if that is a requirement). However, this may introduce another issue in that white-space will then become significant (multiple consecutive spaces will not be collapsed in TagsOn and Normal view).

Something like the following might be sufficient (to me this will help indicate the start and end of TAG1, as well as indicate its content by separating each TAG2 with two instances of the introduced character '|' mimicking a border):

TAG1 {
        display: block;
        margin: 0.25em;
}
TAG1 * {
        display: inline;
}

TAG1 *:before {
   display: inline;
   color: #ccc;
   content: "| ";
}

TAG1 *:after {
   display: inline;
   color: #ccc;
   content: " |";
}

The '*' takes into account the fact that your TAG1 contains multiple differently named elements (TAG2 and TAG3). You could define those separately instead if you like, if you need more control over each one separately for example.

If you want borders to appear between all of the “rows” (or tables depending on how you envision this) you could use a hack to do that. We do not support border-top, border-bottom being set by themselves (all borders must be set or none). Using :before or :after with content and a background color set is the workaround for this:

TAG1:before {
display: block;
content: “-“;
font-size: 1px;
background-color: #999;
}

TAG1:after {
display: block;
content: “-“;
font-size: 1px;
background-color: #999;
}

You could use the border property instead (to get borders on all 4 sides), but if the amount of content within TAG1 might be significant I would avoid that and use the hack instead. Note as well that border only functions on block elements (not inline).

Reply

Products
Downloads
Support