mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

fix: word-break seperators (#2593)

Browse Source
This commit is contained in:
Niklas von Hertzen 2021-07-15 21:05:26 +08:00 committed by GitHub
parent 4c360fc1f0
commit e9f7f48d57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 151 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/css/layout/text.ts
View File

@ -70,6 +70,9 @@ const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles); return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
}; };
// https://drafts.csswg.org/css-text/#word-separator
const wordSeparators = [0x0020, 0x00a0, 0x1361, 0x10100, 0x10101, 0x1039, 0x1091];
const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => { const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
const breaker = LineBreaker(str, { const breaker = LineBreaker(str, {
lineBreak: styles.lineBreak, lineBreak: styles.lineBreak,
@ -81,7 +84,24 @@ const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
while (!(bk = breaker.next()).done) { while (!(bk = breaker.next()).done) {
if (bk.value) { if (bk.value) {
words.push(bk.value.slice()); const value = bk.value.slice();
const codePoints = toCodePoints(value);
let word = '';
codePoints.forEach((codePoint) => {
if (wordSeparators.indexOf(codePoint) === -1) {
word += fromCodePoint(codePoint);
} else {
if (word.length) {
words.push(word);
}
words.push(fromCodePoint(codePoint));
word = '';
}
});
if (word.length) {
words.push(word);
}
} }
} }

252
tests/reftests/text/text.html
View File

@ -1,137 +1,145 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Text tests</title> <title>Text tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script> <script type="text/javascript" src="../../test.js"></script>
<style> <style>
body { body {
font-family: Arial; font-family: Arial;
} }
.small{
font-size:14px;
line-height: 1vw;
}
.medium{ .small {
font-size:18px; font-size: 14px;
line-height: 2vw; line-height: 1vw;
} }
.large{
font-size:24px;
line-height: 3vw;
}
div{
float:left;
}
h2 {
clear:both;
}
h1 {
font-size: 36px;
line-height: 4vw;
}
h2 { .medium {
font-size: 24px; font-size: 18px;
line-height: 3vw; line-height: 2vw;
} }
h3 { .large {
font-size: 16px; font-size: 24px;
line-height: 2vw; line-height: 3vw;
} }
</style>
</head> div {
<body> <h1>&lt;h1&gt; text-decoration</h1> float: left;
<div style="font-family:Arial;"> }
<h2>Arial</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"> h2 {
<li style="text-decoration:none;">text-decoration:none;</li> clear: both;
<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:Verdana;"> h1 {
<h2>Verdana</h2> font-size: 36px;
<ol class="small"> line-height: 4vw;
<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"> h2 {
<li style="text-decoration:none;">text-decoration:none;</li> font-size: 24px;
<li style="text-decoration:underline;">text-decoration:underline;</li> line-height: 3vw;
<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;"> h3 {
<h2>Tahoma</h2> font-size: 16px;
<ol class="small"> line-height: 2vw;
<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"> .raw {
<li style="text-decoration:none;">text-decoration:none;</li> font-size: 60px;
<li style="text-decoration:underline;">text-decoration:underline;</li> word-spacing: 30px;
<li style="text-decoration:overline;">text-decoration:overline;</li> }
<li style="text-decoration:line-through;">text-decoration:line-through;</li> </style>
</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> </head>
<ul> <body>
<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> <h1>&lt;h1&gt; text-decoration</h1>
<div style="font-family:Arial;">
<h2>Arial</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>
</body> <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:Verdana;">
<h2>Verdana</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>
<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>
</div>
</body>
</html> </html>