HTML text using SVGs

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.

Example code

static _template() {
    return {
        Justified: {
            x: 50,
            y: 200,
                "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,

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