fix: emoji line breaking (fix #1813) (#2621)

* fix: emoji line breaking (fix #1813)

* test: fix text.html reftest
This commit is contained in:
Niklas von Hertzen 2021-08-02 17:49:46 +08:00 committed by GitHub
parent 5dea36bd69
commit 7d788c6f3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 61 deletions

16
package-lock.json generated
View File

@ -5,10 +5,10 @@
"requires": true,
"packages": {
"": {
"version": "1.1.0",
"version": "1.1.4",
"license": "MIT",
"dependencies": {
"css-line-break": "1.1.1"
"css-line-break": "2.0.0"
},
"devDependencies": {
"@babel/cli": "^7.4.3",
@ -8630,9 +8630,9 @@
}
},
"node_modules/css-line-break": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
"integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.0.tgz",
"integrity": "sha512-zEKNpyrJHt4R3qAXLTdJkJc7F/4dkNWG+ij2CHF6/o346QJ6GSjD+oaKOUQoibOy0Wvl3F8IYdEEx3yb/+rdJw==",
"dependencies": {
"base64-arraybuffer": "^0.2.0"
}
@ -32811,9 +32811,9 @@
}
},
"css-line-break": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
"integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.0.tgz",
"integrity": "sha512-zEKNpyrJHt4R3qAXLTdJkJc7F/4dkNWG+ij2CHF6/o346QJ6GSjD+oaKOUQoibOy0Wvl3F8IYdEEx3yb/+rdJw==",
"requires": {
"base64-arraybuffer": "^0.2.0"
}

View File

@ -118,6 +118,6 @@
"homepage": "https://html2canvas.hertzen.com",
"license": "MIT",
"dependencies": {
"css-line-break": "1.1.1"
"css-line-break": "2.0.0"
}
}

View File

@ -88,58 +88,66 @@
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
<div class="raw">
<span>[AB / CD]</span>
</div>
<div style="font-family:Tahoma;">
<h2>Tahoma</h2>
<ol class="small">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
<ol class="medium">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
<ol class="large">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
</div>
<h2>&lt;h2&gt; text-transform</h2>
<ul>
<li style="text-transform:none;">text-transform:none;</li>
<li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)
</li>
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
</ul>
<h3>&lt;h3&gt; misc text alignments</h3>
<ul>
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always
be correct)
</li>
<li style="line-height:35px;">line-height:35px; <br/>(same goes for line-height)</li>
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
<li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
<li style="font-variant:small-caps;">font-variant:small-caps;</li>
</ul>
<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
<div class="raw" style="">
<span>[AB / CD]</span>
</div>
<ol class="medium">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
<ol class="large">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
</div>
<div style="font-family:Tahoma;">
<h2>Tahoma</h2>
<ol class="small">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
<ol class="medium">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
<ol class="large">
<li style="text-decoration:none;">text-decoration:none;</li>
<li style="text-decoration:underline;">text-decoration:underline;</li>
<li style="text-decoration:overline;">text-decoration:overline;</li>
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
</ol>
</div>
<h2>&lt;h2&gt; text-transform</h2>
<ul>
<li style="text-transform:none;">text-transform:none;</li>
<li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)
</li>
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
</ul>
<h3>&lt;h3&gt; misc text alignments</h3>
<ul>
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always
be correct)
</li>
<li style="line-height:35px;">line-height:35px; <br/>(same goes for line-height)</li>
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
<li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
<li style="font-variant:small-caps;">font-variant:small-caps;</li>
</ul>
<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
<div class="raw" style="">
<span>[AB / CD]</span>
</div>
<div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
</body>
</html>