Right-align some TSPANs using Red's SIZE-TEXT to measure each line

right-align.red

#!/usr/local/bin/red

Red [
    Title: "Right Aligned Text"
    Date: 23-Jan-2019
    Author: "Christopher Ross-Gill"
]

font-weight: 'bold
font-size: 30

lines: [
    "Arial" "This text"
    "Times New Roman" "should appear"
    "Georgia" "right-"
    "Trebuchet MS" "aligned"
]

get-text-width: func [
    font-family [string!]
    font-size [integer!]
    font-style [block!]
    text [string!]
][
    0.01 * first size-text make face! compose/deep [
        text: (text)
        font: make font! [
            name: (font-family)
            size: (round/to font-size * 7200.0 / 96 1)
            style: [(font-style)]
        ]
    ]
]

print output: rejoin collect [
    keep reduce [
        {<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="240" viewBox="0 0 240 240">}
        {^/<text y="0" font-size="} font-size {" font-weight="} form font-weight {">}
    ]

    foreach [font-family line] lines [
        line-width: get-text-width font-family font-size reduce [font-weight] line
        keep reduce [
            {^/<tspan font-family="} font-family {" x="} 230 - line-width {" dy="} font-size * 1.4 {">} line {</tspan>}
        ]
    ]

    keep [
        {^/</text>}
        {^/</svg>}
    ]
]

HT: @hiiamboris for assistance in font size differences Red <-> SVG

Aside: Deep dive CSS: font metrics, line-height and vertical-align (some background on font metrics, for future reference)