feat(fabric.Text): Initial support of RTL text writing #7046

asturur · 2021-05-01T12:06:59Z

add a property to text for direction
add basic tweaks to mouse click -> to single char selection
add basic tweaks for keyboard cursor movement
correct rendering of text cursor

Basically this PR allow for a bit better experience in RTL text but not complete at all.
Inputing for example Hebrew text on a iText that is set as RTL will work as expect.

github-actions · 2021-05-01T12:08:50Z

Code Coverage Summary

> [email protected] coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.67 |    76.88 |    85.6 |   82.44 |                                               
 fabric.js |   82.67 |    76.88 |    85.6 |   82.44 | ...,29639,29764,29844-29909,30032,30131,30348 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2021-05-01T12:12:57Z

Code Coverage Summary

> [email protected] coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.67 |    76.88 |    85.6 |   82.44 |                                               
 fabric.js |   82.67 |    76.88 |    85.6 |   82.44 | ...,29641,29766,29846-29911,30034,30133,30350 
-----------|---------|----------|---------|---------|-----------------------------------------------

asturur · 2021-05-02T12:15:08Z

Some JSON example to start handling colored text.

{"version":"4.4.0","objects":[{"type":"i-text","version":"4.4.0","left":233,"top":250,"width":740.57,"height":150.06,"fill":"#e38644","scaleX":0.59,"scaleY":0.59,"angle":-2,"text":"השועל החום והזריז קופץ מעל הכלב העצלן\nהשועל החום והזריז קופץ מעל הכל העצלן\nשלום עולם","fontWeight":"","fontFamily":"helvetica","textAlign":"right","direction":"rtl","styles":{ "0": 
 { "6": { "fill":"red" }, "7": { "fill":"red" }, "8": { "fill":"red" }, "9": { "fill":"red" }} },"path":null},{"type":"i-text","version":"4.4.0","left":230,"top":120,"width":493.52,"height":150.06,"fill":"#c93d60","scaleX":0.71,"scaleY":0.71,"angle":-3,"text":"Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit,\nsed do eiusmod","fontWeight":"","fontFamily":"helvetica","textAlign":"right","direction":"ltr","styles":{},"path":null}]}

asturur · 2021-05-09T21:36:11Z

Multi color rendering is solved.
needs some fix for background color and text decoration yet.
Then is mergeable

github-actions · 2021-05-14T12:40:59Z

Code Coverage Summary

> [email protected] coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.69 |    76.83 |   85.69 |   82.45 |                                               
 fabric.js |   82.69 |    76.83 |   85.69 |   82.45 | ...,29669,29794,29874-29939,30062,30161,30378 
-----------|---------|----------|---------|---------|-----------------------------------------------

asturur · 2021-05-14T12:45:36Z

Selection display seems to work correctly now

asturur · 2021-05-14T12:46:10Z

copy paste seems to work ok and respond in a way, from my european point of view, seems correct.

asturur · 2021-05-15T11:03:09Z

example for text Decoration:

{"version":"4.4.0","objects":[{"type":"i-text","version":"4.4.0","left":228,"top":314,"width":740.57,"height":150.06,"fill":"#e38644","scaleX":0.59,"scaleY":0.59,"angle":-2,"text":"השועל החום והזריז קופץ מעל הכלב העצלן\nהשועל החום והזריז קופץ מעל הכל העצלן\nשלום עולם","fontWeight":"","fontFamily":"helvetica","textAlign":"right","direction":"rtl","styles":{"0":{"6":{"fill":"red"},"7":{"fill":"red"},"8":{"fill":"red","textDecoration":" line-through","linethrough":true},"9":{"fill":"red","textDecoration":" line-through","linethrough":true},"10":{"textDecoration":" line-through","linethrough":true},"11":{"textDecoration":" line-through","linethrough":true},"12":{"textDecoration":" line-through","linethrough":true},"13":{"textDecoration":" line-through","linethrough":true}},"1":{"8":{"textDecoration":" underline","underline":true},"9":{"textDecoration":" underline","underline":true},"10":{"textDecoration":" underline","underline":true},"11":{"textDecoration":" underline","underline":true},"12":{"textDecoration":" underline","underline":true},"13":{"textDecoration":" underline","underline":true},"14":{"textDecoration":" underline","underline":true}}},"path":null},{"type":"i-text","version":"4.4.0","left":230,"top":120,"width":493.52,"height":150.06,"fill":"#c93d60","scaleX":0.71,"scaleY":0.71,"angle":-3,"text":"Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit,\nsed do eiusmod","fontWeight":"","fontFamily":"helvetica","textAlign":"right","direction":"ltr","styles":{},"path":null}]}

github-actions · 2021-05-15T11:05:40Z

Code Coverage Summary

> [email protected] coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.68 |    76.82 |   85.69 |   82.44 |                                               
 fabric.js |   82.68 |    76.82 |   85.69 |   82.44 | ...,29673,29798,29878-29943,30066,30165,30382 
-----------|---------|----------|---------|---------|-----------------------------------------------

asturur · 2021-05-16T17:57:50Z

{"version":"4.4.0","objects":[{"type":"i-text","version":"4.4.0","left":1.28,"top":0.19,"width":740.57,"height":150.06,"fill":"#e38644","scaleX":0.48,"scaleY":0.48,"angle":0.2,"text":"השועל החום והזריז קופץ מעל הכלב העצלן\nהשועל החום והזר33יז  קופץ מעל הכל העצלן\nשלום עולם","fontWeight":"","fontFamily":"helvetica","textAlign":"right","textBackgroundColor":"#d72323","direction":"rtl","styles":{"0":{"6":{"fill":"red"},"7":{"fill":"red"},"8":{"fill":"red","linethrough":true},"9":{"fill":"red","linethrough":true},"10":{"linethrough":true,"textBackgroundColor":"red"},"11":{"linethrough":true,"textBackgroundColor":"green"},"12":{"linethrough":true},"13":{"linethrough":true}},"1":{"8":{"underline":true},"9":{"underline":true},"10":{"underline":true},"11":{"underline":true},"12":{"underline":true},"13":{"underline":true,"fontSize":22},"14":{"underline":true,"fontSize":22},"15":{"underline":true,"fontSize":22},"16":{"underline":true,"fontSize":22},"17":{"fontSize":22},"18":{"fontSize":22},"19":{"fontSize":22},"20":{"fontSize":22},"21":{"fontSize":22},"22":{"fontSize":22,"textBackgroundColor":"blue"}}},"path":null}]}

Text background color works

github-actions · 2021-05-16T18:00:25Z

Code Coverage Summary

> [email protected] coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   82.65 |    76.78 |   85.69 |   82.41 |                                               
 fabric.js |   82.65 |    76.78 |   85.69 |   82.41 | ...,29682,29807,29887-29952,30075,30174,30391 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2021-05-16T19:57:31Z

Code Coverage Summary

> [email protected] coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |    82.7 |    76.94 |   85.69 |   82.46 |                                               
 fabric.js |    82.7 |    76.94 |   85.69 |   82.46 | ...,29679,29804,29884-29949,30072,30171,30388 
-----------|---------|----------|---------|---------|-----------------------------------------------

github-actions · 2021-05-16T20:18:25Z

Code Coverage Summary

> [email protected] coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |    82.7 |    76.94 |   85.69 |   82.46 |                                               
 fabric.js |    82.7 |    76.94 |   85.69 |   82.46 | ...,29679,29804,29884-29949,30072,30171,30388 
-----------|---------|----------|---------|---------|-----------------------------------------------

asturur · 2021-05-16T20:22:40Z

This implementation does not work under node.
To make it work under node eventually we need to give a stab at fixing node-canvas also

github-actions · 2021-05-16T20:28:54Z

Code Coverage Summary

> [email protected] coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |    82.7 |    76.94 |   85.69 |   82.46 |                                               
 fabric.js |    82.7 |    76.94 |   85.69 |   82.46 | ...,29679,29804,29884-29949,30072,30171,30388 
-----------|---------|----------|---------|---------|-----------------------------------------------

asturur added 3 commits May 1, 2021 13:14

cursor click working

77081f1

cursor keys support

b8d310a

no build dist

4c34a82

added disclaimer

d4cb247

add direction export

237c123

asturur added 3 commits May 10, 2021 11:08

fixing multi color

405df34

render-selection-works

68ecd2d

fixing tests

c63b8e3

fix text decoration

5cc0a5c

fix bgcolor

e38aed7

added unit test

1d90323

right to left text visual test

e15fe37

rounded test

2c2c4d2

asturur merged commit 130cab7 into master May 16, 2021

asturur mentioned this pull request May 16, 2021

Cursor of iText in RTL mode (originX == 'right') #2374

Closed

asturur mentioned this pull request May 22, 2021

Version 4.5.0 #7073

Merged

asturur deleted the rtl-start branch August 8, 2021 20:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(fabric.Text): Initial support of RTL text writing #7046

feat(fabric.Text): Initial support of RTL text writing #7046

asturur commented May 1, 2021 •

edited

Loading

github-actions bot commented May 1, 2021 •

edited

Loading

github-actions bot commented May 1, 2021 •

edited

Loading

asturur commented May 2, 2021

asturur commented May 9, 2021

github-actions bot commented May 14, 2021 •

edited

Loading

asturur commented May 14, 2021

asturur commented May 14, 2021

asturur commented May 15, 2021

github-actions bot commented May 15, 2021 •

edited

Loading

asturur commented May 16, 2021

github-actions bot commented May 16, 2021 •

edited

Loading

github-actions bot commented May 16, 2021 •

edited

Loading

github-actions bot commented May 16, 2021 •

edited

Loading

asturur commented May 16, 2021

github-actions bot commented May 16, 2021 •

edited

Loading

feat(fabric.Text): Initial support of RTL text writing #7046

feat(fabric.Text): Initial support of RTL text writing #7046

Conversation

asturur commented May 1, 2021 • edited Loading

github-actions bot commented May 1, 2021 • edited Loading

Code Coverage Summary

github-actions bot commented May 1, 2021 • edited Loading

Code Coverage Summary

asturur commented May 2, 2021

asturur commented May 9, 2021

github-actions bot commented May 14, 2021 • edited Loading

Code Coverage Summary

asturur commented May 14, 2021

asturur commented May 14, 2021

asturur commented May 15, 2021

github-actions bot commented May 15, 2021 • edited Loading

Code Coverage Summary

asturur commented May 16, 2021

github-actions bot commented May 16, 2021 • edited Loading

Code Coverage Summary

github-actions bot commented May 16, 2021 • edited Loading

Code Coverage Summary

github-actions bot commented May 16, 2021 • edited Loading

Code Coverage Summary

asturur commented May 16, 2021

github-actions bot commented May 16, 2021 • edited Loading

Code Coverage Summary

asturur commented May 1, 2021 •

edited

Loading

github-actions bot commented May 1, 2021 •

edited

Loading

github-actions bot commented May 1, 2021 •

edited

Loading

github-actions bot commented May 14, 2021 •

edited

Loading

github-actions bot commented May 15, 2021 •

edited

Loading

github-actions bot commented May 16, 2021 •

edited

Loading

github-actions bot commented May 16, 2021 •

edited

Loading

github-actions bot commented May 16, 2021 •

edited

Loading

github-actions bot commented May 16, 2021 •

edited

Loading