UNPKG

@mattuy/text-frame

Version:

a javascript tool to split long text into pages, with typesetting prohibition processed and unicode full support. 一个将长文本分成若干页的js工具,处理排版禁则,支持Unicode

131 lines (102 loc) 3.58 kB
# Options ## API Signature ```typescript export function computeTextFrames(options: FrameOptions): TextFrame[]; export function renderFrame(context: CanvasRenderingContext2D, frame: TextFrame, clear: boolean): void; ``` ## FrameOptions ### viewWidth * Type: `number` * Default: `300` * Description: view width, must equal to canvas.style.width, but be numeric ### viewHeight * Type: `number` * Default: `150` * Description: view height ### canvasWidth * Type: `number` * Default: compute with `viewWidth` * Description: canvas.width,default is `viewWidth * window.devicePixelRatio` ### canvasHeight * Type: `number` * Default: compute with `viewHeight` * Description: canvas.height is `viewHeight * window.devicePixelRatio` ### margin * Type: `number | { left?: number, right?: number, top?: number, bottom?: number }` * Default: `0` * Description: margin for **frame** ### lineStartProhibitedMarks * Type: `string` * Default: `、,,..。::;;!!??'"」』”’)]})】〗〕]}》〉–~~—·.‧•・// ` * Description: prohibition characters for line start ### lineEndProhibitedMarks * Type: `string` * Default: `「『“‘([{(【〖〔[〔《〈//` * Description: prohibition characters for line end ### unbreakableRule * Type: `RegExp` * Default: `/^(──|……|[\w\d]+)$/` * Description: unbreakable marks. If not empty, must be a RegExp instance. Marks match the rule will not be split into diffrent lines ### fragments * Type: `FragmentOptions[]` * Default: `null` * Description: text fragments, typically one paragraph one fragment ## FrameOptions & FragmentOptions Options for both frame and fragment. Fragment option will inhirit from frame option if it's empty except `margin`. ### fontFamily * Type: `string` * Default: `serif` * Description: font family ### fontSize * Type: `number` * Default: `16` * Description: font size ### fontWeight * Type: `string | number` * Default: `16` * Description: font weight, refer CSS `font-weight` ### color * Type: `string` * Default: `#000000` * Description: font color ### lineHeight * Type: `number` * Default: 1.5 * `fontSize` * Description: line height ### textIndent * Type: `number` * Default: `0` * Description: text indentation for first line of fragment. interal new line of a fragment is not processed ### textAlign * Type: `'center' | 'start' | 'end' | 'left' | 'right' | 'justify'` * Default: `start` * Description: text alignment, refer CSS `text-align` ### textAlignLast * Type: `'center' | 'start' | 'end' | 'left' | 'right' | 'justify'` * Default: `start` * Description: when `textAlign` is `justify`, how the last line is aligned. internal new line of a fragment is also processed. refer CSS `text-align-last` ### rtl * Type: `boolean` * Default: `false` * Description: if true, draw text from right to left ### trim * Type: `boolean` * Default: `false` * Description: if true, trim white characters of text of a fragment ### marginCollapse * Type: `boolean` * Default: `true` * Description: if true, the margin-top a fragment is the max of its own and the previous one. if `marginCollapse` of the previous fragment is `false`, margin of current fragment will not collapse ### noHeadMargin * Type: `boolean` * Default: `false` * Description: ignore margin-top if a fragment is on the top of a frame ## FragmentOptions ### margin * Type: `number | { left?: number, right?: number, top?: number, bottom?: number }` * Default: `0` * Description: margin of a **fragment** ### text * Type: `string` * Default: `''` * Description: text content of a fragment