list ordering and display position

[LeeHart]

If I use “list-style-position: outside;” and an appropriate margin-left value I get a nice numbered list. If I use counter-reset and counter-increment rules and use counter(…) in the content rule of the :before selector I can get a more fine-grained control over the numbering displayed but it's displayed inside the tag for the element, not outside. I can't figure out how to make the list-style-type: decimal; and list-style-position: outside; use the numbering set up by the counter-reset and counter-increment attributes. Is that possible?

More information:

Our schema has numbered procedures; the enclosing element is and the element is used for each element. For content that is conditional (e.g. for pre-release content) we have a element that sits between and . I still want the item numbering to be triggered by but XMetaL seems to use the element as the root to be counted and so each enclosed in a element has a displayed number of 1. I can get the correct number computed using counter-increment and displayed using counter() in :before but it's not as nice to work with (and doesn't resemble the final content as much.)

Thanks,

Lee

Reply

[Derek Read]

Struggling with the description a little bit. Your content looks like which of these?

“item” and “conditional__item” are siblings:
  text
  text
  text

“item” and “conditional__item” are siblings and “conditional__item” may also contain “item”:
  text
  text
  text

Something else?

Reply

[LeeHart]

“item” and “conditional__item” are siblings and “conditional__item” may also contain “item”:
  text
  text
  text

That's it. can contain or . can contain item. has another child element that describes where that conditional content should be displayed.

Attached is an example image. The orange numbers inside the element is what I'd like to see in the list numbers outside the elements.

And here's the relevant CSS:
proch:before,
list:before,
item:before {
  color: #FF9900;
  font-style: normal;
}

proch,
list {
  prefix-format: "[ %attribute-list; ] ";
  display: block;
  margin-left: 6pt;
  text-indent: -3pt;
  list-style-position: outside;
}

proch {
  counter-reset: proch;
  list-style-type: decimal;
}

list {
  list-style-type: disc;
}

item {
  prefix-format: "[ %attribute-list; ] ";
  margin-left: 12pt;
  text-indent: -3pt;
  display: list-item;
}

proch > conditional__item > item:before,
proch > item:before {
  content: counter(proch, decimal) ". ";
}

proch > conditional__item > item,
proch > item {
  counter-increment: proch;
}

proch proch {
  list-style-type: lower-alpha;
}

proch proch > conditional__item > item:before,
proch proch > item:before {
  content: counter(proch, lower-alpha) ". ";
}

list[nobullets="1"] {
  list-style-type: none;
}

Reply

[Derek Read]

So, this isn't a numbering issue (your numbers are correct) they just aren't displaying in the correct position?

Our rendering engine displays numbers for “true” lists in the position you see in your screen capture (with some room to adjust that using margin and text-indent). It displays CSS “:before” content in the position it is rendering as well, with no option to adjust the positioning unfortunately.

So, I don't think there's anything you can do in this case.

Reply

[LeeHart]

It is a numbering issue – I'd like to be able to tell the “true” lists displayed by list-style-type and  list-style-position rules to use the values computed by the counter-reset and counter-increment rules.

Lee

Reply

[Derek Read]

OK, so just to be really clear can you post (in text) an example of the expected numbering?

Reply

[LeeHart]

Because I don't expect the CSS to be able to support the selection logic used by the XSLT, I just want it to be displayed as if it was one list:
1. This is item one.
2. This may be item two.
3. This may also be item two.
4. This may be item three.
5. This may also be item three.
6. This may be item two or four.

Currently it looks  like this, which makes it hard to tell it's all part of one list:
1. This is item one.
1. This may be item two.
1. This may also be item two.
1. This may be item three.
1. This may also be item three.
2. This may be item two or four.

Thanks,

Lee

Reply

[Derek Read]

Is it as simple as this then?
(I've removed all the other styling not specific to this numbering for clarity)
I'm not sure I understand what the markup should be for that last item (“This may be item two or four.”), so this still might not be right.

proch {
  display: block;
  padding-left: 1em;
  list-style-type: decimal;
}

item, conditional__item {
  margin-left: 2em;
  display: list-item;
}

conditional__item item {
  display: inline;
}

Reply

[Author]

Posts