English | 简体中文

emoji-line-break.js

 

Split emoji string into an array. The purpose is to solve the problem of line wrapping drawn on Canvas with emoji string. (demo)

Installation

$3

``shell
npm install emoji-line-break
`
`javascript
var emojiLineBreak = require('emoji-line-break');
`
>You should disable @babel/plugin-transform-unicode-regex if you use babel to convert es6 to es5. (e.g)

$3

You can use this smaller version if you can provide the canvas2d. (size~15.3kb)
`html

`

Full ver. (size~63.4kb)
`html

`

Usage

$3

`javascript
emojiLineBreak(text[, options]);
`

- text
- Type: String
- The string to be split.
- options (optional)
- Type: Object
- Split string configuration. Check out the available options.

$3

`javascript
var text = Lorem ipsum dolor sit amet,☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕☕

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.;

console.log('result:', emojiLineBreak(text, {
lang: 'en',
wordBreak: 'break-word',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: '16px',
width: '500px'
}));
`
output:
`javascript
result: [
'Lorem ipsum dolor sit amet,☕☕☕☕☕☕☕☕☕☕☕☕',
'☕☕☕☕☕☕☕☕☕☕☕☕☕',
'',
'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea ',
'commodo consequat.'
]
`

$3

#### canvas2d (optional)
- Type: CanvasRenderingContext2D
- Default: null

In an environment that supports Canvas, you can provide the CanvasRenderingContext2D to support all languages, improve line break precision and customize the values of fontWeight and fontFamily.
>You must pass in the CanvasRenderingContext2D if you use the smaller version.

#### lang (optional)
- Type: String
- Default: en
- Options:
- en: Matches and calculates 26 English uppercase, lowercase letters and basic English punctuation in the split string(text).
- zh: Matches and calculates Chinese, Chinese basic punctuation characters, 26 English uppercase, lowercase letters and English basic punctuation characters in the split string(text).

Set the language used.
>This option will be invalid when the canvas2d option is provided.

#### wordBreak (optional)
- Type: String
- Default: break-word
- Options:
- break-all: To prevent overflow, word breaks should be inserted between any two characters.
- break-word: To prevent overflow, word breaks should be inserted between any two words.(All characters before any space are counted as a single word)

Specify how to break lines within words.

#### fontWeight (optional)
- Type: String
- Default: normal
- Options:
- lighter: Lighter font weight.
- normal: Normal font weight.
- bold: Bold font weight.

Set the font weight.
>This option supports custom values when the canvas2d option is provided.

#### fontFamily (optional)
- Type: String
- Default: sans-serif
- Options:
- serif: serif font family.
- sans-serif: sans-serif font family.
- Arial: Arial font family.
- cursive: cursive font family.

Set the font family.
>This option supports custom values when the canvas2d option is provided.

#### fontSize (optional)
- Type: String|Number
- Default: 16px

Set the font size, only supports px.

#### width (optional)
- Type: String|Number
- Default: 500px

Set the width of the text container, only supports px`.

Dependencies

- @mathiasbynens/emoji-regex

License

MIT © Yayure