H2 and H3 Auto Numbering

[sschnelbach]

Does anyone have some example CSS code that successfully auto numbers headings 2 or 3 in the Native PDF Publishing? I'm having a hard time getting it to work correctly. (For example, 1.1 would be the first heading after the start of Chapter 1; 1.1.1 would be a topic indented under that first topic.)

Also, why isn't there an autonumber option for tables and figures? I am also not getting the counters there to work. They reset by paragraph or by topic instead of numbering throughout the document (resetting the counter by chapter would be also acceptable).

[Vivek_Kumar]

I am reposting it with the solution just for the chapters. Copy and paste the following code into the content.css file. You may have to vary --prefix-size values based on your font and the text size. Let us know if this works for you.

body {
counter-reset: h1\.chapter1 0 h2\.chapter1 0 h3\.chapter1 0;
}

h1.chapter {
position: relative;
column-span: all;
color: #2ECC40;
--autonumber: autonumber;
margin-left: calc(var(--list-indent) + var(--prefix-size) + var(--prefix-gap));
margin-top: calc(var(--vertical-spacing) / 2);
--prefix-size: 160px;
--prefix-fixed-size: true;
--prefix-gap: 8px;
--vertical-spacing: 0px;
--list-indent: 0px;
counter-reset: h2\.chapter1 0;
margin-bottom: calc(var(--vertical-spacing) / 2);
}

h1.chapter:before {
counter-increment: h1\.chapter1;
content: "Chapter " counter(h1\.chapter1, decimal)". ";
text-align: left;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}
h2.chapter {
--autonumber: autonumber;
margin-left: calc(var(--list-indent) + var(--prefix-size) + var(--prefix-gap));
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
--prefix-size: 56px;
--prefix-fixed-size: true;
--prefix-gap: 4px;
--vertical-spacing: 0px;
--list-indent: 0px;
counter-reset: h3\.chapter1 0;
position: relative;
}

h2.chapter:before {
counter-increment: h2\.chapter1;
content: counter(h1\.chapter1, decimal)"." counter(h2\.chapter1, decimal)" ";
text-align: left;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}

h3.chapter {
--autonumber: autonumber;
margin-left: calc(var(--list-indent) + var(--prefix-size) + var(--prefix-gap));
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
--prefix-size: 80px;
--prefix-fixed-size: true;
--prefix-gap: 4px;
--vertical-spacing: 0px;
--list-indent: 0px;
counter-reset: h4\.chapter1 0;
position: relative;
}

h3.chapter:before {
counter-increment: h3\.chapter1;
content: counter(h1\.chapter1, decimal)"." counter(h2\.chapter1, decimal)"." counter(h3\.chapter1, decimal)" ";
text-align: left;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}

[Vivek_Kumar]

We don't suggest creating such CSS in the source view unless you are an expert. Otherwise, use the Author view. This documentation page shall provide details to create heading autonumber

https://experienceleague.adobe.com/docs/experience-manager-guides-learn/tutorials/configuring/config...

[sschnelbach]

Thanks for your help. After a bit of trial and error, I got it working. However, now the page numbers for cross references have a 1 in front of the page number. (Only for this output template that has numbered headings; it's fine for the "basic" template.) See attached PNG screenshot. The link works, and the second number (e.g. For the example shown in the attached screenshot, the "41" is the correct page, but all cross reference links have a "1 " in front of the page number.)

[VivekKumar · Accepted solution]

Please review your cross reference settings. Open the Template you are using, double click the Settings item and then select the Cross Reference tab. You will find values like 

See "{text}" on page {page}. Make sure 1 is not hardcoded there. You can compare with Basic template which is working for you.

[sschnelbach]

Yes, that was the first thing I checked to verify something hadn't been randomly added to those fields. There's nothing hard-coded in those fields.

[sschnelbach]

Okay, yes, now I see it. It's weird that it was added, but it's there now. Thanks. I deleted it.

[VivekKumar]

For table autonumber try the following. If this works for you then I will share how to do it for figures.

body {
counter-reset: caption1 0;
}

caption {
--autonumber: autonumber;
margin-left: calc(var(--list-indent) + var(--prefix-size) + var(--prefix-gap));
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
--prefix-size: 72px;
--prefix-fixed-size: 0;
--prefix-gap: 4px;
--vertical-spacing: 0px;
--list-indent: 0px;
position: relative;
text-align: left;
}
caption:before {
counter-increment: caption1;
content: "Table " counter(caption1, decimal)". ";
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}