Swift で上付き文字・下付き文字を表示させる

iOSアプリで「H₂O」や「x²」のような上付き文字や下付き文字を表示する方法について調査する機会があった。

さくさんは、2010年頃（iPhone OS 3.xの時代）からiOSアプリの開発を行っているが、上付き文字や下付き文字を扱うのは今回が初めてだった。他の多くの方もあまり使わないのか、Swiftで上付き文字や下付き文字を扱う方法について説明している記事を見つけることができなかった。

上付き文字・下付き文字とは

Unicodeのコードポイントを指定すれば、上付き文字や下付き文字を表示できるだろうことは理解していたが、その「小さな文字が横についている状態」を何と呼ぶのかを調査するのに苦労した。

Wikipediaによると、上付き文字や下付き文字は、基準となる文字の上部または下部に書かれる付記文字のようだ。英語では、上付き文字は「superscript」、下付き文字は「subscript」と呼ばれる。

頻繁に使用するであろう数字の上付き文字や下付き文字は以下の表にまとめた。

通常文字	上付き文字	下付き文字	Unicode (上付き)	Unicode (下付き)
0	⁰	₀	U+2070	U+2080
1	¹	₁	U+00B9	U+2081
2	²	₂	U+00B2	U+2082
3	³	₃	U+00B3	U+2083
4	⁴	₄	U+2074	U+2084
5	⁵	₅	U+2075	U+2085
6	⁶	₆	U+2076	U+2086
7	⁷	₇	U+2077	U+2087
8	⁸	₈	U+2078	U+2088
9	⁹	₉	U+2079	U+2089
a	ᵃ	ₐ	U+1D43	U+2090

文字列リテラルとして定義する場合

プログラム内で上付き文字や下付き文字を直接的な文字列リテラルとして扱いたい場合、以下のように定義することができる。

let str1 = "H\u{2082}O" // 下付き文字 2 を含む文字列 ("H₂O")
let str2 = "x\u{00B2}" // 上付き文字 2 を含む文字列 ("x²")

文字列リソースとして定義する場合

iOSアプリでは Localizable.strings を用いることでローカライズが可能だ。しかし、上付き文字や下付き文字を文字列リソースとして定義する際には、先ほど述べた文字列リテラルをそのままコピー＆ペーストして使うことはできない。記述方法が異なるため、注意が必要である。

"key_1" = "H\U2082O";
"key_2" = "x\U00B2";

サンプルコード

この記事を作成する過程で利用したSwiftUIのサンプルコードを以下に示す。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("H\u{2082}O")
                .font(.system(size: 48))
            
            Text("x\u{00B2}")
                .font(.system(size: 48))
            
            Text("key_1")
                .font(.system(size: 48))
                .foregroundColor(.green)
            
            Text("key_2")
                .font(.system(size: 48))
                .foregroundColor(.green)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}