Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved text shaping #3106

Open
wants to merge 52 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
d11062c
Test
Rusino May 14, 2024
2945535
Adding the js shaper api
Rusino May 14, 2024
a5032fc
Add minimal text demo
fmalita May 14, 2024
18877ba
Latest verstion, visual tests
Rusino May 14, 2024
113d6d1
Fixing few bugs
Rusino May 14, 2024
2c2a285
Text direction bug fixed
Rusino May 15, 2024
68d13d7
Some asserts on testing
Rusino May 15, 2024
e9aa6a2
(Not working) substutute lottie shaper
Rusino May 15, 2024
dbf00bb
(Still not working) lottie -> skia shaper
Rusino May 16, 2024
313381e
Improve developer experinece
b-wils May 17, 2024
3cb5ab8
Something is showing on the screen
Rusino May 20, 2024
b911732
Fixed multiline text
Rusino May 20, 2024
5a98844
Use local font for the text sample
fmalita May 28, 2024
ef0e03b
More text samples
fmalita May 29, 2024
915ae16
Multiline text sort of working
Rusino May 29, 2024
a49e90e
Removing all extra code that is not needed anymore.
Rusino May 31, 2024
84939b3
RTL & BIDI work
Rusino May 31, 2024
94ef6f3
Shaper select
fmalita May 31, 2024
70efdc8
Added zalgo text as an example
Rusino Jun 3, 2024
9da36a5
Use Arial for zalgo sample
fmalita Jun 3, 2024
b8bad04
Restoring transformation
Rusino Jun 3, 2024
9843357
Removed debugging print; fixed line height
Rusino Jun 3, 2024
42fb1f4
Adding banner.json
Rusino Jun 3, 2024
6a9d202
Fixed the wrong offset in animation
Rusino Jun 5, 2024
0cbaa5f
More animated samples
fmalita Jun 6, 2024
50d15dd
More animated samples
fmalita Jun 6, 2024
2c2fa8d
Minor sample tweaks
fmalita Jun 10, 2024
f6767f6
Small bugs in the shaper
Rusino Jun 11, 2024
97b9e9a
Dealt with   in the text
Rusino Jun 11, 2024
ff30307
Word-based animation samples
fmalita Jun 12, 2024
008c050
Fixing word animation
Rusino Jun 12, 2024
10b5ed6
Fixing animation for the text on path
Rusino Jun 13, 2024
badef0a
Fixed an arabic bug
Rusino Jun 18, 2024
bdc8209
This is the incomplete change for arabic text
Rusino Jun 24, 2024
d3948d7
Revert "This is the incomplete change for arabic text"
fmalita Jun 26, 2024
4479ff3
Add rendererSettings.useSkriptShaping flag to control shaping
fmalita Jun 26, 2024
a5d752b
Use \r for new lines. Support multiple \r
Rusino Jun 26, 2024
6a57ebb
Fixinig multiple \r
Rusino Jul 1, 2024
c9c61b2
Temp state, the demo works
Rusino Jul 8, 2024
d99cf35
Multiple \r seems to be fixed (finally!)
Rusino Jul 9, 2024
19ffb2e
Adding tests from scottie resources
Rusino Jul 9, 2024
ad0f8fd
Fixed #34, #35, #46, #48, #49
Rusino Jul 9, 2024
0ffdfc4
Fixed the line length situaion.
Rusino Jul 11, 2024
683073d
Add sample Skottie player
fmalita Jul 17, 2024
f74723d
Fixed trailing spaces & chardata sizes
Rusino Jul 17, 2024
7d5146d
Merge remote-tracking branch 'origin/master' into HEAD
Rusino Jul 17, 2024
02178a7
Rename elements/browserElements/api.js -> utils/text/SkriptShaper.js
fmalita Aug 6, 2024
bbd3f68
Rename demo/text -> demo/text-shaper
fmalita Aug 6, 2024
490260c
Remove extra skottie demo
fmalita Aug 6, 2024
8c71255
Cleanup
fmalita Aug 6, 2024
44ef95f
Fixes for Hernan's review
Rusino Sep 16, 2024
8b667fa
Optional logging
fmalita Sep 17, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
948 changes: 948 additions & 0 deletions demo/text-shaper/animation-1.json

Large diffs are not rendered by default.

1,929 changes: 1,929 additions & 0 deletions demo/text-shaper/animation-2.json

Large diffs are not rendered by default.

1,034 changes: 1,034 additions & 0 deletions demo/text-shaper/animation-3.json

Large diffs are not rendered by default.

854 changes: 854 additions & 0 deletions demo/text-shaper/animation-4.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions demo/text-shaper/animation-5.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"v":"5.12.0","fr":30,"ip":0,"op":150,"w":500,"h":500,"nm":"test","ddd":0,"assets":[],"fonts":{"list":[{"origin":0,"fPath":"","fClass":"","fFamily":"Arial","fWeight":"","fStyle":"Regular","fName":"ArialMT","ascent":75.6476929411292}]},"layers":[{"ddd":0,"ind":1,"ty":5,"nm":"Foo Bar Baz","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[249.704,276.891,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"t":{"d":{"k":[{"s":{"sz":[315.011810302734,80.9692764282227],"ps":[-157.505905151367,-88.9479904174805],"s":31,"f":"ArialMT","t":"Foo Bar Baz","ca":0,"j":2,"tr":0,"lh":37.2000007629395,"ls":0,"fc":[0.911,0.545,0]},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0],"ix":2}},"a":[{"nm":"Animator 1","s":{"t":0,"xe":{"a":0,"k":0,"ix":7},"ne":{"a":0,"k":0,"ix":8},"a":{"a":0,"k":100,"ix":4},"b":3,"rn":0,"sh":1,"sm":{"a":0,"k":100,"ix":6},"e":{"a":0,"k":30,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[-30]},{"t":149,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[0,-22,0],"ix":2}}}]},"ip":0,"op":150,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":1,"nm":"White Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[600,600,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"sw":1200,"sh":1200,"sc":"#ffffff","ip":0,"op":150,"st":0,"bm":0}],"markers":[],"props":{}}
1 change: 1 addition & 0 deletions demo/text-shaper/animation-6.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"v":"5.12.0","fr":60,"ip":0,"op":300,"w":500,"h":500,"nm":"test3","ddd":1,"assets":[],"fonts":{"list":[{"origin":0,"fPath":"","fClass":"","fFamily":"Arial","fWeight":"","fStyle":"Regular","fName":"ArialMT","ascent":71.5988159179688}]},"layers":[{"ddd":1,"ind":1,"ty":5,"nm":"The quick brown 🦊 jumps over the lazy 🐕. 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":0,"ix":8},"ry":{"a":0,"k":0,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":0,"k":[250,351,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"n","pt":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-150.703,-8.95],[-50.187,-69.088],[51.187,-8.95],[149.985,-69.947]],"c":false},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"t":{"d":{"k":[{"s":{"s":24,"f":"ArialMT","t":"The quick brown 🦊 jumps over the lazy 🐕.","ca":0,"j":2,"tr":16,"lh":28.8000011444092,"ls":0,"fc":[0,0.553,0]},"t":0}]},"p":{"m":0,"f":{"a":0,"k":0,"ix":5},"l":{"a":0,"k":0,"ix":6},"a":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":1,"ix":3},"r":{"a":0,"k":0,"ix":2}},"m":{"g":2,"a":{"a":0,"k":[0,0],"ix":2}},"a":[{"nm":"Animator 1","s":{"t":0,"xe":{"a":0,"k":0,"ix":7},"ne":{"a":0,"k":0,"ix":8},"a":{"a":0,"k":100,"ix":4},"b":3,"rn":0,"sh":5,"sm":{"a":0,"k":100,"ix":6},"s":{"a":0,"k":10,"ix":1},"e":{"a":0,"k":15,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.656],"y":[0.875]},"o":{"x":[0.045],"y":[0.374]},"t":0,"s":[-15]},{"t":299,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[0,-12,0],"ix":2}}},{"nm":"Animator 2","s":{"t":0,"xe":{"a":0,"k":0,"ix":7},"ne":{"a":0,"k":0,"ix":8},"a":{"a":0,"k":100,"ix":4},"b":3,"rn":0,"sh":5,"sm":{"a":0,"k":100,"ix":6},"s":{"a":0,"k":5,"ix":1},"e":{"a":0,"k":10,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.656],"y":[0.875]},"o":{"x":[0.045],"y":[0.374]},"t":0,"s":[-15]},{"t":299,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[0,10,0],"ix":2}}},{"nm":"Animator 3","s":{"t":0,"xe":{"a":0,"k":0,"ix":7},"ne":{"a":0,"k":0,"ix":8},"a":{"a":0,"k":100,"ix":4},"b":3,"rn":0,"sh":2,"sm":{"a":0,"k":100,"ix":6},"s":{"a":0,"k":5,"ix":1},"e":{"a":0,"k":15,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.656],"y":[0.875]},"o":{"x":[0.045],"y":[0.374]},"t":0,"s":[-15]},{"t":299,"s":[100]}],"ix":3},"r":1},"a":{"rx":{"a":0,"k":0,"ix":6},"ry":{"a":0,"k":360,"ix":7},"r":{"a":0,"k":0,"ix":8}}}]},"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"path 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,351,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-151.203,-9.45],[-50.687,-69.588],[50.687,-9.45],[149.485,-70.447]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"Medium Yellow Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[600,600,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"sw":1200,"sh":1200,"sc":"#ffffbd","ip":0,"op":300,"st":0,"bm":0}],"markers":[],"props":{}}
1 change: 1 addition & 0 deletions demo/text-shaper/banner.json

Large diffs are not rendered by default.

392 changes: 392 additions & 0 deletions demo/text-shaper/basic.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,392 @@
{
"v": "5.12.0",
"fr": 30,
"ip": 0,
"op": 150,
"w": 500,
"h": 500,
"nm": "Lottie Shaper",
"ddd": 0,
"assets": [],
"fonts": {
"list": [
{
"origin": 1,
"fPath": "",
"fClass": "",
"fFamily": "Arial",
"fWeight": "",
"fStyle": "Italic",
"fName": "Arial-Italic",
"ascent": 76.4484497718513
}
]
},
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 5,
"nm": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
248.796,
156.501,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
0,
0,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
100,
100,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"t": {
"d": {
"k": [
{
"s": {
"s": 19,
"f": "Arial-Italic",
"t": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"ca": 0,
"j": 2,
"tr": 0,
"lh": 22.8000011444092,
"ls": 0,
"fc": [
0.911,
0.545,
0
]
},
"t": 0
}
]
},
"p": {},
"m": {
"g": 1,
"a": {
"a": 0,
"k": [
0,
0
],
"ix": 2
}
},
"a": []
},
"ip": 0,
"op": 150,
"st": 0,
"ct": 1,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 1,
"nm": "Pale Turquoise Solid 1",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
250,
158.507,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
196,
19,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
107.371,
11.295,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"sw": 392,
"sh": 38,
"sc": "#a9c8bd",
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 3,
"ty": 5,
"nm": "Suspendisse ligula justo, imperdiet malesuada enim luctus, pretium laoreet mauris. Sed et feugiat sapien. Suspendisse maximus nulla vitae turpis tempus finibus. Maecenas et convallis ligula. Vestibulum imperdiet lectus id tortor aliquet condimentum. Pellentesque venenatis ipsum ac tempus egestas. Cras blandit odio tincidunt ante interdum, non bibendum purus feugiat. ",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
252.006,
264.848,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
0,
0,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
100,
100,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"t": {
"d": {
"k": [
{
"s": {
"sz": [
388.442993164062,
178.170135498047
],
"ps": [
-194.221496582031,
-89.0850677490234
],
"s": 19,
"f": "Arial-Italic",
"t": "Suspendisse ligula justo, imperdiet malesuada enim luctus, pretium laoreet mauris. Sed et feugiat sapien. Suspendisse maximus nulla vitae turpis tempus finibus. Maecenas et convallis ligula. Vestibulum imperdiet lectus id tortor aliquet condimentum. Pellentesque venenatis ipsum ac tempus egestas. Cras blandit odio.",
"ca": 0,
"j": 2,
"tr": 0,
"lh": 22.8000011444092,
"ls": 0,
"fc": [
0.911,
0.545,
0
]
},
"t": 0
}
]
},
"p": {},
"m": {
"g": 1,
"a": {
"a": 0,
"k": [
0,
0
],
"ix": 2
}
},
"a": []
},
"ip": 0,
"op": 150,
"st": 0,
"ct": 1,
"bm": 0
},
{
"ddd": 0,
"ind": 4,
"ty": 1,
"nm": "Pale Turquoise Solid 1",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
251.605,
264.446,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
196,
19,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
100,
475.94,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"sw": 392,
"sh": 38,
"sc": "#a9c8bd",
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 5,
"ty": 1,
"nm": "White Solid 1",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
250,
250,
0
],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [
600,
600,
0
],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [
100,
100,
100
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"sw": 1200,
"sh": 1200,
"sc": "#ffffff",
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
}
],
"markers": [],
"props": {}
}
Loading
Loading