Improved support for multi-line text

[kdzwinel]

Currently this:

Will render like this:

😵

Broken html (test case for working on this):

<div style='width: 200px'><b>Test</b>(s) or <b>TEST</b> may refer to: <b>Test</b> (assessment), an assessment intended to measure the respondents' knowledge or other abilities List of <b>tests</b></div>

[kdzwinel]

Turns out inside single text block there can be multiple styles. We should migrate to that

(top text shows current approach)
(bottom text shows new approach)

[KimDal-hyeong]

I add this data in text layer of asketch.json,

"forAttributedString": [
  {
    "content": "Text",
    "textStyles": {
      "color": "rgb(0, 0, 0)",
      "fontSize": 16,
      "fontFamily": "Times New Roman",
      "fontWeight": 400,
      "textDecoration": "none",
      "textAlign": "right",
      "textTransform": "none"
    }
  },
  {
    "content": " Styles",
    "textStyles": {
      "color": "rgb(255, 0, 0)",
      "fontSize": 20,
      "fontFamily": "Times New Roman",
      "fontWeight": 700,
      "textDecoration": "none",
      "textAlign": "right",
      "textTransform": "none"
    }
  }
]

and, change fixTextLayer in fixFont.js to this code.

export function fixTextLayer(layer) {
  layer.attributedString = makeEncodedAttributedString(layer.forAttributedString);
  delete layer.style;
  delete layer.text;
}

Its result is this.

[kdzwinel]

@KimDal-hyeong oh wow, that's super useful! Thank you 🙇‍♂️

[kdzwinel]

It looks like we are using "text" objects with "style" property describing the "text style". However, that style is only a baseline style. "text" objects have "attributedString"s that consist of:

• string e.g. "example text"
• and multiple "attributes" that describe range (e.g. "location": 0, "length": 7) and font/color/size/etc (similar to "text style").

This way one "text" object can describe a string that uses various styles. We should use that instead of creating multiple "text" objects that get hard to arrange.

Example (with irrelevant stuff removed):

        {
            "_class": "text",
            "style": {
                "_class": "style",
                "textStyle": {
                    "_class": "textStyle",
                    "encodedAttributes": {
                        "MSAttributedStringFontAttribute": {
                            "_class": "fontDescriptor",
                            "attributes": {
                                "name": "TimesNewRomanPS-BoldMT",
                                "size": 10
                            }
                        },
                        "MSAttributedStringColorAttribute": {
                            "_class": "color",
                            "alpha": 1,
                            "blue": 0.2862745098039216,
                            "green": 0.2862745098039216,
                            "red": 0.2862745098039216
                        },
                    },
                },
            },
            "attributedString": {
                "_class": "attributedString",
                "string": "first second",
                "attributes": [
                    {
                        "_class": "stringAttribute",
                        "location": 0,
                        "length": 6,
                        "attributes": {
                            "MSAttributedStringFontAttribute": {
                                "_class": "fontDescriptor",
                                "attributes": {
                                    "name": "TimesNewRomanPS-BoldMT",
                                    "size": 10
                                }
                            },
                            "MSAttributedStringColorAttribute": {
                                "_class": "color",
                                "alpha": 1,
                                "blue": 0.2862745098039216,
                                "green": 0.2862745098039216,
                                "red": 0.2862745098039216
                            },
                            "textStyleVerticalAlignmentKey": 0,
                            "paragraphStyle": {
                                "_class": "paragraphStyle",
                                "alignment": 0,
                                "lineHeightMultiple": 1
                            }
                        }
                    },
                    {
                        "_class": "stringAttribute",
                        "location": 6,
                        "length": 6,
                        "attributes": {
…

[nataliyakarat]

Hi! Any plans to fix that?

Looks pretty bad