Kerning

[lojjic]

I've noticed that neither of the text implementations honor kerning offsets for glyph pairs. I'm not sure if the current font encoding carries kerning information, but if it does then honoring that would be a significant improvement.

[felixmariotto]

Thanks for pointing this out, it should be supported at some point.

[trusktr]

Troika's TextMesh supports this it seems. Worth looking into. @lojjic Would you be willing to try importing that here and hooking it in?

[felixmariotto]

It's not worth creating a dependency just for supporting kerning.

Some hints to add support with the native Text class :

• This should have 'leftAnchor' and 'rightAnchor' parameters
  

  three-mesh-ui/src/components/Text.js

  Lines 110 to 117 in d7d9b70

  	return {
  	height: dimensions.height,
  	width: dimensions.width,
  	anchor: dimensions.anchor,
  	lineBreak,
  	glyph,
  	fontSize
  	};

• Somewhere here these two parameters should be looked up for computing inline.offsetX
  

  three-mesh-ui/src/components/core/InlineManager.js

  Lines 37 to 90 in d7d9b70

  	this.children.filter( (child)=> {
  	return child.isInline ? true : false
  	})
  	.reduce( (lastInlineOffset, inlineComponent)=> {
  	// Abort condition
  	if ( !inlineComponent.inlines ) return
  	//////////////////////////////////////////////////////////////
  	// Compute offset of each children according to its dimensions
  	//////////////////////////////////////////////////////////////
  	const currentInlineInfo = inlineComponent.inlines.reduce( (lastInlineOffset, inline, i, inlines)=> {
  	// Line break
  	const nextBreak = distanceToNextBreak( inlines, i );
  	if (
  	lastInlineOffset + inline.width > INNER_WIDTH ||
  	inline.lineBreak === "mandatory" ||
  	this.shouldFriendlyBreak( inlines[ i - 1 ], lastInlineOffset, nextBreak, INNER_WIDTH )
  	) {
  	lines.push([ inline ]);
  	inline.offsetX = 0;
  	return inline.width;
  	}
  	lines[ lines.length - 1 ].push( inline );
  	//
  	inline.offsetX = lastInlineOffset;
  	//
  	return lastInlineOffset + inline.width;
  	}, lastInlineOffset );
  	//
  	return currentInlineInfo
  	}, 0 );

/!\ There may be issues with the computed lines length, it must be checked.

• InlineBlock could produce 'leftAnchor' and 'rightAnchor' of 0 here, but a more elegant solution would be to default to 0 when these parameters are not found in InlineManager.
  

  three-mesh-ui/src/components/InlineBlock.js

  Lines 72 to 77 in d7d9b70

  	this.inlines = [{
  	height: HEIGHT,
  	width: WIDTH,
  	anchor: 0,
  	lineBreak: "possible"
  	}];

• To get glyphs kerning, look into charOBJ parameters in GetGlyphDimension, it follow these specs
  

  three-mesh-ui/src/components/core/TextManager.js

  Line 48 in d7d9b70

  charOBJ = FONT.chars.find( charOBJ => charOBJ.char === GLYPH );

[swingingtom]

If noone started it yet, I would like to give a try at this implementation

[felixmariotto]

@swingingtom go ahead !

[felixmariotto]

adressed by #106