Fabric.js: TEXT REWRITE IN PROGRESS READ - KERNING - GRAPHEMES - INPUT PROBLEMS

[asturur]

There is a plan, and actual tries to rewrite text completely.

The first draft of rewrite will include:

split text in graphemes to support most characters and at least emoticons

provide an overridable grapheme function sot that devs can put theyr own inside (support indian diatrical marks for example)

Organize font caching in graphemes and not long strings, cache couple of grapheme to better support kerning

Text will support styles and reflowing
IText will just be an interaction layer on top of it
Textbox will disappear
many new bugs will come

linked issues

3644

3377

3337

3741

3468

3525

2639

SECOND WAVE will provide:

better input support for particula OS configurations ( different IMES and macox popup ) this will require to switch completely on oninput event and forget mostly keyup/keydown.

lnked issues to second part

3681

A solution to do not break styles is still needed.

[ncou]

The possibility to have scale+fixed width on the Text object is really a great news.

Just little question, actualy in editing mode when you do a line return, the object use the originY to decide on which position the new height will be adjusted (top/bottom or center).
Will there be a new option to override the line return axis ?
Thank you.

[asturur]

Just to keep updated who comes here to read, things done are:

Basic grapheme support works ( at least emoticons)
Text measurement changes are done, now at measurement time, all character gets theyr own bounding box ( top, left, width, height) with old errors of meaurements, but you can still write your own super perfect measurement function and override the basic one in one single place.
Textlinebackground is updated with new code and works good
textdecoration is splitted in 3 parts ( underline before text, overline and striketrought after text ) and is NOT working good.
as soon as is fixed next step is character rendering.

and then it should be sort of workable/testable.

[asturur]

@sunu @ajck @adrianmawer @temuri416

[ajck]

@asturur Great work thanks. Sorry probably stupid question - this will fix the issue of itext cursor position for languages with diacritics (multiple typed characters for a single visible character) e.g. Arabic is an obvious one. ?

[asturur]

should do, as soon as you plugin the diacritics library in the right place. is not sonething i want to handle, but the changes are made on purpose to make this possible.

[asturur]

emoticons support ( up to 2 bytes ) and kerning with different styles ( where possible ) is done.
Tomorrow i should fix the cursor position and the start to work on the composition updates.

[asturur]

better input support is coming. onInput event should be the defenitive way to input things for us.

[asturur]

ok spent the whole day on text today. need a break.

[samael205]

That is amazing!!

[sunu]

Looks great! :+1:

[asturur]

so text/itext are in a usable state.
textbox is currentlt broken.

I will restore textbox functionalities, merge it as fabric 2.0 alpha, so pepole can start to test it.
Help with testing is really apreciated.

later i will merge textbox inside text to remove the last problems about textbox scaling.

[asturur]

[cheeseq]

Hi. Please, have a look at this - https://jsfiddle.net/cheeseq/mzbck8nv/2/ Here i have a problem with bounding box width when using custom fonts. Will this be fixed in next versions? Thanks

[asturur]

Canvas is not able to measure height of fonts. so no.

[cheeseq]

@asturur did you mean width of fonts? Ok, if canvas can't calculate size of font, then we actually can't use fabric and custom fonts correctly with all fonts?

[asturur]

no i meant height. Canvas measure width and nothing else, in its own way also.
The height is blindly set as fontSize.
If a custom font has ascenders and descenders too big or the baseline wrong positioned it will look wrong.

At least untill the new measureText api is working ( when browser will implement it)

[ajck]

Great stuff @asturur thanks for all your hard work!

[nglinh24]

Looks like you are still working on the measure text function to fix the cursor position, is it correct? I've been using Fabric on my customer's application and now he doesn't want to finalize the project for our company due to the wrong cursor position issue which i described in the post #3790 .

Can you kindly tell me when you plan to release a fix for these bugs?

Thanks a lot for all your great effort to develop this cool library!

[asturur]

Yes this could solve your problem. You can already download and try it, is not perfect, but is way better in many aspect of the current release.

Go on newtext branch and take the file from the dist folder.
I m updating it daily.

[asturur]

The capital letter wrong cursor does not look like a big big problem to me.

[ajck]

Yes the cursor position being wrong when using custom web fonts and any characters that were composed of 2 or more actual characters (diacritics) e.g. Arabic, Indian and various Asian languages etc. , was the big issue for me. I admit I haven't tried latest code yet tho!

[asturur]

emoticons, and diatrics marks are ok as along they are 2 bytes. when they are more than 2 bytes you have to use an external lib for grapheme splitting ( i guess maybe you pointed me to one of these) connecting the lib to fabricjs is super easy, but fabricjs will not have it as a dependency.

there is a function fabric.util.string.graphemeSplit that you have to swap with the one works best for you.

[cheeseq]

Coming back to my fiddle https://jsfiddle.net/cheeseq/mzbck8nv/2/ if here we change IText to simple Text objects, bounding will fit correctly. Can you please explain it to me? I really would like to use ITexts with custom fonts in my project, as it's simple, intuitive and convenient way to edit text, but i'm facing a trouble with fonts here. Thanks.

[ajck]

@cheeseq @asturur issue appears same as in https://github.com/kangax/fabric.js/issues/2612 - wrong cursor placement. As per last post in that issue I tried playing around with fabric.util.clearFabricFontCache in various places in your fiddle @cheeseq - updated: https://jsfiddle.net/mzbck8nv/5/ but it made no difference.

You can see problem most clearly if you double click anywhere in top itext to activate cursor, then use arrow keys to move cursor to right hand side then type any keys, Cursor is far right, new char appears at the end of the visible string. Problem is same if typing elsewhere in string too. Worth noting the problem doesn't seem to be there if I use Internet Explorer 11 (on Win 7). Does happen in Chrome, Firefox, Opera. I haven't tried tablet/mobile.

[asturur]

you can check this:

www.shutterstock.com/editor.

it uses itext/textbox and has custom fonts.
If it works good then it means that you are skipping something or you are not properly loading the font.

Current version (1.7.8) has problem with kerning couples and cursor is never calculated correctly.

New version ( also used in that editor ) works better.

[ajck]

Yes they do seem to be doing it right, but according to the source they're using 1.7.6. I wonder what they're doing to correct cursor position?

[asturur]

they are using the new text branch, the one that is available in the open PR.
Is gonna be released under 2.0.0alpha as soon as i can finish it.
Is stable enough to be used but i m not merging it yet since i have to correct docs and lot of stuff.

Other than that fabric is not gonna support full unicode since is too broad and to hard to keep udpdated. An external library will be needed. there are quite some around.

[blobinabottle]

Regarding text on 1.7.7 and Chrome 57 there is a bug, on a iText if you press space bar in a middle of a word, it creates a new line. And it's just on chrome 57... Hope your text rewrite fixes it :-)

[asturur]

that is a chrome bug. i open a bug tracker, they are checking it.

there is a workaround.

On Mar 22, 2017 11:30 PM, "Blob" [e-mail] wrote:

Regarding text on 1.7.7 and Chrome 57 there is a bug, on a iText if you
press space bar in a middle of a word, it creates a new line. And it's just
on chrome 57... Hope your text rewrite fixes it :-)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/3680#issuecomment-288560106,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI4QHfPlv1k7e7bZoedj22c3IwjE3ebks5roaEcgaJpZM4L9G3e
.

[vinch]

@asturur Can you tell us more about the workaround? Anything we can do to help?

[vinch]

It seems to work with the newtext branch. Is it the workaround you were talking about @asturur?

[asturur]

is included in the branch, but will applied as an hotfix also on 1.7.8 -> 1.7.9

[asturur]

oh the workaround is very simple, in the function initHiddenTextarea, where the style for textarea is set, add white-space: nowrap to the style

[asturur]

Would be very nice to get some feedback on the new text. The api changed, most functions are deleted and probably more will disappear. But that will be in fabric 2.0

to summarize:

text support styles and everything else
iText support input
textbox will disappear ( i did not manage yet ) and text will have an option wrappable

[ncou]

Hi,

I made some quick tests with my app with the new .js file. i will create jsfiddle later if you can't reproduce theses weird behaviors (but you can confirm this if you test the shutterstock editor) :

1) on the text element, change the object font-family to "Arial", edit the text and select all the content and change the font to Verdana. => If you click on the element the "font-family" value is displayed as "Arial", but it should be "Verdana" because all the style is for all the text length (in the style node the data is correct).

2) Edit a text object, select 2 chars in the middle of a word, and change the font, now (without deselecting) press a key to change the letters selected => The new char is added with the default font-family, and the new style is applied to the right part AFTER the selection.

3) I must check if it's not a bug in my code, but, if you edit a text object, put the cursor selection in the middle of a word (without selectionning any letters), and change the font, we should expect the next char you will add will use the new font family, but it's not the case. Looks like the new font family is not applied if the number of characters selected is = 0.

4) When in editing mode, if you click outside the canvas the "texthiddeninput" lost focus, but the object stay in editing mode. but i could handle this in my app.

I will do more tests later. If my explanations are not enought i will try to detail more and with better english.

Can't wait to test the new "wrappable" option :)

Keep up the good work.

[asturur]

so 1 and 3 are ok.

The code is not made to make a text editor,.so the font displayed does not make sense. Also fabric has not setup for style for the next char to be typed.

there are new methods ( to finish and document ) to clear the style a bit. so that if you want to set all chars to verdana, there will be a method that check all style, verify if fontFamily is same, will remove it from style and set to object. but it will not he automatic.

style for the next char typed is something that maybe will be implemented as an enanchement when this is merged.

[ncou]

Hi,

The new methods seems interesting and will be of great help.
Not really sure if it's related, but actually is you set a part of the sentense (for example only 4 characters) with another fontfamily (only change this style value), then if you use the getSelectionStyle(startChar, endChar) to retrieve the style of the selection, you will have an array of 4 styles with the same fontfamily, so 4 duplicates.

You could remove manualy the duplicates, but perhaps this will be changed (related to the function you mentionate) ?

[asturur]

So getSelectionStyle was made, and still is, to inspect the selection and
see what is currently selected.
It gives you the style for every char selected, in case duplicated.

2017-03-26 12:31 GMT+02:00 ncou [e-mail]:

Hi,

The new methods seems interesting and will be of great help.
Not really sure if it's related, but actually is you set a part of the
sentense (for example only 4 characters) with another fontfamily (only
change this style value), then if you use the getSelectionStyle(startChar,
endChar) to retrieve the style of the selection, you will have an array of
4 styles with the same fontfamily, so 4 duplicates.

You could remove manualy the duplicates, but perhaps this will be changed
(related to the function you mentionate) ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/3680#issuecomment-289271362,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI4QI8VNwZcoXhBNAGu4Q0Eykw9Jwdvks5rpj6egaJpZM4L9G3e
.

[ncou]

thanks for the explanation, i will do my own function to check if there is differents fontfamily for the given selection.

[ncou]

The style "underline" and "strikethrough" seems broken (no change for the text with or without applying these 2 styles).

[asturur]

you do not have to set textDecoration but you have 3 properties underline,
overline, linetrough that are boolean true or false.

On Apr 2, 2017 12:42, "ncou" [e-mail] wrote:

The style "underline" and "strikethrough" seems broken (no change for the
text with or without applying these 2 styles).

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/3680#issuecomment-290978275,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI4QNLE_3URVbrbQrCDCvr5C3T6pWJ4ks5rr3ukgaJpZM4L9G3e
.

[ncou]

ok so it's for that. I will wait for the new documentation for more tests.

One question : I see in the code the "modified" event is called if you have changed the text after you exit the edition mode. Why not also check if the style have changed ?

=> If i edit an Itext object, i select a part of the text, and change the style to italic or underline but without adding or removing chars, if i exit the edition mode, the event "modified" will not be triggered. Is that wanted ?

[asturur]

i fixed SVG output, now working also for justified text. i have still 7 failing tests but i think i will merge it today and release as 2.0.0 beta

[asturur]

I merged it. There are still some little bugs, but i need to step away from it a bit, do other fun stuff and fix it later or i risk a true burnout.

[ncou]

Hi,

Thank you for your hard work.

Is there a draft of the documentation for the new text component feature ?
=> I am looking for the new function to clear the style, and the boolean for underline, linethrow...etc
The "Textbox" should disapear after this release. Does you commit include the feature of an itext component with a fixed width (to simulate the textbox component but with the possibility to scale the object using the controls).

Thank you.

[asturur]

Textbox is still there, and documentation is not.

I can tell you that from loadFromJSON the migration from old setting to new setting is handled automatically, so that old saved designs can be restored.

the settings are:
underline: true/false
overline: true/false
lineThrough: true/false

You should experience a better text in general, maybe some glitch with copy paste, chines/japanese and emoticons support if you override the splitGrapheme function with something more powerfull ( plenty around in npm are available ).

Since those last weeks i could not work on it very much ( mostly because i was tired of it ) i aimed at releasing it as its best. Please report any bug is very important in this beta stage.

[asturur]

macos popup window should already work

[ncou]

For the 3 booleans (underline, overline, linethrough) does this mean you can't underline a parto of the sentense ? because the underline propertie is now applied on all the text object, and no more on a part of the text ?

I got a bug with the v2.0 of the lib, the cursor disapear when i start to type some text.

[asturur]

isCaching is probably my fault. i ll check it

underline can aso go on style object, of courae you can underline a part of the sentence.

[ncou]

For the bug on the cursor, should i open a ticket ? or it's not necessary ?

[asturur]

cursor bug? i did not see it.

i prefer to handle bugs here for text, too many open issues makes me feel lost

[ncou]

i got the wrong word, i mean the "caret" (not cursor) the little signe "|" used to show the user where you are tipping the text.

It disapear as soon as i start to enter some new text

[upardhi]

Hi @asturur I am facing issue relate to text ascent and decent. Can you please provide any solution if you have?

[kondurisai]

Hi @asturur I am facing issue with font family ...after applying font while i delete it it causes other word to delete. I am using latest version of fabric.Please help us.

[sandeepcsa98]

Waiting for a reply?

[sandeepcsa98]

(Itext in fabric js) Can anyone help me please ?

[sandeepcsa98]

canvas.add(new fabric.IText('Tap and Type', {
left: 50,
top: 100,
fontFamily: 'helvetica neue',
fill: '#000',
stroke: '#fff',
strokeWidth: .1,
fontSize: 45
}));

this is the code!!

[asturur]

fonts need to be properly loaded before used.
Check for fontFaceObserver library.

[sandeepcsa98]

Thanks for the reply @asturur ,
it will be useful if you elaborate about that , (I am a beginner in javascript)

[asturur]

i m sorry @sandeepcsa98 this is a generic js problem i can t provide support for. This is not a generic issue tracker for JS and i would not have time for everything.

There is a small example here
http://fabricjs.com/loadfonts