fix(📝): wordSpacing property not working in Paragraph text styles

[wcandillon]

fixes #3648

[github-actions]

🎉 This PR is included in version 2.4.15 🎉

The release is available on:

• v2.4.15
• GitHub release

Your semantic-release bot 📦🚀

[mmmoussa]

@wcandillon this PR does not fully address #3648, as demonstrated by the new test that was added. If you look at the Arabic test, you'll see that lines 1 and 2 look the exact same, while line 3 reflects the word spacing. Line 2 should not look the same as line 1 because it is using a different letter spacing. Additionally, line 3 is only working because the wordSpacing is being applied to the entire paragraph, not to the space character alone.

In our application we were previously on Skia version 1.12.4 and using letterSpacing to expand the width of individual space characters because we render character by character. In the new versions of this library, applying letterSpacing or wordSpacing to a single space character no longer has any effect with Arabic text (English working fine still). You can observe this in the test case for this PR as well by rendering the space character between the two words with its own styling and seeing that neither property has any effect.

const baseStyle = {
  fontFamilies: ["Amiri"],
  fontSize: 24,
  color: Skia.Color("black"),
};

const paraWordSpacing = Skia.ParagraphBuilder.Make(
  {
    textAlign: ctx.textAlign,
    textDirection: ctx.textDirection,
  },
  provider
)
  .pushStyle(baseStyle)
  .addText("بِسْمِ")
  .pushStyle({
    ...baseStyle,
    wordSpacing: 20, // Only applied to the space character, will not work
    letterSpacing: 20, // Only applied to the space character, will not work
  })
  .addText(" ")
  .pop()
  .pushStyle(baseStyle) // Need to push style for second word
  .addText("اللَّهِ")
  .pop()
  .pop()
  .build();
paraWordSpacing.layout(ctx.width);