Continuing CSS counter numbering on two levels

[odeon]

Hi,
I'm trying to write a CSS for an oXygen authoring framework for a customer DTD where I have nested lists like so:

A. Item 1
(1) Subitem 1
(2) Subitem 2
B. Item 2
(1) Subitem 3
(2) Subitem 4

Code: Select all

<list1>
	<l1item>
		<para>Item 1</para>
		<list2>
			<l2item>
				<para>Subitem 1</para>
			</l2item>
			<l2item>
				<para>Subitem 2</para>
			</l2item>
		</list2>
	</l1item>
	<l1item>
		<para>Item 2</para>
		<list2>
			<l2item>
				<para>Subitem 3</para>
			</l2item>
			<l2item>
				<para>Subitem 4</para>
			</l2item>
		</list2>
	</l1item>
</list1>

Normally, a new list on either level will reset the list item counter, like above. However, if I set an attribute

Code: Select all

cont="1"

on the first list item of a level, the counter numbering should continue from the previous list on the same level:

A. Item 1
(1) Subitem 1
(2) Subitem 2
B. Item 2
(3) Subitem 3 (cont="1")
(4) Subitem 4

Code: Select all

<list1>
	<l1item>
		<para>Item 1</para>
		<list2>
			<l2item>
				<para>Subitem 1</para>
			</l2item>
			<l2item>
				<para>Subitem 2</para>
			</l2item>
		</list2>
	</l1item>
	<l1item>
		<para>Item 2</para>
		<list2>
			<l2item cont="1">
				<para>Subitem 3</para>
			</l2item>
			<l2item>
				<para>Subitem 4</para>
			</l2item>
		</list2>
	</l1item>
</list1>

The relevant CSS looks like this (with additional counter resets outside this:

Code: Select all

list1:has(l1item:first-of-type:not([cont="1"])) {
	counter-reset: level1;
}

l1item:before {
	counter-increment: level1;
	content: counter(level1, upper-alpha) " ";
}


/* list2 */

list2:has(l2item:not([cont="1"]):first-of-type) {
	counter-reset: level2;
}

l2item:before {
	counter-increment: level2;
	content: "(" counter(level2) ") ";
}

For list1, this works just fine. For the nested list2, however, I can't make the numbering continue, it will simply reset again. I've attached a complete XML and associated CSS.

I'm not sure if I am doing something wrong or if there is a bug of some description. The former is not entirely unlikely - CSS is not my first language.

As always, many thanks for a great editor!

Best.,

/Ari

authoring.zip

[odeon]

I should add that this is on XML Editor 25.1, build 2023031510. Please let me know if you need anything else.

[Radu]

Hello Ari,
I see no way to make this work using CSS counters. You can try your work directly in a web browser and I think that using counters you will not be able to make this work at all.
I would suggest getting read in the CSS or all counter-reset, counter-increment properties and instead use as value for "content" the Oxygen oxy_xpath function:
https://www.oxygenxml.com/doc/versions/ ... ction.html
Probably with the proper xpath expression you can count the number of list items before the current list item and also take into account that specific attribute.

Regards,
Radu

[odeon]

Thanks, Radu, much appreciated. I'll have a look at the oxy_xpath() function. It does sound like that could solve the problem.

Best,

/Ari

[InspectorSpacetime]

Hi,

I had a look and this is truly baffling. Since your solution works perfectly well with the first level lists, I can't understand why it won't work with the second level lists! No matter what selectors I tried to use, it always resets the level2 counter for the second list as well. Unless you don't determine a reset at all, then the list flows as expected. Strange.

However, isn't there a simple workaround: Instead of determining when to NOT reset the list with the :has and :not pseudo selectors, couldn't you simply determine when to reset the second list. Like this:

Code: Select all

<list2 reset="true">
	<l2item>
		<para>Second level2 list, first item, cont=1</para>
	</l2item>
	<l2item>
		<para>Second level2 list, second item</para>
	</l2item>						
</list2>

And then in your CSS use:

Code: Select all

list2[reset="true"] {
	counter-reset: level2;
}

Of course, you would have to put the reset="true" attribute in every time you want the list to reset. But it seems to work for me.

And just a thought: Wouldn't your CSS for the first level lists be a lot simpler if you defined the cont="1" attribute in the list1 element instead to the first l1item? That way you wouldn't have to use the :has and :first-of-type pseudo selectors?

Just thought I't throw these ideas out here.

[Radu]

Hi,

There is a specification for the CSS counters function. I think we tried to obey that specification quite closely in the Author visual editor mode.
https://www.w3.org/TR/CSS21/generate.html#scope
In such cases I think it's best to try the XML with the CSS directly in a web browser, if you can get it to work like this and our Author visual editing mode does not work like the web browser, we can try to take a look and try to fix the possible issue.

Regards,
Radu

[InspectorSpacetime]

Hi,

There is a specification for the CSS counters function. I think we tried to obey that specification quite closely in the Author visual editor mode.
https://www.w3.org/TR/CSS21/generate.html#scope
In such cases I think it's best to try the XML with the CSS directly in a web browser, if you can get it to work like this and our Author visual editing mode does not work like the web browser, we can try to take a look and try to fix the possible issue.

Regards,
Radu

Hi Radu,

At least for me, the same thing occurs in every browser. So I’m sure it’s not an issue with your software.