H2 and H3 Auto Numbering | Community
Skip to main content
sschnelbach
sschnelbach
Level 5
April 28, 2023
Solved

H2 and H3 Auto Numbering

  • April 28, 2023
  • 4 replies
  • 2146 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by VivekKumar

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.

4 replies

V
Adobe Employee
VivekKumarAdobe Employee
Adobe Employee
May 1, 2023

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

V
Adobe Employee
VivekKumarAdobe Employee
Adobe Employee
May 1, 2023

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-native-pdf-publish/content-styles/stylesheet.html?lang=en

 

sschnelbach
sschnelbachAuthor
Level 5
May 1, 2023

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

 

V
Adobe Employee
VivekKumarAdobe EmployeeAccepted solution
Adobe Employee
May 2, 2023

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
sschnelbachAuthor
Level 5
May 2, 2023

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.

V
Adobe Employee
VivekKumarAdobe Employee
Adobe Employee
May 2, 2023

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

Terms & ConditionsAccessibility statement

Loading footer...