How To Calculate Width And Height Of Text In Jspdf?
I'm facing some issues while creating tables in jspdf. I could not find any good related docs, but if anyone knows one, please share. I found two related methods: 1) doc.getStringU
Solution 1:
You might want to look at the AutoTable plugin for generating tables with jsPDF. I found the built in plugin hard to work with and isn't documented at all.
The best way I have found to calculate the width is simply doing this:
var doc = new jsPDF();
var width = doc.getTextWidth('Text');
console.log(width);
If you really need to calculate the height getDimensions() might be an option. However, it is not pixel perfect and looking at the source I doubt it will work for anything but pt. Here is an example:
var doc = new jsPDF('p', 'pt');
var dim = doc.getTextDimensions('Text');
console.log(dim); // Object {w: 24.149968818897642, h: 19.499975433070865}
Solution 2:
I found this question looking for answers to a similar issue. Unfortunately, the answers provided did not solve my problem, but I figure what I did find out may help other people stumbling onto this question.
As already mentioned, the .getStringUnitWidth(text) will return the width of a string (in pt). I could never find any explanation of the options like "kerning" or "widths" in the documentation or in the actual .js file. I also noticed with my own usage that this method was actually underestimating widths by ~10%, which started to add up very quickly. Finally, this did not account for fonts that were bold, italicized or bold and italicized.
Since I required a high level of accuracy, I ended up calculating the width of each character on my own and using this to calculate a string width (by totaling the width of each character in a string).
Below are the font widths at size 1 (in pt) for each character accepted by jsPDF in the 3 default fonts (helvetica, times, courier):
helvetica
char unicode normal bold italic bolditalic
32 0.278 0.278 0.278 0.278
! 33 0.278 0.333 0.278 0.333
" 34 0.355 0.474 0.355 0.474
# 35 0.556 0.556 0.556 0.556
$ 36 0.556 0.556 0.556 0.556
% 37 0.889 0.889 0.889 0.889
& 38 0.667 0.722 0.667 0.722
' 39 0.191 0.238 0.191 0.238
( 40 0.333 0.333 0.333 0.333
) 41 0.333 0.333 0.333 0.333
* 42 0.389 0.389 0.389 0.389
+ 43 0.584 0.584 0.584 0.584
, 44 0.278 0.278 0.278 0.278
- 45 0.333 0.333 0.333 0.333
. 46 0.278 0.278 0.278 0.278
/ 47 0.278 0.278 0.278 0.278
0 48 0.556 0.556 0.556 0.556
1 49 0.556 0.556 0.556 0.556
2 50 0.556 0.556 0.556 0.556
3 51 0.556 0.556 0.556 0.556
4 52 0.556 0.556 0.556 0.556
5 53 0.556 0.556 0.556 0.556
6 54 0.556 0.556 0.556 0.556
7 55 0.556 0.556 0.556 0.556
8 56 0.556 0.556 0.556 0.556
9 57 0.556 0.556 0.556 0.556
: 58 0.278 0.333 0.278 0.333
; 59 0.278 0.333 0.278 0.333
< 60 0.584 0.584 0.584 0.584
= 61 0.584 0.584 0.584 0.584
> 62 0.584 0.584 0.584 0.584
? 63 0.556 0.611 0.556 0.611
@ 64 1.015 0.975 1.015 0.975
A 65 0.667 0.722 0.667 0.722
B 66 0.667 0.722 0.667 0.722
C 67 0.722 0.722 0.722 0.722
D 68 0.722 0.722 0.722 0.722
E 69 0.667 0.667 0.667 0.667
F 70 0.611 0.611 0.611 0.611
G 71 0.778 0.778 0.778 0.778
H 72 0.722 0.722 0.722 0.722
I 73 0.278 0.278 0.278 0.278
J 74 0.500 0.556 0.500 0.556
K 75 0.667 0.722 0.667 0.722
L 76 0.556 0.611 0.556 0.611
M 77 0.833 0.833 0.833 0.833
N 78 0.722 0.722 0.722 0.722
O 79 0.778 0.778 0.778 0.778
P 80 0.667 0.667 0.667 0.667
Q 81 0.778 0.778 0.778 0.778
R 82 0.722 0.722 0.722 0.722
S 83 0.667 0.667 0.667 0.667
T 84 0.611 0.611 0.611 0.611
U 85 0.722 0.722 0.722 0.722
V 86 0.667 0.667 0.667 0.667
W 87 0.944 0.944 0.944 0.944
X 88 0.667 0.667 0.667 0.667
Y 89 0.667 0.667 0.667 0.667
Z 90 0.611 0.611 0.611 0.611
[ 91 0.278 0.333 0.278 0.333
\ 92 0.278 0.278 0.278 0.278
] 93 0.278 0.333 0.278 0.333
^ 94 0.469 0.584 0.469 0.584
_ 95 0.556 0.556 0.556 0.556
` 96 0.333 0.333 0.333 0.333
a 97 0.556 0.556 0.556 0.556
b 98 0.556 0.611 0.556 0.611
c 99 0.500 0.556 0.500 0.556
d 100 0.556 0.611 0.556 0.611
e 101 0.556 0.556 0.556 0.556
f 102 0.278 0.333 0.278 0.333
g 103 0.556 0.611 0.556 0.611
h 104 0.556 0.611 0.556 0.611
i 105 0.222 0.278 0.222 0.278
j 106 0.222 0.278 0.222 0.278
k 107 0.500 0.556 0.500 0.556
l 108 0.222 0.278 0.222 0.278
m 109 0.833 0.889 0.833 0.889
n 110 0.556 0.611 0.556 0.611
o 111 0.556 0.611 0.556 0.611
p 112 0.556 0.611 0.556 0.611
q 113 0.556 0.611 0.556 0.611
r 114 0.333 0.389 0.333 0.389
s 115 0.500 0.556 0.500 0.556
t 116 0.278 0.333 0.278 0.333
u 117 0.556 0.611 0.556 0.611
v 118 0.500 0.556 0.500 0.556
w 119 0.722 0.778 0.722 0.778
x 120 0.500 0.556 0.500 0.556
y 121 0.500 0.556 0.500 0.556
z 122 0.500 0.500 0.500 0.500
{ 123 0.334 0.389 0.334 0.389
| 124 0.260 0.280 0.260 0.280
} 125 0.334 0.389 0.334 0.389
~ 126 0.584 0.584 0.584 0.584
€ 128 0.556 0.556 0.556 0.556
‚ 130 0.222 0.278 0.222 0.278
ƒ 131 0.556 0.556 0.556 0.556
„ 132 0.333 0.500 0.333 0.500
… 133 1.000 1.000 1.000 1.000
† 134 0.556 0.556 0.556 0.556
‡ 135 0.556 0.556 0.556 0.556
ˆ 136 0.333 0.333 0.333 0.333
‰ 137 1.000 1.000 1.000 1.000
Š 138 0.667 0.667 0.667 0.667
‹ 139 0.333 0.333 0.333 0.333
Π140 1.000 1.000 1.000 1.000
Ž 142 0.611 0.611 0.611 0.611
‘ 145 0.222 0.278 0.222 0.278
’ 146 0.222 0.278 0.222 0.278
“ 147 0.333 0.500 0.333 0.500
” 148 0.333 0.500 0.333 0.500
• 149 0.350 0.350 0.350 0.350
– 150 0.556 0.556 0.556 0.556
— 151 1.000 1.000 1.000 1.000
˜ 152 0.333 0.333 0.333 0.333
™ 153 1.000 1.000 1.000 1.000
š 154 0.500 0.556 0.500 0.556
› 155 0.333 0.333 0.333 0.333
œ 156 0.944 0.944 0.944 0.944
ž 158 0.500 0.500 0.500 0.500
Ÿ 159 0.667 0.667 0.667 0.667
160 0.278 0.278 0.278 0.278
¡ 161 0.333 0.333 0.333 0.333
¢ 162 0.556 0.556 0.556 0.556
£ 163 0.556 0.556 0.556 0.556
¤ 164 0.556 0.556 0.556 0.556
¥ 165 0.556 0.556 0.556 0.556
¦ 166 0.260 0.280 0.260 0.280
§ 167 0.556 0.556 0.556 0.556
¨ 168 0.333 0.333 0.333 0.333
© 169 0.737 0.737 0.737 0.737
ª 170 0.370 0.370 0.370 0.370
« 171 0.556 0.556 0.556 0.556
¬ 172 0.584 0.584 0.584 0.584
- 173 0.333 0.333 0.333 0.333
® 174 0.737 0.737 0.737 0.737
¯ 175 0.552 0.552 0.552 0.552
° 176 0.400 0.400 0.400 0.400
± 177 0.549 0.549 0.549 0.549
² 178 0.333 0.333 0.333 0.333
³ 179 0.333 0.333 0.333 0.333
´ 180 0.333 0.333 0.333 0.333
µ 181 0.576 0.576 0.576 0.576
¶ 182 0.537 0.556 0.537 0.556
· 183 0.333 0.333 0.333 0.333
¸ 184 0.333 0.333 0.333 0.333
¹ 185 0.333 0.333 0.333 0.333
º 186 0.365 0.365 0.365 0.365
» 187 0.556 0.556 0.556 0.556
¼ 188 0.834 0.834 0.834 0.834
½ 189 0.834 0.834 0.834 0.834
¾ 190 0.834 0.834 0.834 0.834
¿ 191 0.611 0.611 0.611 0.611
À 192 0.667 0.722 0.667 0.722
Á 193 0.667 0.722 0.667 0.722
 194 0.667 0.722 0.667 0.722
à 195 0.667 0.722 0.667 0.722
Ä 196 0.667 0.722 0.667 0.722
Å 197 0.667 0.722 0.667 0.722
Æ 198 1.000 1.000 1.000 1.000
Ç 199 0.722 0.722 0.722 0.722
È 200 0.667 0.667 0.667 0.667
É 201 0.667 0.667 0.667 0.667
Ê 202 0.667 0.667 0.667 0.667
Ë 203 0.667 0.667 0.667 0.667
Ì 204 0.278 0.278 0.278 0.278
Í 205 0.278 0.278 0.278 0.278
Î 206 0.278 0.278 0.278 0.278
Ï 207 0.278 0.278 0.278 0.278
Ð 208 0.722 0.722 0.722 0.722
Ñ 209 0.722 0.722 0.722 0.722
Ò 210 0.778 0.778 0.778 0.778
Ó 211 0.778 0.778 0.778 0.778
Ô 212 0.778 0.778 0.778 0.778
Õ 213 0.778 0.778 0.778 0.778
Ö 214 0.778 0.778 0.778 0.778
× 215 0.584 0.584 0.584 0.584
Ø 216 0.778 0.778 0.778 0.778
Ù 217 0.722 0.722 0.722 0.722
Ú 218 0.722 0.722 0.722 0.722
Û 219 0.722 0.722 0.722 0.722
Ü 220 0.722 0.722 0.722 0.722
Ý 221 0.667 0.667 0.667 0.667
Þ 222 0.667 0.667 0.667 0.667
ß 223 0.611 0.611 0.611 0.611
à 224 0.556 0.556 0.556 0.556
á 225 0.556 0.556 0.556 0.556
â 226 0.556 0.556 0.556 0.556
ã 227 0.556 0.556 0.556 0.556
ä 228 0.556 0.556 0.556 0.556
å 229 0.556 0.556 0.556 0.556
æ 230 0.889 0.889 0.889 0.889
ç 231 0.500 0.556 0.500 0.556
è 232 0.556 0.556 0.556 0.556
é 233 0.556 0.556 0.556 0.556
ê 234 0.556 0.556 0.556 0.556
ë 235 0.556 0.556 0.556 0.556
ì 236 0.278 0.278 0.278 0.278
í 237 0.278 0.278 0.278 0.278
î 238 0.278 0.278 0.278 0.278
ï 239 0.278 0.278 0.278 0.278
ð 240 0.556 0.611 0.556 0.611
ñ 241 0.556 0.611 0.556 0.611
ò 242 0.556 0.611 0.556 0.611
ó 243 0.556 0.611 0.556 0.611
ô 244 0.556 0.611 0.556 0.611
õ 245 0.556 0.611 0.556 0.611
ö 246 0.556 0.611 0.556 0.611
÷ 247 0.549 0.549 0.549 0.549
ø 248 0.611 0.611 0.611 0.611
ù 249 0.556 0.611 0.556 0.611
ú 250 0.556 0.611 0.556 0.611
û 251 0.556 0.611 0.556 0.611
ü 252 0.556 0.611 0.556 0.611
ý 253 0.500 0.556 0.500 0.556
þ 254 0.556 0.611 0.556 0.611
ÿ 255 0.500 0.556 0.500 0.556
times
char unicode normal bold italic bolditalic
32 0.250 0.250 0.250 0.250
! 33 0.333 0.333 0.333 0.389
" 34 0.408 0.555 0.420 0.555
# 35 0.500 0.500 0.500 0.500
$ 36 0.500 0.500 0.500 0.500
% 37 0.833 1.000 0.833 0.833
& 38 0.778 0.833 0.778 0.778
' 39 0.180 0.278 0.214 0.278
( 40 0.333 0.333 0.333 0.333
) 41 0.333 0.333 0.333 0.333
* 42 0.500 0.500 0.500 0.500
+ 43 0.564 0.570 0.675 0.570
, 44 0.250 0.250 0.250 0.250
- 45 0.333 0.333 0.333 0.333
. 46 0.250 0.250 0.250 0.250
/ 47 0.278 0.278 0.278 0.278
0 48 0.500 0.500 0.500 0.500
1 49 0.500 0.500 0.500 0.500
2 50 0.500 0.500 0.500 0.500
3 51 0.500 0.500 0.500 0.500
4 52 0.500 0.500 0.500 0.500
5 53 0.500 0.500 0.500 0.500
6 54 0.500 0.500 0.500 0.500
7 55 0.500 0.500 0.500 0.500
8 56 0.500 0.500 0.500 0.500
9 57 0.500 0.500 0.500 0.500
: 58 0.278 0.333 0.333 0.333
; 59 0.278 0.333 0.333 0.333
< 60 0.564 0.570 0.675 0.570
= 61 0.564 0.570 0.675 0.570
> 62 0.564 0.570 0.675 0.570
? 63 0.444 0.500 0.500 0.500
@ 64 0.921 0.930 0.920 0.832
A 65 0.722 0.722 0.611 0.667
B 66 0.667 0.667 0.611 0.667
C 67 0.667 0.722 0.667 0.667
D 68 0.722 0.722 0.722 0.722
E 69 0.611 0.667 0.611 0.667
F 70 0.556 0.611 0.611 0.667
G 71 0.722 0.778 0.722 0.722
H 72 0.722 0.778 0.722 0.778
I 73 0.333 0.389 0.333 0.389
J 74 0.389 0.500 0.444 0.500
K 75 0.722 0.778 0.667 0.667
L 76 0.611 0.667 0.556 0.611
M 77 0.889 0.944 0.833 0.889
N 78 0.722 0.722 0.667 0.722
O 79 0.722 0.778 0.722 0.722
P 80 0.556 0.611 0.611 0.611
Q 81 0.722 0.778 0.722 0.722
R 82 0.667 0.722 0.611 0.667
S 83 0.556 0.556 0.500 0.556
T 84 0.611 0.667 0.556 0.611
U 85 0.722 0.722 0.722 0.722
V 86 0.722 0.722 0.611 0.667
W 87 0.944 1.000 0.833 0.889
X 88 0.722 0.722 0.611 0.667
Y 89 0.722 0.722 0.556 0.611
Z 90 0.611 0.667 0.556 0.611
[ 91 0.333 0.333 0.389 0.333
\ 92 0.278 0.278 0.278 0.278
] 93 0.333 0.333 0.389 0.333
^ 94 0.469 0.581 0.422 0.570
_ 95 0.500 0.500 0.500 0.500
` 96 0.333 0.333 0.333 0.333
a 97 0.444 0.500 0.500 0.500
b 98 0.500 0.556 0.500 0.500
c 99 0.444 0.444 0.444 0.444
d 100 0.500 0.556 0.500 0.500
e 101 0.444 0.444 0.444 0.444
f 102 0.333 0.333 0.278 0.333
g 103 0.500 0.500 0.500 0.500
h 104 0.500 0.556 0.500 0.556
i 105 0.278 0.278 0.278 0.278
j 106 0.278 0.333 0.278 0.278
k 107 0.500 0.556 0.444 0.500
l 108 0.278 0.278 0.278 0.278
m 109 0.778 0.833 0.722 0.778
n 110 0.500 0.556 0.500 0.556
o 111 0.500 0.500 0.500 0.500
p 112 0.500 0.556 0.500 0.500
q 113 0.500 0.556 0.500 0.500
r 114 0.333 0.444 0.389 0.389
s 115 0.389 0.389 0.389 0.389
t 116 0.278 0.333 0.278 0.278
u 117 0.500 0.556 0.500 0.556
v 118 0.500 0.500 0.444 0.444
w 119 0.722 0.722 0.667 0.667
x 120 0.500 0.500 0.444 0.500
y 121 0.500 0.500 0.444 0.444
z 122 0.444 0.444 0.389 0.389
{ 123 0.480 0.394 0.400 0.348
| 124 0.200 0.220 0.275 0.220
} 125 0.480 0.394 0.400 0.348
~ 126 0.541 0.520 0.541 0.570
€ 128 0.500 0.500 0.500 0.500
‚ 130 0.333 0.333 0.333 0.333
ƒ 131 0.500 0.500 0.500 0.500
„ 132 0.444 0.500 0.556 0.500
… 133 1.000 1.000 0.889 1.000
† 134 0.500 0.500 0.500 0.500
‡ 135 0.500 0.500 0.500 0.500
ˆ 136 0.333 0.333 0.333 0.333
‰ 137 1.000 1.000 1.000 1.000
Š 138 0.556 0.556 0.500 0.556
‹ 139 0.333 0.333 0.333 0.333
Π140 0.889 1.000 0.944 0.944
Ž 142 0.611 0.667 0.556 0.611
‘ 145 0.333 0.333 0.333 0.333
’ 146 0.333 0.333 0.333 0.333
“ 147 0.444 0.500 0.556 0.500
” 148 0.444 0.500 0.556 0.500
• 149 0.350 0.350 0.350 0.350
– 150 0.500 0.500 0.500 0.500
— 151 1.000 1.000 0.889 1.000
˜ 152 0.333 0.333 0.333 0.333
™ 153 0.980 1.000 0.980 1.000
š 154 0.389 0.389 0.389 0.389
› 155 0.333 0.333 0.333 0.333
œ 156 0.722 0.722 0.667 0.722
ž 158 0.444 0.444 0.389 0.389
Ÿ 159 0.722 0.722 0.556 0.611
160 0.250 0.250 0.250 0.250
¡ 161 0.333 0.333 0.389 0.389
¢ 162 0.500 0.500 0.500 0.500
£ 163 0.500 0.500 0.500 0.500
¤ 164 0.500 0.500 0.500 0.500
¥ 165 0.500 0.500 0.500 0.500
¦ 166 0.200 0.220 0.275 0.220
§ 167 0.500 0.500 0.500 0.500
¨ 168 0.333 0.333 0.333 0.333
© 169 0.760 0.747 0.760 0.747
ª 170 0.276 0.300 0.276 0.266
« 171 0.500 0.500 0.500 0.500
¬ 172 0.564 0.570 0.675 0.606
- 173 0.333 0.333 0.333 0.333
® 174 0.760 0.747 0.760 0.747
¯ 175 0.500 0.500 0.500 0.500
° 176 0.400 0.400 0.400 0.400
± 177 0.549 0.549 0.549 0.549
² 178 0.300 0.300 0.300 0.300
³ 179 0.300 0.300 0.300 0.300
´ 180 0.333 0.333 0.333 0.333
µ 181 0.576 0.576 0.576 0.576
¶ 182 0.453 0.540 0.523 0.500
· 183 0.333 0.333 0.250 0.250
¸ 184 0.333 0.333 0.333 0.333
¹ 185 0.300 0.300 0.300 0.300
º 186 0.310 0.330 0.310 0.300
» 187 0.500 0.500 0.500 0.500
¼ 188 0.750 0.750 0.750 0.750
½ 189 0.750 0.750 0.750 0.750
¾ 190 0.750 0.750 0.750 0.750
¿ 191 0.444 0.500 0.500 0.500
À 192 0.722 0.722 0.611 0.667
Á 193 0.722 0.722 0.611 0.667
 194 0.722 0.722 0.611 0.667
à 195 0.722 0.722 0.611 0.667
Ä 196 0.722 0.722 0.611 0.667
Å 197 0.722 0.722 0.611 0.667
Æ 198 0.889 1.000 0.889 0.944
Ç 199 0.667 0.722 0.667 0.667
È 200 0.611 0.667 0.611 0.667
É 201 0.611 0.667 0.611 0.667
Ê 202 0.611 0.667 0.611 0.667
Ë 203 0.611 0.667 0.611 0.667
Ì 204 0.333 0.389 0.333 0.389
Í 205 0.333 0.389 0.333 0.389
Î 206 0.333 0.389 0.333 0.389
Ï 207 0.333 0.389 0.333 0.389
Ð 208 0.722 0.722 0.722 0.722
Ñ 209 0.722 0.722 0.667 0.722
Ò 210 0.722 0.778 0.722 0.722
Ó 211 0.722 0.778 0.722 0.722
Ô 212 0.722 0.778 0.722 0.722
Õ 213 0.722 0.778 0.722 0.722
Ö 214 0.722 0.778 0.722 0.722
× 215 0.564 0.570 0.675 0.570
Ø 216 0.722 0.778 0.722 0.722
Ù 217 0.722 0.722 0.722 0.722
Ú 218 0.722 0.722 0.722 0.722
Û 219 0.722 0.722 0.722 0.722
Ü 220 0.722 0.722 0.722 0.722
Ý 221 0.722 0.722 0.556 0.611
Þ 222 0.556 0.611 0.611 0.611
ß 223 0.500 0.556 0.500 0.500
à 224 0.444 0.500 0.500 0.500
á 225 0.444 0.500 0.500 0.500
â 226 0.444 0.500 0.500 0.500
ã 227 0.444 0.500 0.500 0.500
ä 228 0.444 0.500 0.500 0.500
å 229 0.444 0.500 0.500 0.500
æ 230 0.667 0.722 0.667 0.722
ç 231 0.444 0.444 0.444 0.444
è 232 0.444 0.444 0.444 0.444
é 233 0.444 0.444 0.444 0.444
ê 234 0.444 0.444 0.444 0.444
ë 235 0.444 0.444 0.444 0.444
ì 236 0.278 0.278 0.278 0.278
í 237 0.278 0.278 0.278 0.278
î 238 0.278 0.278 0.278 0.278
ï 239 0.278 0.278 0.278 0.278
ð 240 0.500 0.500 0.500 0.500
ñ 241 0.500 0.556 0.500 0.556
ò 242 0.500 0.500 0.500 0.500
ó 243 0.500 0.500 0.500 0.500
ô 244 0.500 0.500 0.500 0.500
õ 245 0.500 0.500 0.500 0.500
ö 246 0.500 0.500 0.500 0.500
÷ 247 0.549 0.549 0.549 0.549
ø 248 0.500 0.500 0.500 0.500
ù 249 0.500 0.556 0.500 0.556
ú 250 0.500 0.556 0.500 0.556
û 251 0.500 0.556 0.500 0.556
ü 252 0.500 0.556 0.500 0.556
ý 253 0.500 0.500 0.444 0.444
þ 254 0.500 0.556 0.500 0.500
ÿ 255 0.500 0.500 0.444 0.444
courier
All characters in every style are 0.600 (font is monospaced)
Once you have determined the width of your string with the above table you need to convert the answer to your desired unit of measurement.
width (in inches) = (character or string width * font size) / (72 pt/in)
width (in mm) = (character or string width * font size * 25.4 mm/in) / (72 pt/in)
The only caveat to using the above I could think of was if your output pdf was making use of kerning pairs. My output files did not appear to be using kerning pairs, so I did not explore the issue further. If for some reason this is an issue for you, you would need to adjust your widths slightly for each kerning pair as it occurred.
The calculation of height is much less involved. The height of a single line of text is simply the font size. A line of text at size 10 will take up 10 pt.
If you are wanting to calculate multiple lines of text you will need to account for the "line height" (essentially the amount of whitespace between lines). In my testing I found that jsPDF uses a default line height of 115% (1.15x) of the font size. Thus your calculation of line height would become:
height = font size * number of lines * line height
Example:
height = 10 pt * 5 lines * 1.15
height = 57.5 pt
You then simply convert to your desired unit of measurement as above.
Solution 3:
It's now included in jsPDF:
doc.getTextWidth(text);
Post a Comment for "How To Calculate Width And Height Of Text In Jspdf?"