Skip to content

Commit 81720bd

Browse files
FlamencoFlamenco
committed
Match size of bullets in other browser implementations.
Refactoring to mirror commit to html2canvas.js
1 parent e7be9ae commit 81720bd

3 files changed

Lines changed: 43 additions & 32 deletions

File tree

‎examples/html2pdf/lists.html‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,30 @@ <h2>Implemented</h2>
1717
<li style='list-style-type: lower-alpha'>OL Item (lower-alpha)</li>
1818
<li style='list-style-type: upper-roman'>OL Item (upper-roman)</li>
1919
<li style='list-style-type: lower-roman'>OL Item (lower-roman)</li>
20+
<li style='list-style-type: none'>OL Item (none)</li>
2021
</ol>
2122
<ul>
2223
<li>UL Item (default)</li>
2324
<li style='list-style-type: circle'>UL Item (circle)</li>
2425
<li style='list-style-type: square'>UL Item (square)</li>
2526
<li style='list-style-type: disc'>UL Item (disc)</li>
27+
<li style='list-style-type: none'>OL Item (none)</li>
2628
</ul>
2729

2830
<h2>Not Implemented</h2>
2931
<pre>
30-
upper-latin
31-
lower-latin
32-
armenian
33-
cjk-ideographic
34-
decimal-leading-zero
35-
georgian
36-
hebrew
37-
hiragana
38-
hiragana-iroha
39-
katakana
40-
katakana-iroha
41-
</pre>
32+
upper-latin
33+
lower-latin
34+
armenian
35+
cjk-ideographic
36+
decimal-leading-zero
37+
georgian
38+
hebrew
39+
hiragana
40+
hiragana-iroha
41+
katakana
42+
katakana-iroha
43+
</pre>
4244
</div>
4345

4446
<script src='../../libs/require/require.js'></script>

‎jspdf.plugin.context2d.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,10 @@
474474
var fontSize = pdf.internal.getFontSize();
475475
var txtWidth = pdf.getStringUnitWidth(text) * fontSize / pdf.internal.scaleFactor;
476476
return txtWidth;
477+
},
478+
479+
get width(){
480+
return this.getWidth(text);
477481
}
478482
}
479483
},

‎libs/html2canvas/dist/html2canvas.js‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2047,7 +2047,7 @@ NodeParser.prototype.paintText = function(container) {
20472047
}, this);
20482048
};
20492049

2050-
NodeParser.prototype.generate = {
2050+
NodeParser.prototype.generateListNumber = {
20512051
listAlpha : function(number) {
20522052
var tmp = "", modulus;
20532053

@@ -2080,43 +2080,46 @@ NodeParser.prototype.generate = {
20802080

20812081
return roman;
20822082
}
2083-
}
2083+
};
2084+
20842085

20852086
NodeParser.prototype.listItemText = function (type, currentIndex) {
20862087
switch (type) {
20872088
case "decimal-leading-zero":
20882089
text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString();
20892090
break;
20902091
case "upper-roman":
2091-
text = this.generate.listRoman(currentIndex);
2092+
text = this.generateListNumber.listRoman(currentIndex);
20922093
break;
20932094
case "lower-roman":
2094-
text = this.generate.listRoman(currentIndex).toLowerCase();
2095+
text = this.generateListNumber.listRoman(currentIndex).toLowerCase();
20952096
break;
20962097
case "lower-alpha":
2097-
text = this.generate.listAlpha(currentIndex).toLowerCase();
2098+
text = this.generateListNumber.listAlpha(currentIndex).toLowerCase();
20982099
break;
20992100
case "upper-alpha":
2100-
text = this.generate.listAlpha(currentIndex);
2101+
text = this.generateListNumber.listAlpha(currentIndex);
21012102
break;
21022103
case "decimal":
21032104
default:
21042105
text = currentIndex;
21052106
break;
21062107
}
21072108

2108-
return text + ". ";
2109+
return text;
21092110
}
21102111

21112112
NodeParser.prototype.renderBullet = function(container, bounds){
2112-
//listBounds = listPosition(element, text);
2113-
var x = bounds.left - 14;
2113+
var type = container.parent.css('listStyleType');
2114+
if (type === 'none'){
2115+
return;
2116+
}
21142117
var y = bounds.top + (bounds.bottom - bounds.top) / 2;
2115-
var c2d = this.options.canvas.getContext("2d");
2116-
var textWidth= c2d.measureText("M").getWidth();
2118+
var c2d = this.renderer.canvas.getContext("2d");
2119+
var textWidth= c2d.measureText("M").width;
21172120
var size = textWidth/4;
2118-
var type = container.parent.css('listStyleType');
2119-
var padding = 5;
2121+
var padding = textWidth * .75;
2122+
var x = bounds.left - padding;
21202123
switch(type){
21212124
case 'decimal':
21222125
case "decimal-leading-zero":
@@ -2130,27 +2133,29 @@ NodeParser.prototype.renderBullet = function(container, bounds){
21302133
var index = nodeList.indexOf(li.node) + 1;
21312134

21322135
var value = this.listItemText(type, index);
2133-
var left = bounds.left;
2134-
left -= c2d.measureText(value).getWidth();
2135-
left -= padding;
2136+
value += '.';
2137+
var left = bounds.left - padding;
2138+
left -= c2d.measureText(value).width;
21362139
c2d.fillText(value, left, bounds.bottom);
21372140
break;
21382141
case 'square':
2139-
var size = textWidth/2;
2140-
x -= size / 2;
2142+
var size = textWidth/3;
2143+
x -= size;
21412144
y -= size / 2;
21422145
c2d.fillRect(x, y , size, size);
21432146
break;
21442147
case 'circle':
2145-
var size = textWidth/4;
2148+
var size = textWidth/6;
2149+
x -= size;
21462150
c2d.beginPath();
21472151
c2d.arc(x, y, size, 0, Math.PI * 2);
21482152
c2d.closePath();
21492153
c2d.stroke();
21502154
break;
21512155
case 'disc':
21522156
default:
2153-
var size = textWidth/4;
2157+
var size = textWidth/6;
2158+
x -= size;
21542159
c2d.beginPath();
21552160
c2d.arc(x, y, size, 0, Math.PI * 2);
21562161
c2d.closePath();

0 commit comments

Comments
 (0)