diff --git a/README.md b/README.md index 9ce0522e..ec131dec 100644 --- a/README.md +++ b/README.md @@ -281,6 +281,7 @@ See also [Ken Burns parameters](#ken-burns-parameters). - `text` - Title text to show, keep it short - `textColor` - default `#ffffff` - `position` - See [Position parameter](#position-parameter) +- `splitByGrapheme` - To split strings that have no white space concept. This is a cheap way to help with chinese/japanese. Default `false` See also [Ken Burns parameters](#ken-burns-parameters) @@ -288,6 +289,7 @@ See also [Ken Burns parameters](#ken-burns-parameters) - `fontPath` - See `defaults.layer.fontPath` - `text` - Subtitle text to show - `textColor` - default `#ffffff` +- `splitByGrapheme` - To split strings that have no white space concept. This is a cheap way to help with chinese/japanese. Default `false` #### Layer type 'title-background' diff --git a/index.d.ts b/index.d.ts index 6895c815..f05d5479 100644 --- a/index.d.ts +++ b/index.d.ts @@ -528,7 +528,11 @@ declare namespace Editly { * Position. */ position?: Position; - + /** + * To split strings that have no white space concept. This is a cheap way to help with chinese/japanese + * Defaults to `false`. + */ + splitByGrapheme?: boolean; } interface SubtitleLayer extends BaseLayer { @@ -559,7 +563,11 @@ declare namespace Editly { * WARNING: Undocumented feature! */ backgroundColor?: string; - + /** + * To split strings that have no white space concept. This is a cheap way to help with chinese/japanese + * Defaults to `false`. + */ + splitByGrapheme?: boolean; } /** diff --git a/sources/fabric/fabricFrameSources.js b/sources/fabric/fabricFrameSources.js index f40c3a36..7a67f196 100644 --- a/sources/fabric/fabricFrameSources.js +++ b/sources/fabric/fabricFrameSources.js @@ -188,7 +188,7 @@ export async function linearGradientFrameSource({ width, height, params }) { } export async function subtitleFrameSource({ width, height, params }) { - const { text, textColor = '#ffffff', backgroundColor = 'rgba(0,0,0,0.3)', fontFamily = defaultFontFamily, delay = 0, speed = 1 } = params; + const { text, textColor = '#ffffff', backgroundColor = 'rgba(0,0,0,0.3)', fontFamily = defaultFontFamily, delay = 0, speed = 1, splitByGrapheme } = params; async function onRender(progress, canvas) { const easedProgress = easeOutExpo(Math.max(0, Math.min((progress - delay) * speed, 1))); @@ -199,7 +199,7 @@ export async function subtitleFrameSource({ width, height, params }) { const textBox = new fabric.Textbox(text, { fill: textColor, fontFamily, - + splitByGrapheme, fontSize: min / 20, textAlign: 'left', width: width - padding * 2, @@ -263,7 +263,7 @@ export async function imageOverlayFrameSource({ params, width, height }) { } export async function titleFrameSource({ width, height, params }) { - const { text, textColor = '#ffffff', fontFamily = defaultFontFamily, position = 'center', zoomDirection = 'in', zoomAmount = 0.2 } = params; + const { text, textColor = '#ffffff', fontFamily = defaultFontFamily, position = 'center', zoomDirection = 'in', zoomAmount = 0.2, splitByGrapheme } = params; async function onRender(progress, canvas) { // console.log('progress', progress); @@ -278,6 +278,7 @@ export async function titleFrameSource({ width, height, params }) { const textBox = new fabric.Textbox(text, { fill: textColor, + splitByGrapheme, fontFamily, fontSize, textAlign: 'center',