yayure / emoji-line-break.js

Split emoji text into multiple lines.

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

Nodejs

npm install emoji-line-break

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)

Browser

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/emoji-line-break.canvas2d.min.js"></script>

Full ver. (size~63.4kb)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/emoji-line-break.min.js"></script>

Usage

Syntax

emojiLineBreak(text[, options]);

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

Examples

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:

result: [
  'Lorem ipsum dolor sit amet,☕☕☕☕☕☕☕☕☕☕☕☕',
  '☕☕☕☕☕☕☕☕☕☕☕☕☕',
  '',
  'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea ',
  'commodo consequat.'
]

Options

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