fabricjs/fabric.js
[Bug]: TextBox multi-line text textAlign: justify does not take effect
Closed
#9,132 opened on Jul 29, 2023
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
- In the TextBox component, after opening multi-line text, justify both ends (textAlign: justify) is not the expected result.
- 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