Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bullets are not rendered #177

Closed
christian8287 opened this issue Mar 17, 2013 · 22 comments · Fixed by #1320
Closed

Bullets are not rendered #177

christian8287 opened this issue Mar 17, 2013 · 22 comments · Fixed by #1320
Labels

Comments

@christian8287
Copy link

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
Copy link

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
Copy link
Contributor

Grom-S commented Jan 9, 2014

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
Copy link

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
Copy link

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

Perhaps my solutions helps you.

Pull Request: #417

@herringtown
Copy link

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

@brandonkboswell
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@niklasvh
Copy link
Owner

niklasvh commented Feb 4, 2015

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
Copy link

andersborgabiro commented Feb 15, 2017

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
Copy link

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

HTML

<ul>
	<li><span class="bullet">&bull;</span>Replace your income, with a {{ output.monthlyIncome | currency }} monthly check</li>
	<li><span class="bullet">&bull;</span>Pay down your mortgage to zero</li>
	<li><span class="bullet">&bull;</span>Pay down your debt to zero</li>
	<li><span class="bullet">&bull;</span>Pay 100% of your kids’ education in a public college or university</li>
	<li><span class="bullet">&bull;</span>Remain covered until your spouse/partner turns 65 or your youngest child turns 23, whichever comes first</li>
</ul>

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
Copy link

andersborgabiro commented Aug 9, 2017

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
Copy link

narvalblog commented Oct 28, 2017

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
Copy link

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

@vagvaf
Copy link

vagvaf commented Mar 23, 2018

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
Copy link

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

@tininess
Copy link

tininess commented Nov 7, 2018

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

@RUSSCITY
Copy link

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/

@porbis-rmishra
Copy link

Can some share me HTML and JS used on for this JS. I am using same but PDF file is not created.
https://jsfiddle.net/jeavhg05/4/

@policiadestiny
Copy link

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

ol li { list-style-type: none;}
ol li:before { content: '- '; margin-left: -1em; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.