Uploaded image for project: 'Confluence Cloud'
  1. Confluence Cloud
  2. CONFCLOUD-65599

Exporting pages to PDF results in incorrect heading formatting for heading 4 and 6

      Issue Summary

      When we export pages to PDF, both heading 4 and 6 are incorrectly formatted in the resulting export.

      Environment

      • Confluence Cloud
      • Any browser
      • Any desktop OS

      Steps to Reproduce

      1. Create a new page using the New Editing Experience (Fabric editor)
      2. Add text
      3. format different sections of the text with heading sizes 1, 2, 3, 4, 5, 6
      4. Publish page
      5. Export this page to pdf

      Expected Results

      Exported page headings respect original formatting

      Actual Results

      Heading 4 and 6 will be incorrectly formatted. Both will be bigger than headings above them and will display incorrect bolding, italic and font.

      Workaround

      No workaround as of today.

        1. originalPageFabric-1.png
          originalPageFabric-1.png
          175 kB
        2. originalPageFabric.png
          originalPageFabric.png
          175 kB
        3. headings in pdf.PNG
          headings in pdf.PNG
          25 kB
        4. exportedPagePDF.png
          exportedPagePDF.png
          105 kB
        5. Exported_PDF.png
          Exported_PDF.png
          38 kB
        6. Confluence_page.png
          Confluence_page.png
          36 kB

            [CONFCLOUD-65599] Exporting pages to PDF results in incorrect heading formatting for heading 4 and 6

            Still the same?

            I add some

             

            h3 

            {     font-size: 20px;     margin: 21px 0 4px 0; }

            To PDF stylesheet but it does nothing my h3 still shows like 8px

            Alberto Misrachi added a comment - Still the same? I add some   h3  {     font-size: 20px;     margin: 21px 0 4px 0; } To PDF stylesheet but it does nothing my h3 still shows like 8px

            Steven Bao added a comment -

            With the new PDF export pages now render more accurately match Confluence pages and you should no longer see this issue: https://community.atlassian.com/t5/Confluence-discussions/Exported-PDFs-now-more-accurately-match-Confluence-pages/td-p/2130971

            However, if you are using @page tags this will fall back to the old legacy PDF export and you may experience this bug. We will be closing this bug, but watch this ticket for @page support in new PDF export: https://jira.atlassian.com/browse/CONFCLOUD-75975

            Steven Bao added a comment - With the new PDF export pages now render more accurately match Confluence pages and you should no longer see this issue:  https://community.atlassian.com/t5/Confluence-discussions/Exported-PDFs-now-more-accurately-match-Confluence-pages/td-p/2130971 However, if you are using @page tags this will fall back to the old legacy PDF export and you may experience this bug. We will be closing this bug, but watch this ticket for @page support in new PDF export:  https://jira.atlassian.com/browse/CONFCLOUD-75975

            This is Oksana, I was able to reproduce this bug on November 24, 2022.

            Oksana Bodnar (Inactive) added a comment - This is Oksana, I was able to reproduce this bug on November 24, 2022.

            Micheal Planck added a comment - - edited

            After much research, I have found a work-around. It is not the work-around, because it is impossible to make your PDF look like your web page. However, it produces a PDF that is at least legible.

            Their are two fundamental problems:

            1) the CSS property h1 only sort of applies to the h1 text in your PDF. The .wiki-content h1 also applies, and Confluence has established stupid defaults for each of the 9 wiki heading styles - defaults that conflict with the web page styles.

            You must override every attribute with the .wiki-content to control what your PDF headings look like.

            2) When exporting to PDF, Confluence stupidly demotes all headings by page heiarchy. This means that your h1 (or .wiki-content h1) style appears exactly once: as the title of your home page. All other pages are h2. Their child pages are h3, and if those pages have children, they are h4, and so on.

            On top of that, all of the styles on your page will also be demoted the same amount as the page. This means that if you have a page with text in h1 style, and it has a child with text in h1 style, your first page will display its text in h2 and your child page will display its text in h3.

            Therefore, it does you no good to match your .wiki-content heading styles to the web page styles (specifically, the fact that h6 is display: block), because what text is classified as h6 depends on what page it is on. This particular bit of genius should have resulted in an automatic sacking for someone, as it demonstrates that Atlassian simply does not understand the concepts of formatting, exporting, or reading documents.

            The best you can do is to redefine the styles to at least not be actively dishonest. Then restrict yourself to no more than 5 heading styles and three pages of depth. You must also surrender any desire to control what your document looks like and accept bare legibility instead, but you already know this because you are using Confluence.

             

             

            /* Put a page break before each page */
            /* Note that no other settings can be applied here; trying to set the color */
            /* or size will not change the title but will modify text in tables. */
            .pagetitle
            {
              page-break-before: always;
            }
            
            /* Add a page number (note this requires <span id="pageNum"/> in the Footer description)*/
            #pageNum:before
            {
            content: counter(page);
            }
            
            /* Correct heading font sizes because the default is broken. */
            /* Note that H1 appears exactly once, as the Home page title. */
            /* All other pages are demoted one level to H2, and any of their children will be H3, etc.. */
            /* Any headings on those pages are demoted the same amount as the page. */
            /* Thus, if you have 8 levels of child pages, you page name will be in H9 and */
            /* all of your text headings will be demoted to an unknown style. */
            .wiki-content h1
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 26px; }
            .wiki-content h2
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 20px; }
            .wiki-content h3
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 18px; }
            .wiki-content h4
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 16px; }
            .wiki-content h5
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 14px; }
            .wiki-content h6
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 14px; }
            .wiki-content h7
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 14px; }
            .wiki-content h8
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 14px; }
            .wiki-content h9
            { color: black;
              font-weight: normal;
              font-style: normal;
              font-size: 14px; }
             
            

             

            Micheal Planck added a comment - - edited After much research, I have found a work-around. It is not the work-around, because it is impossible to make your PDF look like your web page. However, it produces a PDF that is at least legible. Their are two fundamental problems: 1) the CSS property h1 only sort of applies to the h1 text in your PDF. The .wiki-content h1 also applies, and Confluence has established stupid defaults for each of the 9 wiki heading styles - defaults that conflict with the web page styles. You must override every attribute with the .wiki-content to control what your PDF headings look like. 2) When exporting to PDF, Confluence stupidly demotes all headings by page heiarchy. This means that your h1 (or .wiki-content h1) style appears exactly once: as the title of your home page. All other pages are h2. Their child pages are h3, and if those pages have children, they are h4, and so on. On top of that, all of the styles on your page will also be demoted the same amount as the page. This means that if you have a page with text in h1 style, and it has a child with text in h1 style, your first page will display its text in h2 and your child page will display its text in h3. Therefore, it does you no good to match your .wiki-content heading styles to the web page styles (specifically, the fact that h6 is display: block), because what text is classified as h6 depends on what page it is on. This particular bit of genius should have resulted in an automatic sacking for someone, as it demonstrates that Atlassian simply does not understand the concepts of formatting, exporting, or reading documents. The best you can do is to redefine the styles to at least not be actively dishonest. Then restrict yourself to no more than 5 heading styles and three pages of depth. You must also surrender any desire to control what your document looks like and accept bare legibility instead, but you already know this because you are using Confluence.     /* Put a page break before each page */ /* Note that no other settings can be applied here; trying to set the color */ /* or size will not change the title but will modify text in tables. */ .pagetitle {   page- break -before: always; } /* Add a page number (note this requires <span id= "pageNum" /> in the Footer description)*/ #pageNum:before { content: counter(page); } /* Correct heading font sizes because the default is broken. */ /* Note that H1 appears exactly once, as the Home page title. */ /* All other pages are demoted one level to H2, and any of their children will be H3, etc.. */ /* Any headings on those pages are demoted the same amount as the page. */ /* Thus, if you have 8 levels of child pages, you page name will be in H9 and */ /* all of your text headings will be demoted to an unknown style. */ .wiki-content h1 { color: black; font-weight: normal; font-style: normal; font-size: 26px; } .wiki-content h2 { color: black;   font-weight: normal;   font-style: normal;   font-size: 20px; } .wiki-content h3 { color: black;   font-weight: normal;   font-style: normal;   font-size: 18px; } .wiki-content h4 { color: black;   font-weight: normal;   font-style: normal;   font-size: 16px; } .wiki-content h5 { color: black;   font-weight: normal;   font-style: normal;   font-size: 14px; } .wiki-content h6 { color: black;   font-weight: normal;   font-style: normal;   font-size: 14px; } .wiki-content h7 { color: black;   font-weight: normal;   font-style: normal;   font-size: 14px; } .wiki-content h8 { color: black;   font-weight: normal;   font-style: normal;   font-size: 14px; } .wiki-content h9 { color: black;   font-weight: normal;   font-style: normal;   font-size: 14px; }    

            💩

            Jason Hullick added a comment - 💩

            Neuromancer added a comment - - edited

            This is annoying on a regular basis. H2 is much smaller than H3.

            How has this not been fixed in a year? It's a core function of Confluence and all they have to do it type in some new numbers for the heading tag font sizes.

            Neuromancer added a comment - - edited This is annoying on a regular basis. H2 is much smaller than H3. How has this not been fixed in a year? It's a core function of Confluence and all they have to do it type in some new numbers for the heading tag font sizes.

            Additionally, when doing a site export and selecting more than one level of pages, such as one parent page and two child pages, the sizes are messed up in a different way.  Heading3 is larger than all other headings.  There are other issues with Bold and Italic text as well.

            Jeff Hoover added a comment - Additionally, when doing a site export and selecting more than one level of pages, such as one parent page and two child pages, the sizes are messed up in a different way.  Heading3 is larger than all other headings.  There are other issues with Bold and Italic text as well.

            Jeff Hoover added a comment - - edited

            This is still an issue.  H3 also appears to be bold, so it isn't just 4-6 that are incorrect.

            Jeff Hoover added a comment - - edited This is still an issue.  H3 also appears to be bold, so it isn't just 4-6 that are incorrect.

            Terry added a comment -

            Adding my weight to this. Much of our wiki uses h2/h4 as part of a consistent style. I've played with the PDF page export stylesheet, overriding the styles for those headers, but nothing I do there has any effect. 

            We can work around by converting some pages to h1/h3 instead, but it's an ugly fix (those headers are too big on screen) and breaks our house style. 

             

            Terry added a comment - Adding my weight to this. Much of our wiki uses h2/h4 as part of a consistent style. I've played with the PDF page export stylesheet, overriding the styles for those headers, but nothing I do there has any effect.  We can work around by converting some pages to h1/h3 instead, but it's an ugly fix (those headers are too big on screen) and breaks our house style.   

            Diego (Inactive) added a comment - https://community.atlassian.com/t5/Confluence-questions/PDF-Export-Heading-4-is-larger-font-than-Heading-2/qaq-p/1645650

              Unassigned Unassigned
              sali@atlassian.com Saif
              Affected customers:
              22 This affects my team
              Watchers:
              25 Start watching this issue

                Created:
                Updated:
                Resolved: