Subscript and Superscript

[matus-z-ceros]

Add support for text per-character subscript and superscript.

Possibly as an enumeration of the values "NORMAL", "SUBSCRIPT", "SUPERSCRIPT" or the abbreviated "NORMAL", "SUB", "SUPER".

[Chlumsky-Ceros]

What would be the name of the property?

My concern here is, do we know if there is a single agreed upon way to position subscript and superscript? What about instead specifying some kind of baseline offset and font size? (Not saying one is better than the other, but we should at least look at the possibilities.)

[cerosnikita]

@Chlumsky-Ceros yep, makes sense. I've checked XD right now and they use some kind of dual approach:

• in ux array they mark affected segments with textScript: 'superscript' | 'subscript' | 'none'
• in paragraphs they use:

{
  y: 285,
  from: 15,
  to: 17,
  style: {
    font: {
      size: 46.66400146484375
    },
    textAttributes: {
      verticalAlign: -26.664000837017696
    }
  }
}

I am not sure what's best approach for our text engine. Any thoughts, @matus-z-ceros / @Chlumsky-Ceros?

xd design:
subsup.xd.zip

full json:

{
    "version": "1.5.0",
    "children": [{
        "type": "artboard",
        "meta": {
            "ux": {
                "nameL10N": "SHAPE_RECTANGLE",
                "constraintsDisabled": true,
                "gridStyle": {
                    "rowStroke": {
                        "type": "solid",
                        "color": {
                            "mode": "RGB",
                            "value": {
                                "r": 199,
                                "g": 199,
                                "b": 199
                            },
                            "alpha": 0.5019607843137255
                        }
                    },
                    "columnStroke": {
                        "type": "solid",
                        "color": {
                            "mode": "RGB",
                            "value": {
                                "r": 199,
                                "g": 199,
                                "b": 199
                            },
                            "alpha": 0.5019607843137255
                        }
                    },
                    "rowSpacing": 8,
                    "columnSpacing": 8,
                    "defaultLayoutWidth": 1920,
                    "columns": 12,
                    "gutter": 16,
                    "marginLeft": 140,
                    "marginTop": 0,
                    "marginRight": 140,
                    "marginBottom": 0,
                    "layoutRowStroke": {
                        "type": "solid",
                        "color": {
                            "mode": "RGB",
                            "value": {
                                "r": 0,
                                "g": 255,
                                "b": 255
                            },
                            "alpha": 0.25098039215686274
                        }
                    },
                    "layoutColumnStroke": {
                        "type": "solid",
                        "color": {
                            "mode": "RGB",
                            "value": {
                                "r": 0,
                                "g": 255,
                                "b": 255
                            },
                            "alpha": 0.25098039215686274
                        }
                    }
                }
            }
        },
        "id": "d9e17270-954e-4aee-8884-72b4864f7ed9",
        "style": {
            "fill": {
                "type": "solid",
                "color": {
                    "mode": "RGB",
                    "value": {
                        "r": 255,
                        "g": 255,
                        "b": 255
                    }
                }
            }
        },
        "artboard": {
            "children": [{
                "type": "text",
                "name": "wgerg\nerg\nerg\nerg\nerg\nerg\n",
                "meta": {
                    "ux": {
                        "nameL10N": "SHAPE_GROUP",
                        "singleTextObject": true,
                        "rangedStyles": [{
                            "length": 11,
                            "linkId": "",
                            "fontFamily": "Helvetica Neue",
                            "fontStyle": "Regular",
                            "postscriptName": "HelveticaNeue",
                            "fontSize": 80,
                            "charSpacing": 0,
                            "underline": false,
                            "textTransform": "none",
                            "textScript": "none",
                            "fill": {
                                "value": 4285558896
                            },
                            "strikethrough": false,
                            "hyperlinkUrl": ""
                        }, {
                            "length": 3,
                            "linkId": "",
                            "fontFamily": "Helvetica Neue",
                            "fontStyle": "Regular",
                            "postscriptName": "HelveticaNeue",
                            "fontSize": 80,
                            "charSpacing": 0,
                            "underline": false,
                            "textTransform": "none",
                            "textScript": "superscript",
                            "fill": {
                                "value": 4285558896
                            },
                            "strikethrough": false,
                            "hyperlinkUrl": ""
                        }, {
                            "length": 1,
                            "linkId": "",
                            "fontFamily": "Helvetica Neue",
                            "fontStyle": "Regular",
                            "postscriptName": "HelveticaNeue",
                            "fontSize": 80,
                            "charSpacing": 0,
                            "underline": false,
                            "textTransform": "none",
                            "textScript": "none",
                            "fill": {
                                "value": 4285558896
                            },
                            "strikethrough": false,
                            "hyperlinkUrl": ""
                        }, {
                            "length": 3,
                            "linkId": "",
                            "fontFamily": "Helvetica Neue",
                            "fontStyle": "Regular",
                            "postscriptName": "HelveticaNeue",
                            "fontSize": 80,
                            "charSpacing": 0,
                            "underline": false,
                            "textTransform": "none",
                            "textScript": "subscript",
                            "fill": {
                                "value": 4285558896
                            },
                            "strikethrough": false,
                            "hyperlinkUrl": ""
                        }, {
                            "length": 8,
                            "linkId": "",
                            "fontFamily": "Helvetica Neue",
                            "fontStyle": "Regular",
                            "postscriptName": "HelveticaNeue",
                            "fontSize": 80,
                            "charSpacing": 0,
                            "underline": false,
                            "textTransform": "none",
                            "textScript": "none",
                            "fill": {
                                "value": 4285558896
                            },
                            "strikethrough": false,
                            "hyperlinkUrl": ""
                        }],
                        "localTransform": {
                            "a": 1,
                            "b": 0,
                            "c": 0,
                            "d": 1,
                            "tx": 510,
                            "ty": 301
                        }
                    }
                },
                "id": "83127cae-5a7a-48a0-b463-4c584698b175",
                "transform": {
                    "a": 1,
                    "b": 0,
                    "c": 0,
                    "d": 1,
                    "tx": 510,
                    "ty": 301
                },
                "style": {
                    "fill": {
                        "type": "solid",
                        "color": {
                            "mode": "RGB",
                            "value": {
                                "r": 112,
                                "g": 112,
                                "b": 112
                            }
                        }
                    },
                    "font": {
                        "postscriptName": "HelveticaNeue",
                        "family": "Helvetica Neue",
                        "style": "Regular",
                        "size": 80
                    }
                },
                "text": {
                    "frame": {
                        "type": "positioned"
                    },
                    "paragraphs": [{
                        "lines": [
                            [{
                                "y": 0,
                                "from": 0,
                                "to": 5,
                                "x": 0
                            }]
                        ]
                    }, {
                        "lines": [
                            [{
                                "y": 95,
                                "from": 6,
                                "to": 9,
                                "x": 0
                            }]
                        ]
                    }, {
                        "lines": [
                            [{
                                "y": 190,
                                "from": 10,
                                "to": 11,
                                "x": 0
                            }, {
                                "y": 190,
                                "from": 11,
                                "to": 13,
                                "style": {
                                    "font": {
                                        "size": 46.66400146484375
                                    },
                                    "textAttributes": {
                                        "verticalAlign": 26.664000837017696
                                    }
                                }
                            }]
                        ]
                    }, {
                        "lines": [
                            [{
                                "y": 285,
                                "from": 14,
                                "to": 15,
                                "x": 0
                            }, {
                                "y": 285,
                                "from": 15,
                                "to": 17,
                                "style": {
                                    "font": {
                                        "size": 46.66400146484375
                                    },
                                    "textAttributes": {
                                        "verticalAlign": -26.664000837017696
                                    }
                                }
                            }]
                        ]
                    }, {
                        "lines": [
                            [{
                                "y": 380,
                                "from": 18,
                                "to": 21,
                                "x": 0
                            }]
                        ]
                    }, {
                        "lines": [
                            [{
                                "y": 475,
                                "from": 22,
                                "to": 25,
                                "x": 0
                            }]
                        ]
                    }, {
                        "lines": [
                            [{
                                "x": 0,
                                "y": 570,
                                "from": 0,
                                "to": 0
                            }]
                        ]
                    }],
                    "rawText": "wgerg\nerg\nerg\nerg\nerg\nerg\n"
                }
            }],
            "meta": {
                "ux": {
                    "path": "d9e17270-954e-4aee-8884-72b4864f7ed9"
                }
            },
            "ref": "d9e17270-954e-4aee-8884-72b4864f7ed9"
        }
    }],
    "resources": {
        "href": "/resources/graphics/graphicContent.agc"
    },
    "artboards": {
        "href": "/resources/graphics/graphicContent.agc"
    }
}

[matus-z-ceros]

I'm curious how Figma does it.

I've researched a little bit about subscripts and superscripts and apparently the topic isn't as simple as scaling a regular text and placing it with a pre-defined baseline offset. This would lead to a so-called "faux” sub/super-script where the proportions of the scaled sub/super-scripted text wouldn't be the same as the regular text (notice that the scaled "faux" number 2 is visibly thinner than the "true" one):

Apparently some fonts have specific Unicode symbols defined for some of the widely used sub/super-scripted characters (see wikipedia):

What Figma does (according to this Twitter thread - https://twitter.com/negativespaceca/status/1506300948594917382) is they check the used font for the "true" sub/super-script glyphs and if they are defined for the entire text, they use them. Otherwise, they use the scaled "faux" version.

Anyway, my point is that in order to correctly support "true" sub/super-script (which may well be a task for the future), we should IMO lean towards marking the text with e.g. textScript: 'superscript' | 'subscript' | 'none' rather than hard-coding a font size.

[Chlumsky-Ceros]

I definitely wouldn't bother with what you call true subscript, if someone wants it they can use the actual Unicode, and as a user, I absolutely wouldn't want different behavior depending on which characters I use.

[cerosnikita]

Interesting. I think it's enough to have just textScript: 'superscript' | 'subscript' | 'none'-like approach and just implement faux version at this moment of time. I agree with the point that having different behavior in true-subscript just unnecessarily complicates things for both renderer and final users. Maybe at some specific fonts it could be useful, but for majority of cases I think faux is okay.

So, do we all agree on just marking sub/superscripts with something like:

textScript: 'superscript' | 'subscript' | 'none'

?

[Chlumsky-Ceros]

Well, "textScript" seems like a very poor name because for example this text's script is Latin, not none. But before I agree, I still want to know if there is an official way to position subscripts and superscripts, otherwise it might be better to offer something more flexible than just an enumeration of 3 possibilities. For example, I remember that back in the day, HTML sub/sup tags didn't even change the font size, so I'm not so sure this is something settled.

[matus-z-ceros]

Ok. I agree with not going for the "True" sub/super-scripts.
And with renaming "script" to something else. Figma uses position : subscript | normal | superscript.

---

It doesn't seem that there is a consensus on the exact scaling and placement of subscript / superscript. Although the vertical displacement by 33% and scaling to 58% seem to be a common case:

Quoting from Tom Lawry's (Figma) Twitter thread:

14/ We also spent time figuring out the best way to scale and position glyphs.

15/ From here we referenced browser defaults (for <sup> and <sub> tags) and also audited the proportions and position from well supported fonts (both sans and serif). This led to @mollymerp developing her own formula for scaling these glyphs consistently.

16/ In the end we were were pleased to arrive at a solution that strikes (hopefully!) the right balance between fine typography and ease of use. Sometimes you just need to superscript something and typographic purity comes second.

Apparently, there is some confusion about the correct approach even within the typographic community:
https://typedrawers.com/discussion/860/superior-superscript-inferior-subscript-and-ordinals

---

Still, using the enumeration instead of a manually scaled and vertically displaced text has the benefit of readability and ease of use. Maybe we should opt for this rather than for "typographic purity", same as Figma.

In that case, I would research a little more on exactly what text transformation works best.

[matus-z-ceros]

I consulted with a couple of type designers and apparently there is no such global mathematical rule.

So we can either go for (1) using the position : subscript | normal | superscript and a reasonable transformation, or (2) specifying the transformation (baseline offset and relative font scale) for each text.