mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
fix: word-break seperators (#2593)
This commit is contained in:
Niklas von Hertzen
GitHub
parent
4c360fc1f0
commit
e9f7f48d57
|
|
@ -70,6 +70,9 @@ const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
|
|||
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 breaker = LineBreaker(str, {
|
||||
lineBreak: styles.lineBreak,
|
||||
|
|
@ -81,7 +84,24 @@ const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
|
|||
|
||||
while (!(bk = breaker.next()).done) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,137 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Text tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
.small{
|
||||
font-size:14px;
|
||||
line-height: 1vw;
|
||||
}
|
||||
<head>
|
||||
<title>Text tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
.medium{
|
||||
font-size:18px;
|
||||
line-height: 2vw;
|
||||
}
|
||||
.large{
|
||||
font-size:24px;
|
||||
line-height: 3vw;
|
||||
}
|
||||
div{
|
||||
float:left;
|
||||
}
|
||||
h2 {
|
||||
clear:both;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 4vw;
|
||||
}
|
||||
.small {
|
||||
font-size: 14px;
|
||||
line-height: 1vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 3vw;
|
||||
}
|
||||
.medium {
|
||||
font-size: 18px;
|
||||
line-height: 2vw;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
line-height: 2vw;
|
||||
}
|
||||
</style>
|
||||
.large {
|
||||
font-size: 24px;
|
||||
line-height: 3vw;
|
||||
}
|
||||
|
||||
</head>
|
||||
<body> <h1><h1> 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>
|
||||
div {
|
||||
float: left;
|
||||
}
|
||||
|
||||
<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 {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
<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>
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 4vw;
|
||||
}
|
||||
|
||||
<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 {
|
||||
font-size: 24px;
|
||||
line-height: 3vw;
|
||||
}
|
||||
|
||||
<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>
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
line-height: 2vw;
|
||||
}
|
||||
|
||||
<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>
|
||||
.raw {
|
||||
font-size: 60px;
|
||||
word-spacing: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2><h2> 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><h3> 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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
|
||||
<h1><h1> 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><h2> 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><h3> 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user