CSS Pseudo-Element "inner(n)"

[Patrik]

Hi,

on the users meetup George said you will (probably) add the pseudo-element "outer" in the next release. Now I'd like to get apseudo-element "inner" as well.

Use-case 1
Consider this xml

Code: Select all

<List>

	<Entry>

		<Name>1st Parameter</Name>

		<Value>1111</Value>

	</Entry>

	<Entry>

		<Name>2nd Parameter</Name>

		<Value>2222</Value>

	</Entry>

</List>

To display this as a table with css is no problem. But to show a table header, currently I have to add more elements to the xml before the first entry. For instance

Code: Select all

<Header>

	<Name/>

	<Value/>

</Header>

With a combination of before and inner I should be able to do this purely from css with something like this:

Code: Select all

List > Entry:first-child:before {

	display: table-row;

}

List > Entry:first-child:before:inner {

	display: table-cell;

	content: "Name";

}

List > Entry:first-child:before:inner:after {

	display: table-cell;

	content: "Value";

}

Use-case 2
display this compact xml as table:

Code: Select all

<List>

	<Entry Name="1st Parameter">1111</Entry>

	<Entry Name="2st Parameter">2222</Entry>

</List>

with this css:

Code: Select all

List {

	display: table;

}

List > Entry {

	display: table-row;

}

List > Entry:inner {

	display: table-cell;

}

List > Entry:inner:before {

	display: table-cell;

	content: attr(Name);

}

Regards,
Patrik

[Radu]

Hi Patrik,

Even if at some future version we add support for inner(n) it will probably not work in such complicated cases, to create entire table rows and cells. So it is quite improbable that this will ever work.
Maybe you could add a :before block on the entire table and add some static content there which explains what each column does. Or add :before selectors on the Name and Value cells with "Name:" and "Value:" labels.

Instead of displaying the list as a table you could display it as a block.
Each entry would also be a block, the Name and Value elements would be inline and they would also have a border around them + a fixed width so that it all ends up looking like a table.

Regards,
Radu

[Patrik]

Hi Radu,

I already have proper workaround for both cases:
For the first one I just added the header-elements to xsd as mandatory elements so they are added automatically as guess elements.

For the second one I use :before with oxy_label() as content using fixed width.

Just was thinking on a way to make it even clother to the actual output (in PDF it is converted to a real table).

Regards,
Patrik

[jeryymanly]

More about....CSS Table Formatting

Manly

[avanlooveren]

Has there been any development or workaround that addresses the desire for "pseudo-elements" to serve as headers of a table? Like the OP, I have repeated elements in my XML that would be served nicely in Author mode with a tabular layout, but I don't have XML elements that can provide the "anchor" for the header elements in that table.

[Patrik]

You can do this nicely with existing css (I think supported since oXygen ~v17.1):

Code: Select all

my-table > my-row:first-child > *:before {

  // set styling for all header cells

  display: block;

  background-color: gray; // imitate table header

  font-weight: bold;

  border-bottom: solid 1px black; // imitate seperate row

  margin-top: -1px; // undo padding of table cell

  margin-left: -1px; // undo padding of table cell

  margin-right: -1px; // undo padding of table cell

}



// set the content for each column header

my-table > my-row:first-child > my-column1:before {

  content: "column header 1";

}

my-table > my-row:first-child > my-column2:before {

  content: "column header 2";

}

You will probably have to tweak some settings (e.g. the neative margin) to fit your table styling.

Patrik

[Radu]

Hi,

We have not done any additional work to support with a custom CSS extension the creation of an additional header row for an existing table.
Patrik's approach is interesting, for the last 2 selectors you will probably need to use "nth-child(X)" to specify for each table cell the static label that needs to be placed above it.

Regards,
Radu

[avanlooveren]

Patrik, this is great! Thank you so much.

FYI, I did not find that nth-child() was necessary.

[Patrik]

You would have needed the :nth-child() only when your entry element were identical (e.g. entry, entry, ... instead of entry1, entry2, ...).

Patrik