fabricjs/fabric.js

[Bug]: TextBox multi-line text textAlign: justify does not take effect

Closed

#9,132 opened on Jul 29, 2023

 (5 comments) (0 reactions) (0 assignees)TypeScript (3,620 forks)batch import
help wantedtext

Repository metrics

Stars
 (31,386 stars)
PR merge metrics
 (Avg merge 27d 13h) (10 merged PRs in 30d)

Description

CheckList

  • I agree to follow this project's Code of Conduct
  • I have read and followed the Contributing Guide
  • I have read and followed the Issue Tracker Guide
  • I have searched and referenced existing issues and discussions
  • I am filing a BUG report.
  • I have managed to reproduce the bug after upgrading to the latest version
  • I have created an accurate and minimal reproduction

Version

6.0.0-beta10

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

20.0.0

Link To Reproduction

See steps

Steps To Reproduce

  1. In the TextBox component, after opening multi-line text, justify both ends (textAlign: justify) is not the expected result.
  2. Text alignment. Possible values: “left”, “center”, “right”, “justify”, “justify-left”, “justify-center” or “justify-right”.

node version: 16.15.0 , 20.5.0 browser: Google Chrome 115 platform: MacOS 13. Windows 10 fabricjs version : 5.3.0, 6.0.0-beta10 and all versions

fabricjs:

Microsoft Word and css style:

My code:


function App() {
    let txt = `白鹤滩-浙江±800千伏特高压直流输电工程(下称白浙线)是全球首个混合级联特高压直流工程,在世界上首次研发“常规直流+柔性直流”的混合级联特高压直流输电技术,集成特高压直流输电大容量、远距离、低损耗,以及柔性直流输电控制灵活、系统支撑能力强的优势,示范引领意义重大。"`;
    txt = txt.repeat(5);
    const init = (selector: any) => {
        const dom = document.querySelector(selector) as HTMLDivElement;
        const ele = document.createElement('canvas') as HTMLCanvasElement;
        dom.replaceChildren(ele);

        const canvas = new Canvas(ele, {
            width: 700,
            height: 800,
        });
        const textbox = new Textbox(txt, {
            fontSize: 24,
            width: 700,
            splitByGrapheme: true,
            textAlign: 'justify',
        });
        canvas.add(textbox);
        canvas.renderAll();
    }
    useEffect(() => {
        init('#box')
    }, [])
    
    return (
        <div className="App" id='box'>
        </div>
    );
}
export default App;


Expected Behavior

It can be aligned on both ends of the rest of the lines except the last line like Microsoft Word or css style

Actual Behavior

When I set textAlign to justify, the right side is not aligned

Error Message & Stack Trace

None

Contributor guide