MoraView

MoraView.swift

import SwiftUI

extension String {
    var hiraganaMorae: [String] {
        let diphthongSmallKana = Set(["ゃ", "ゅ", "ょ"].map({ Character($0) }))
        
        var output: [String] = []
        self.forEach() { character in
            if (diphthongSmallKana.contains(character)) {
                output.append((output.popLast() ?? "").appending(String(character)))
            } else {
                output.append(String(character))
            }
        }
        
        return output
    }
}


struct MoraView: View {
    let text: String
    
    private let characterWidth: CGFloat = 25.0
    private let digraphSqueezeFactor: CGFloat = 0.7
    private let digraphHorizontalOffset: CGFloat = 3.0
    
    var body: some View {
        HStack(spacing: 1) {
            ForEach(Array(text.hiraganaMorae.enumerated()), id: \.offset) { (_, mora) in
                Text(mora)
                    .scaleEffect(x: (mora.count > 1 ? digraphSqueezeFactor : 1))
                    .transformEffect(CGAffineTransform(translationX: (mora.count > 1 ? digraphHorizontalOffset : 0), y: 0))
                    .fixedSize(horizontal: true, vertical: false)
                    .frame(width: characterWidth)
            }
        }
    }
}

// Preview this in a playground, see how you like it 🙂
VStack() {
    MoraView(text: "にっぽん")
    MoraView(text: "ざんぎょう")
}.padding()