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
Comments
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 |
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/ |
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. |
I made a workaround for list-style-type square. Perhaps my solutions helps you. Pull Request: #417 |
+1 on having the ability to render bullets in unordered lists... |
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. |
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... |
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.
Then I run whatever html I want to render through a filter (In my case an angular filter, but any Javascript would work)
|
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. |
Just curious if this is being considered, or if there is anything I can do to help move this feature along. |
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. |
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? |
It's a hack for sure, but I was able to support a bulleted HTML
LESS/CSS
Where |
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, |
A simple trick: HTML SCSS |
I wonder though, why can't this be solved in html2canvas? |
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 |
I tested right now, and HTML lists work fine in 1.0.0 alpha 10. |
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: |
Can some share me HTML and JS used on for this JS. I am using same but PDF file is not created. |
ul li { list-style-type: none;} ol li { list-style-type: none;} |
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.
The text was updated successfully, but these errors were encountered: