niklasvh / css-line-break Goto Github PK

A JavaScript library for Line Breaking and identifying Word Boundaries, implementing the Unicode Line Breaking Algorithm (UAX #14)

License: MIT License

TypeScript 100.00%

word-wrap line-break word-break line-breaking

css-line-break's Introduction

css-line-break

A JavaScript library for Line Breaking and identifying Word Boundaries, implementing the Unicode Line Breaking Algorithm (UAX #14)

Line breaking, also known as word wrapping, is the process of breaking a section of text into lines such that it will fit in the available width of a page, window or other display area. The Unicode Line Breaking Algorithm performs part of this process. Given an input text, it produces a set of positions called "break opportunities" that are appropriate points to begin a new line. The selection of actual line break positions from the set of break opportunities is not covered by the Unicode Line Breaking Algorithm, but is in the domain of higher level software with knowledge of the available width and the display size of the text.

In addition, the module implements CSS specific tailoring options to line breaking as defined in CSS Text Module Level 3.

Installing

You can install the module via npm:

npm install css-line-break

Usage

The LineBreaker creates an iterator that returns Breaks for a given text.

LineBreaker(text, [options]);

Example

JSFiddle

import {LineBreaker} from 'css-line-break';

const breaker = LineBreaker('Lorem ipsum lol.', {
    lineBreak: 'strict',
    wordBreak: 'normal'
});

const words = [];
let bk;

while (!(bk = breaker.next()).done) {
    words.push(bk.value.slice());
}

assert.deepEqual(words, ['Lorem ', 'ipsum ', 'lol.']);

Options

The following parameters are available for the options:

lineBreak: normal | strict
wordBreak: normal | break-all | break-word | keep-all

For more information how they affect the line breaking algorithms, check out CSS Text Module Level 3.

Testing

You can run the test suite with:

npm test

The library implements all the LineBreakTest.txt tests and a number of CSS web-platform-tests.

css-line-break's People

Contributors

Stargazers

Watchers

css-line-break's Issues

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

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 ?

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.

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

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?

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>

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.

Make the object returned by `LineBreaker` an iterable

This would allow it to be used in for...of loops and spread syntax.