Expand my Community achievements bar.

Registration for the AEM Guides User conference on 24th and 25th March 2024 is open.
SOLVED

H2 and H3 Auto Numbering

Avatar

Level 5

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).

1 Accepted Solution

Avatar

Correct answer by
Employee

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.

View solution in original post

7 Replies

Avatar

Employee

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

Avatar

Employee

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...

 

Avatar

Level 5

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.)Page Number Cross Reference Oddity.png

 

Avatar

Correct answer by
Employee

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.

Avatar

Level 5

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.

Avatar

Level 5

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

Avatar

Employee

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