fabric.Textbox with fontFamily "Material Icons"

[softysoft]

when using fabric.Textbox with the fontFamily "Material Icons", the width of the selection area seems to adapt to the icon name, so we cannot reduce the width of the selection aera. For example, the icon "AccessibilityNew" has a very large selection aera, although the icon is much narrower (like all icons: one "character"). The icon "add" has a shorter selection aera. It would be good if we could reduce the selection aera with the field width. For "standard" fonts, the end of the text could be hidden (out of the selection aera).

[asturur]

What is the text inside the text object, can you show it? Is the text 'AccessibilityNew' and the font is just drawing the little icon?
If that is the case to work correctly that would need a special grapheme splitter that understands that.
Does material icon offer a font pagackaged like font awesome where every single icon is represented by a single unicode point rather than a combination of others?

[softysoft]

yes, in the attached picture::

• on the first line, the text in the text object is: AccessibilityNew; this text is transformed into the icon of the first line
• on the second line, the text in the text object is: Add; this text is transformed into the icon: +
• on the third line, the text in the text object is: AddCall; this text is transformed into the icon of the third line
  Please, can you explain how I can reduce the selection rectangle with a special grapheme splitter ? thanks by advance

[asturur]

Is complicated, because the grapheme splitter doesn't know what font are you using.
Fabric measures text size and kerning to allow you to use styles with color but still keep kerning work.
it goes grapheme by grapheme, that in english case are the alphabet letters.
This usuaully does not change font by font, what material-symbols does is kind of unique, collating long words in a single symbol. They use a special feature of ligatures that is my understanding.

Said so you would need to write your own function of split text, for fabricjs, and it won't be a fast implementation ( in the sense of runtime speed ). You will have to take your text string, search for the occurrence of those icons and make those a single grapheme, that requires comparing the text with all the symbols from material icons, that are some thousands. Unless you need only a subset of it that will be slow.

so this function that is available in text class

  /**
   * Override this method to customize grapheme splitting
   * @todo the util `graphemeSplit` needs to be injectable in some way.
   * is more comfortable to inject the correct util rather than having to override text
   * in the middle of the prototype chain
   * @param {string} value
   * @returns {string[]} array of graphemes
   */
  graphemeSplit(value: string): string[] {
    return graphemeSplit(value);
  }

would take something in like: this is my newAccessibility icon and should split something out like: [t,h,i,s,' ',i,s,' ',m,y,' ',newAccessibility,' ',i,c,o,n]

This could be a step forward to make it work.

The first issue i see is that grapheme split work on text and has no idea of the font that is currently used, this special split would be valid only for that particular font.

[drinkspiller]

Here is a demo of having the text width be only as wide as the Material Icon font icon by using a code point instead of ligature:

https://codepen.io/drinkspiller/pen/GgoWzbe?editors=1010

[asturur]

this is useful.
DOes material icons keep a good visible list of codepoints around?

[drinkspiller]

DOes material icons keep a good visible list of codepoints around?

Yes, on the Google Symbols page whenever you select an icon it shows both the ligature and corresponding codepoint. There is also a more complete mapping and others have translated it to a TypeScript enum e.g. here and here.

[drinkspiller]

Looks like the latest codepoints are here