CSS Formatting Questions

[rewers]

Hello,

in our project we would like to support the customer in the editing of xml-content with a layout (css) in the normal view that is as close as possible to the rendered final document output.
As I've read in the customization guide and in the forum XMetaL's ability to do so is pretty limited (css1 + some css2-properties).
What I need to do is to display a set of consecutive XML elements next to each other. In css2.1 I would use a table for this. This is also possible in XMetaL but to me it seems that the control over a table's layout is very limited in XMetaL (or even none-existing). I wasn't able to set a fixed width for the cells and I also couldn't influence the table's border style.
The next idea was to use absolute and relative positining. But these properties seem not to be supported.
My next approach went into the direction of display:inline-block or display:run-in. Both seem also not to be implemented.

Here is an example to make it a bit more clear what I'm trying to do:

We have a XML-file like this:

    First Cell     
    Second Cell 
    Third Cell     
   

In the normal view this should look something like this:

| First Cell | Second Cell | Third Cell | Fourth Cell |

What is important to me is that I have the control over the layout of each cell's element and also over the width of each cell.

Doesn't anyone have an idea how my problem could be solved?

Thanks in advance and greetings,
rewers.

Reply

[Su-Laine Yeo]

One way to control the width of each cell is to put placeholder text in new document templates. Placeholder text is the dark blue text on a light blue background that appears onscreen but not in output. See http://forums.xmetal.com/index.php/topic,284.0.html for details. 

I would make these inline elements in the CSS file. You can make the | symbol appear between items by using before-text or after-text in the CSS file. E.g.

TAG2 {
        display: inline;
}

TAG2:after {
display: inline;
color: #AAAAAA;
content: ” | {“;
}

Cheers,
Su-Laine

Reply

[Derek Read]

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

[Author]

Posts