Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-35175

Tasklist checkbox displays as bullet point when page is exported to Word, PDF or HTML

      Summary

      Tasklist checkbox displays as a bullet point when the page is exported to Word or HTML

      Steps to Reproduce

      1. Login to Confluence
      2. Create a page with task list macro
      3. Export to Word or HTML

      Expected Results

      Checkboxes displayed (either as empty or checked in, depending on how it displayed on the page)

      Actual Results

      Tasklist checkboxes display instead as a bullet point

      Notes

      • An example Word document is attached to this issue: testnewpage.doc
      • Comparing the page source shown below with the Confluence Storage Format, it is possible to see the similarities that may have caused the substitution of checkboxes for bullet points by the PDF plugin.

      Workaround

      The tested workaround below worked for PDF exports using Confluence 6.15.6 and Confluence 6.15.7:

      1. Go to General Configuration > PDF Stylesheet
      2. Click the Edit button
      3. Insert the code below
        ul.inline-task-list > li {
            list-style: none;
            list-style-type: none;
            list-style-position: initial;
            list-style-image: initial;
            padding-left: 18px;
            margin-bottom: 2px;
            margin-left: -18px;
            background-repeat: no-repeat;
            background-repeat-x: no-repeat;
            background-repeat-y: no-repeat;
            background-size: 1em 1em;
            background-position: 0 1px;
            background-position-x: 0px;
            background-position-y: 1px;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJhIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjRkFGQkZDIiB4bGluazpocmVmPSIjYSIvPjxyZWN0IHN0cm9rZT0iI0E1QURCQSIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PC9nPjwvc3ZnPg==);
        }
        
        ul.inline-task-list > li.checked {
            list-style: none;
            list-style-type: none;
            list-style-position: initial;
            list-style-image: initial;
            padding-left: 18px;
            margin-bottom: 2px;
            margin-left: -18px;
            background-repeat: no-repeat;
            background-repeat-x: no-repeat;
            background-repeat-y: no-repeat;
            background-size: 1em 1em;
            background-position: 0 1px;
            background-position-x: 0px;
            background-position-y: 1px;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJhIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjNDI1MjZFIiB4bGluazpocmVmPSIjYSIvPjxyZWN0IHN0cm9rZT0iIzQyNTI2RSIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PHBhdGggZD0iTTQuNzA3IDYuMzc4YS45NzUuOTc1IDAgMCAwLTEuNDE0IDAgMS4wNjQgMS4wNjQgMCAwIDAgMCAxLjQ2NmwyIDIuMDc0YS45NzUuOTc1IDAgMCAwIDEuNDE0IDBsNC00LjE0OGMuMzktLjQwNS4zOS0xLjA2MSAwLTEuNDY2YS45NzUuOTc1IDAgMCAwLTEuNDE0IDBMNiA3LjcxOSA0LjcwNyA2LjM3OHoiIGZpbGw9IiNGRkYiLz48L2c+PC9zdmc+);
        }
        
      1. Click Save
      2. Export a page and check the workaround

        1. testnewpage.doc
          5 kB
        2. Page - Space Export to HTML.png
          Page - Space Export to HTML.png
          60 kB
        3. Page - Exported to PDF.png
          Page - Exported to PDF.png
          47 kB
        4. Page - Storage Format.png
          Page - Storage Format.png
          178 kB
        5. Page - Source.png
          Page - Source.png
          203 kB
        6. Page - Original View.png
          Page - Original View.png
          260 kB

          Form Name

            [CONFSERVER-35175] Tasklist checkbox displays as bullet point when page is exported to Word, PDF or HTML

            Julia H. added a comment -

            Is there a possible workaround for the Word export through Scroll Documents?

            Julia H. added a comment - Is there a possible workaround for the Word export through Scroll Documents?

            Casey Maynard added a comment - - edited

            The issue was

            created >>>                   03/Oct/2014 ( over 7 YEARS ago)

            gathering impact >>> 02/Jul/2018 (over 3 YEARS ago)

            So I doubt there is any urgency on getting this one done soon.

            I would recommend following Atlassian business mode and purchase an Add-on that will achieve the results you need.

            At this point this issue has become a 'feature' (in my view).  I do not have any hopes that issues older than 1 year will get any changes any time soon.

            Casey Maynard added a comment - - edited The issue was created >>>                   03/Oct/2014 ( over 7 YEARS ago) gathering impact >>> 02/Jul/2018 (over 3 YEARS ago) So I doubt there is any urgency on getting this one done soon. I would recommend following Atlassian business mode and purchase an Add-on that will achieve the results you need. At this point this issue has become a 'feature' (in my view).  I do not have any hopes that issues older than 1 year will get any changes any time soon.

            Hi, can we get an update on the issue? 

            In my project, we are exporting Confluence pages that contain checkboxes as Word documents. The export contains a bullet list instead of the checkbox, loosing the state of the item.

            Szilard Csongvay added a comment - Hi, can we get an update on the issue?  In my project, we are exporting Confluence pages that contain checkboxes as Word documents. The export contains a bullet list instead of the checkbox, loosing the state of the item.

            Works decent enough. Should be standard in the deploy

            Andreas Engler added a comment - Works decent enough. Should be standard in the deploy

            Hello Felipe Thozeski,

            thanks for your response and your explanation

            I tested your code snippet with Confluence version 6.9.1 successfully. Everything is fine with this workaround. Thanks alot.

             

            Best regards,
            Christian Welp

             

            Christian Welp added a comment - Hello Felipe Thozeski, thanks for your response and your explanation I tested your code snippet with Confluence version 6.9.1 successfully. Everything is fine with this workaround. Thanks alot.   Best regards, Christian Welp  

            Hi christian.welp698064790,

            I understand your concern. As a CSS beginner too, I've searched for this particular information when I was writing the workaround.

            Basically, that very long string is a SVG image of the checkbox that was encoded into base64 (a binary-to-text encoding scheme) characters. When your browser or the PDF plugin reads it, they decode the string back into a SVG image.

            Instead of generating a new encoded SVG image, I just looked into the source of the page and used the same image that Confluence already creates.

            For testing, you can copy the content inside url( ), paste it in your browser to see the image that is rendered. Try changing a character and your browsers will indicate an encoding error.

             

            Best Regards,
            Felipe Thozeski | Atlassian Support

            Felipe Thozeski (Inactive) added a comment - Hi christian.welp698064790 , I understand your concern. As a CSS beginner too, I've searched for this particular information when I was writing the workaround. Basically, that very long string is a SVG image of the checkbox that was encoded into base64 (a binary-to-text encoding scheme) characters. When your browser or the PDF plugin reads it, they decode the string back into a SVG image. Instead of generating a new encoded SVG image, I just looked into the source of the page and used the same image that Confluence already creates. For testing, you can copy the content inside  url( ) , paste it in your browser to see the image that is rendered. Try changing a character and your browsers will indicate an encoding error.   Best Regards, Felipe Thozeski | Atlassian Support

            Hello @Felipe Thozeski,

            thanks for your workaround. I am just a beginner in css. Can you please tell me what this command will do:

            url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJhIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjNDI1MjZFIiB4bGluazpocmVmPSIjYSIvPjxyZWN0IHN0cm9rZT0iIzQyNTI2RSIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PHBhdGggZD0iTTQuNzA3IDYuMzc4YS45NzUuOTc1IDAgMCAwLTEuNDE0IDAgMS4wNjQgMS4wNjQgMCAwIDAgMCAxLjQ2NmwyIDIuMDc0YS45NzUuOTc1IDAgMCAwIDEuNDE0IDBsNC00LjE0OGMuMzktLjQwNS4zOS0xLjA2MSAwLTEuNDY2YS45NzUuOTc1IDAgMCAwLTEuNDE0IDBMNiA3LjcxOSA0LjcwNyA2LjM3OHoiIGZpbGw9IiNGRkYiLz48L2c+PC9zdmc+);

            It looks like there is something downloaded from the internet / from another source. How can I be sure that this line is not a bad link / source which will infect my server.

            Best regards,
            Christian Welp

            Christian Welp added a comment - Hello @Felipe Thozeski, thanks for your workaround. I am just a beginner in css. Can you please tell me what this command will do: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJhIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjNDI1MjZFIiB4bGluazpocmVmPSIjYSIvPjxyZWN0IHN0cm9rZT0iIzQyNTI2RSIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PHBhdGggZD0iTTQuNzA3IDYuMzc4YS45NzUuOTc1IDAgMCAwLTEuNDE0IDAgMS4wNjQgMS4wNjQgMCAwIDAgMCAxLjQ2NmwyIDIuMDc0YS45NzUuOTc1IDAgMCAwIDEuNDE0IDBsNC00LjE0OGMuMzktLjQwNS4zOS0xLjA2MSAwLTEuNDY2YS45NzUuOTc1IDAgMCAwLTEuNDE0IDBMNiA3LjcxOSA0LjcwNyA2LjM3OHoiIGZpbGw9IiNGRkYiLz48L2c+PC9zdmc+); It looks like there is something downloaded from the internet / from another source. How can I be sure that this line is not a bad link / source which will infect my server. Best regards, Christian Welp

            The problem seems to be related to the way CSS is rendered when the content of the page is exported to a file.

            Original View

            Page Exported to PDF

            Page Exported to HTML

            View Source

            Most probable cause

            Not sure how the PDF is rendered, but comparing the page source shown above with the Confluence Storage Format, it is possible to see the similarities that may have caused the substitution of checkboxes for bullet points by the PDF plugin.

            Workaround

            The tested workaround below worked for PDF exports using Confluence 6.15.6 and Confluence 6.15.7:

            1. Go to General Configuration > PDF Stylesheet
            2. Click the Edit button
            3. Insert the code below
              ul.inline-task-list > li {
                  list-style: none;
                  list-style-type: none;
                  list-style-position: initial;
                  list-style-image: initial;
                  padding-left: 18px;
                  margin-bottom: 2px;
                  margin-left: -18px;
                  background-repeat: no-repeat;
                  background-repeat-x: no-repeat;
                  background-repeat-y: no-repeat;
                  background-size: 1em 1em;
                  background-position: 0 1px;
                  background-position-x: 0px;
                  background-position-y: 1px;
                  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJhIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjRkFGQkZDIiB4bGluazpocmVmPSIjYSIvPjxyZWN0IHN0cm9rZT0iI0E1QURCQSIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PC9nPjwvc3ZnPg==);
              }
              
              ul.inline-task-list > li.checked {
                  list-style: none;
                  list-style-type: none;
                  list-style-position: initial;
                  list-style-image: initial;
                  padding-left: 18px;
                  margin-bottom: 2px;
                  margin-left: -18px;
                  background-repeat: no-repeat;
                  background-repeat-x: no-repeat;
                  background-repeat-y: no-repeat;
                  background-size: 1em 1em;
                  background-position: 0 1px;
                  background-position-x: 0px;
                  background-position-y: 1px;
                  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJhIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjNDI1MjZFIiB4bGluazpocmVmPSIjYSIvPjxyZWN0IHN0cm9rZT0iIzQyNTI2RSIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PHBhdGggZD0iTTQuNzA3IDYuMzc4YS45NzUuOTc1IDAgMCAwLTEuNDE0IDAgMS4wNjQgMS4wNjQgMCAwIDAgMCAxLjQ2NmwyIDIuMDc0YS45NzUuOTc1IDAgMCAwIDEuNDE0IDBsNC00LjE0OGMuMzktLjQwNS4zOS0xLjA2MSAwLTEuNDY2YS45NzUuOTc1IDAgMCAwLTEuNDE0IDBMNiA3LjcxOSA0LjcwNyA2LjM3OHoiIGZpbGw9IiNGRkYiLz48L2c+PC9zdmc+);
              }
              
            1. Click Save
            2. Export a page and check the workaround

             

            Felipe Thozeski (Inactive) added a comment - The problem seems to be related to the way CSS is rendered when the content of the page is exported to a file. Original View Page Exported to PDF Page Exported to HTML View Source Most probable cause Not sure how the PDF is rendered, but comparing the page source shown above with the Confluence Storage Format , it is possible to see the similarities that may have caused the substitution of checkboxes for bullet points by the PDF plugin. Workaround The tested workaround below worked for PDF exports using Confluence 6.15.6 and Confluence 6.15.7: Go to  General Configuration  >  PDF Stylesheet Click the  Edit  button Insert the code below ul.inline-task-list > li { list-style: none; list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 18px; margin-bottom: 2px; margin-left: -18px; background-repeat: no-repeat; background-repeat-x: no-repeat; background-repeat-y: no-repeat; background-size: 1em 1em; background-position: 0 1px; background-position-x: 0px; background-position-y: 1px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJhIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjRkFGQkZDIiB4bGluazpocmVmPSIjYSIvPjxyZWN0IHN0cm9rZT0iI0E1QURCQSIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PC9nPjwvc3ZnPg==); } ul.inline-task-list > li.checked { list-style: none; list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 18px; margin-bottom: 2px; margin-left: -18px; background-repeat: no-repeat; background-repeat-x: no-repeat; background-repeat-y: no-repeat; background-size: 1em 1em; background-position: 0 1px; background-position-x: 0px; background-position-y: 1px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJhIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjNDI1MjZFIiB4bGluazpocmVmPSIjYSIvPjxyZWN0IHN0cm9rZT0iIzQyNTI2RSIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PHBhdGggZD0iTTQuNzA3IDYuMzc4YS45NzUuOTc1IDAgMCAwLTEuNDE0IDAgMS4wNjQgMS4wNjQgMCAwIDAgMCAxLjQ2NmwyIDIuMDc0YS45NzUuOTc1IDAgMCAwIDEuNDE0IDBsNC00LjE0OGMuMzktLjQwNS4zOS0xLjA2MSAwLTEuNDY2YS45NzUuOTc1IDAgMCAwLTEuNDE0IDBMNiA3LjcxOSA0LjcwNyA2LjM3OHoiIGZpbGw9IiNGRkYiLz48L2c+PC9zdmc+); } Click  Save Export a page and check the workaround  

            Daniel G added a comment -

            Wow, reported 5 years ago...I thought our Jira bug list was backlogged. I wish I could triple upvote this, as getting the ability to export checkboxes would allow my group to eliminate an entire separate document we are creating for off-line use.

            Daniel G added a comment - Wow, reported 5 years ago...I thought our Jira bug list was backlogged. I wish I could triple upvote this, as getting the ability to export checkboxes would allow my group to eliminate an entire separate document we are creating for off-line use.

            Thanks for your comment, vanessa.jaehrig1897994184. Can we know what is the Confluence version number? And what does the task list looks like when being exported from the test environment?

            Monique Khairuliana (Inactive) added a comment - Thanks for your comment, vanessa.jaehrig1897994184 . Can we know what is the Confluence version number? And what does the task list looks like when being exported from the test environment?

              Unassigned Unassigned
              dooi Der Lun
              Affected customers:
              56 This affects my team
              Watchers:
              47 Start watching this issue

                Created:
                Updated: