HTML text using SVGs

Show & Tell
1

I recently saw a technique that used offscreen SVGs to render HTML text. I wanted to see if this would work in Lightning too so I created a quick demo. It works pretty well and supports lots tags… even emojis!

I’ve uploaded the code here if anyone wants to take a look (It’s very work-in-progress).

@Wouter @frank you may be interested in this given the work you’ve been doing recently with the Lightning 3.0 text rendering engine.

demo
demo1158×657 61.4 KB

Example code

static _template() {
    return {
        Justified: {
            x: 50,
            y: 200,
            htmlText:
                "Lorem ipsum dolor sit amet, &#x1F680; <b>consectetur adipiscing elit</b>. Phasellus porta nisi est, vitae <i>sagittis ex gravida ac</i>. Sed vitae malesuada neque.",
            style: {
                color: "white",
                "font-family": "Roboto",
                "font-size": "32px",
                "letter-spacing": "3px",
                "line-height": "48px",
                "max-width": "400px",
                "text-align": "justify",
                "text-shadow": "1px 2px black",
                "word-wrap": true,
            },
            type: HTMLText,
        },
    };
}
6 Likes
2

Awesome Lewis! Ha, never thought about this. I know Frank and Michiel are reviewing it and we’re definitely going to take a closer look for the 3.0 text renderer.

1 Like