niklasvh / css-line-break Goto Github PK
View Code? Open in Web Editor NEWA JavaScript library for Line Breaking and identifying Word Boundaries, implementing the Unicode Line Breaking Algorithm (UAX #14)
License: MIT License
css-line-break's People
Contributors
Stargazers
Watchers
Forkers
eugenesqr akira-cn billbai ideacome-frontend tatwirat wujiiu sibnerian andrei-cacio aleab vimalselva27 horseson2018 manhcuong1414 leavesster netless-io ns135135 pasieronen rvalery yangshangbo kishek reson-acss-line-break's Issues
incorrect line breaks on some Chinese punctuation like period(CL = 17) commas(NS = 21) and quotation(QU = 23)
it renders correctly in the browser when set the CSS word-break to break-word but incorrectly in canvas,
here is the test code:
<style>
body {
font-family: Arial;
}
.narrow {
padding: 5px;
border: 1px solid;
width: 8em;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.wordBreak{
word-break: break-word;
}
.keep {
word-break: keep-all;
}
</style>
<body>
<div>
<p class="wordBreak narrow" >。。。。。。。。。。。。。。。。。。。。。。。</p>
<p class="wordBreak narrow" >，，，，，，，，，，，，，，，，，，，，，，，</p>
<p class="wordBreak narrow" >；；；；；；；；；；；；；；；；；；；；；；；</p>
<p class="wordBreak narrow" >，，，，，，，，，，，，，，，，，，，，，，，</p>
<p class="wordBreak narrow" >、、、、、、、、、、、、、、、、、、、、、、、</p>
</div>
</body>Hope to support Unicode 15.1
Hi, this project supports Unicode 13. It's outdated. Hope to support the latest Unicode version.
https://www.unicode.org/Public/15.1.0/ucd/LineBreak.txt
Make the object returned by `LineBreaker` an iterable
This would allow it to be used in for...of loops and spread syntax.
Missing break opportunity before punctuation
Hello,
I tested the library on a simple example. I have the text "Is this a test ?" (notice the space before question mark).
When displayed in a browser, it can break between "test" and "?".
But css-line-break does not treat the space between "test" and "?" as a break opportunity.
breaker = window['css-line-break'].LineBreaker("Is this a test ?", {lineBreak: 'normal', wordBreak: 'normal'});
while (!(bk = breaker.next()).done) { console.log(bk.value.slice()); }
gives 4 chunk of text :
Is
this
a
test ?
I have set these CSS rules on the div displaying the text :
line-break: normal;
word-break: normal;
word-wrap: normal;
I expected the library to give me 5 chunks of text, separating the word "test" and the question mark. Is this something that I'm not doing correctly, or a bug in the library ?
Build breaks in IE11 view16.slice
Hello, my build breaks in IE11 saying slice is undefined.
var createTrieFromBase64 = exports.createTrieFromBase64 = function createTrieFromBase64(base64) {
var buffer = (0, _Util.decode)(base64);
var view32 = Array.isArray(buffer) ? (0, _Util.polyUint32Array)(buffer) : new Uint32Array(buffer);
var view16 = Array.isArray(buffer) ? (0, _Util.polyUint16Array)(buffer) : new Uint16Array(buffer);
var headerLength = 24;
var index = **view16.slice(headerLength / 2, view32[4] / 2);**
var data = view32[5] === 2 ? view16.slice((headerLength + view32[4]) / 2) : **view32.slice(Math.ceil((headerLength + view32[4]) / 4));**
return new Trie(view32[0], view32[1], view32[2], view32[3], index, data);
};
Regards
Incorrect line breaks on multi-code point emoji
First off, thank you for this great library! On the issue: for example, the 👨👩👧👦emoji, which is represented by a sequence the four emoji code points and zero width joiners result in breaks for each of the emoji code points.
Chrome breaks NBSP (A9) if break-all or break-word is used
it seems that at least Chrome does consider a possible break-point when styling is set to break-all or break-word (I did not extensively test other browsers).
I realized this when using html2canvas (which uses this library) and there were odd overlapping text-renderings:
since this library does not break-up but Chrome does, the text-boundaries for the part around the were wrong for the parsed rendering nodes/information (i.e. when the text at the break-point was finally rendered).
I am not sure, if Chrome handles this standard-conform or not: the CSS specification seems not very clear about which letters can or cannot be split up when break-all or break-word is used.
E.g. for overflow-wrap-break-word it says:
An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line...
Especially the part "if there are no otherwise-acceptable break points in the line" seems to be open to interpretation to me ... it seems Chrome does consider acceptable.
Example in the README doesn't work
I simply copy paste the example in Chrome and I only get letters instead of words. Am I missing something?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.