Pages: 1
Print
Author Topic: list ordering and display position  (Read 958 times)
LeeHart
Member

Posts: 40


« on: June 01, 2011, 02:10:52 PM »

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 <proch> and the <item> element is used for each element. For content that is conditional (e.g. for pre-release content) we have a <conditional__item> element that sits between <proch> and <item>. I still want the item numbering to be triggered by <proch> but XMetaL seems to use the <conditional__item> element as the root to be counted and so each <item> enclosed in a <conditional__item> 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
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 1546



WWW
« Reply #1 on: June 01, 2011, 03:02:47 PM »

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

"item" and "conditional__item" are siblings:
<proch>
  <item>text</item>
  <conditional__item>text</conditional__item>
  <item>text</item>
</proch>


"item" and "conditional__item" are siblings and "conditional__item" may also contain "item":
<proch>
  <item>text</item>
  <conditional__item><item>text</item></conditional__item>
  <item>text</item>
</proch>


Something else?
Logged
LeeHart
Member

Posts: 40


« Reply #2 on: June 01, 2011, 05:16:19 PM »

"item" and "conditional__item" are siblings and "conditional__item" may also contain "item":
<proch>
  <item>text</item>
  <conditional__item><item>text</item></conditional__item>
  <item>text</item>
</proch>


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

Attached is an example image. The orange numbers inside the <item> 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;
}


* Lists.Png (16.32 KB, 360x470 - viewed 125 times.)
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 1546



WWW
« Reply #3 on: June 02, 2011, 07:22:39 PM »

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.
Logged
LeeHart
Member

Posts: 40


« Reply #4 on: June 02, 2011, 11:25:59 PM »

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
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 1546



WWW
« Reply #5 on: June 03, 2011, 12:48:56 AM »

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

Posts: 40


« Reply #6 on: June 03, 2011, 10:50:43 AM »

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
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 1546



WWW
« Reply #7 on: June 03, 2011, 02:56:29 PM »

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;
}


* proch_list.png (16.22 KB, 529x319 - viewed 122 times.)
Logged
Pages: 1
Print
Jump to: