Html2canvas: Bullets are not rendered

[christian8287]

If i have an unordered or ordered list in my html markup, the bullets are not rendered by html2canvas. I think this is quite an important issue because this is a standard feature of html supported in all browsers since a long time ago.

[Finalfantasykid]

The solution should in theory be fairly simple (its just a circle), but whatever the solution it would have to consider the css to customize the appearance of the bullets. Not to mention list items are commonly used for things which don't even look like lists (for example the github header which has "Code", "Network" etc. is a ul, so obviously no bullets are needed there because of list-style-type: none

http://www.w3schools.com/css/css_list.asp

[Grom-S]

Any news on this one? I really need this functionality in my app. Does anybody has any ideas/workarounds on this? Or can someone give me some info on how to implement it?

Here is the fiddle that proves it is not working: http://jsfiddle.net/fYZ5h/

[adam-roth]

Would love to see this fixed, particularly for ordered lists.

Edit: There's a simple workaround for people just interested in seeing the numbers against an ordered list. This will work as long as you set the 'list-style-position' CSS property to 'inside' on your 'ol' element. Also your 'list-style-type' must match the following regex:

/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i

...as long as both of those constraints are met, the numbers are rendered correctly for the ordered list. You can use CSS to adjust the position of the list to compensate for any impact the 'list-style-position: inside;' has on your layout.

[marquezmanu]

I made a workaround for list-style-type square.

Perhaps my solutions helps you.

Pull Request: https://github.com/niklasvh/html2canvas/pull/417

[herringtown]

+1 on having the ability to render bullets in unordered lists...

[brandonkboswell]

This would also be incredibly helpful for projects I'm working on. I'm having to convert my lists to paragraphs and fake the bullets.

[herringtown]

I think even a stop-gap solution that ignores more complicated list styles and implements just disc/square for unordered lists would be useful .... I would follow on that stop-gap with another: basic support for ordered lists (haven't tried @adam-roth's approach, but will shortly) . THEN, maybe get to the fancier list styles...

[brandonkboswell]

This isn't going to be a solution that works for everyone, but here is something I've used with some success. Html2Canvas supports pseudoclass selectors just fine so I've re-added the bullets and numbers with :before filters.

//This Code Is SASS, but you could write it just fine in regular css.
//You can also nest ol, ul's to allow nested lists (just specify a new left position to indent with, in our case we just add another 30px per indent).

#whatever-element-html2canvas-is-run-on {
    ol, ul {
        li {
            &:before {
                position: absolute; //This way is doesn't effect sizing
                left: 30px; //Whatever indent level you need to match the bullet placement
                z-index: 1000; //This may not be necessary for you
            }
        }
    }
    ol {
        li {
            &:before {
                content: attr(data-number); //This along with the javascrip below will make ordered lists work.
            }
        }
    }
}

Then I run whatever html I want to render through a filter (In my case an angular filter, but any Javascript would work)

var filtered = $("<div>" + data + "</div");

//Add Numbers To Each of The OL Li's
filtered.find('ol')
    //Loop through each ol
    .each(function(i, el){
        console.log('i', i);
        $(el).children('li')
            //Loop through each of it's children and give it a data attribute for what number it should have
            .each(function(ci, cel){
                console.log('ci', ci);
                $(cel).attr('data-number', ci + 1);
            });
    });

[adam-roth]

The workaround I posted earlier no longer works with the current version of html2canvas. Here's my new workaround for this issue:

http://jsfiddle.net/e70o3mj0/2/

...basically it converts every 'ol' and 'ul' into a collection of div's. The operation can be undone after html2canvas runs.

[brandonkboswell]

Just curious if this is being considered, or if there is anything I can do to help move this feature along.

[niklasvh]

It is considered and will be implemented at some point. PR #486 was made for it, and I gave some feedback on it. Once those are resolved, it could get merged.

[andersborgabiro]

Any likelihood this will be solved in html2canvas in the near future?

I looked for "ul", "ol", "li" in the code and found nothing, yet li's are indented, so there must be some logic for it. Anyone that could point to where this would be located in the code, if it's now at all there?

[Kevinlearynet]

It's a hack for sure, but I was able to support a bulleted <ul> in the PDF with this approach:

HTML
~~~

• •Replace your income, with a {{ output.monthlyIncome | currency }} monthly check
• •Pay down your mortgage to zero
• •Pay down your debt to zero
• •Pay 100% of your kids’ education in a public college or university
• •Remain covered until your spouse/partner turns 65 or your youngest child turns 23, whichever comes first

~~~

LESS/CSS
~~~

pdf-canvas ul {

list-style: none;
padding: 0;

}

pdf-canvas ul li {

margin: 0 0 0 35px;
list-style: none;

.bullet {
    display: inline-block;
    opacity: 0.85;
    font-size: 1.1em;
    text-indent: -22px;
}

}
~~~

Where #pdf-canvas is the name of a hidden DIV with the PDF template in it. Hope this helps anyone else trying to do this.

[andersborgabiro]

I use TinyMCE for the editing, and users must not see any of the "inner workings", but there might be a way to extend so that a span and • is inserted, but a proper 1-to-1 solution would be much better of course.

Thanks,
Anders

[narvalblog]

A simple trick:

HTML
<ul><li>Item 1</li><li>Item 2</li></ul>

SCSS
ul li { list-style-type: none; &:before { content: '• '; margin-left: -1em; } }

[andersborgabiro]

I wonder though, why can't this be solved in html2canvas?

[vagvaf]

My approach to by-pass this was to create a table with 2 columns and put • in the first column and the text in the second. It was the only way that it was rendered correctly

[andersborgabiro]

I tested right now, and HTML lists work fine in 1.0.0 alpha 10.

[tininess]

https://jsfiddle.net/boLxkgj8/264/ I can't render Bullet :( How could you do that

[RUSSCITY]

https://jsfiddle.net/boLxkgj8/264/ I can't render Bullet :( How could you do that

ok, you was not using the latest version, now it looks like it works:
https://jsfiddle.net/jeavhg05/4/