ルビを振る #Swift

　やっはろー。iOS 8から文字列にルビを振ることができるようになりました。Core Text の CTRubyAnnotation (CTRubyAnnotationRef) を使います。

let ruby = "ルビ"
let string = "文字列"

let annotation = CTRubyAnnotationCreateWithAttributes(.auto, .auto, .before, ruby as CFString, [
    kCTRubyAnnotationSizeFactorAttributeName: 0.5,
] as CFDictionary)

let annotatedString = NSAttributedString(string: string, attributes: [
    kCTRubyAnnotationAttributeName as NSAttributedString.Key: annotation,
])

例です。

import UIKit
import PlaygroundSupport

extension NSAttributedString.Key {
    static let rubyAnnotation: NSAttributedString.Key = kCTRubyAnnotationAttributeName as NSAttributedString.Key
}

extension UIColor {
    static let foregroundColor: UIColor = UIColor(red: 0.788, green: 0.522, blue: 0.337, alpha: 1.0)
    static let backgroundColor: UIColor = UIColor(red: 0.984, green: 0.922, blue: 0.69, alpha: 1.0)
}

class View: UIView {
    lazy var attributedString: NSAttributedString = {
        let string = "桐間紗路"
        let ruby = "シャロ"

        let annotation = CTRubyAnnotationCreateWithAttributes(.auto, .auto, .before, ruby as CFString, [
            kCTForegroundColorAttributeName: UIColor.foregroundColor,
            kCTRubyAnnotationSizeFactorAttributeName: 0.5,
        ] as CFDictionary)

        let annotatedString = NSAttributedString(string: string, attributes: [
            .font: UIFont(name: "HiraMinProN-W6", size: 60.0)!,
            .foregroundColor: UIColor.foregroundColor,
            .rubyAnnotation: annotation,
        ])

        return annotatedString
    }()

    override func draw(_ rect: CGRect) {
        let size = attributedString.boundingRect(with: rect.size,
                                                 options: .usesDeviceMetrics,
                                                 context: nil)

        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }

        context.setFillColor(UIColor.backgroundColor.cgColor)
        context.fill(rect)

        context.scaleBy(x: 1, y: -1)
        context.translateBy(x: (rect.width - size.width) / 2, y: -1 * (rect.height - size.height) / 2)

        let line = CTLineCreateWithAttributedString(attributedString)
        CTLineDraw(line, context)
    }
}


let frame = UIScreen.main.bounds.applying(CGAffineTransform(scaleX: 0.5, y: 0.5))
PlaygroundPage.current.liveView = View(frame: frame)

楽しい！₍₍ (ง╹◡╹)ว ⁾⁾

　ということで名詠式をやります。ルビの振りは青空文庫における表記を真似て ｜文字列《ルビ》 としています。

import UIKit
import PlaygroundSupport

extension NSAttributedString.Key {
    static let rubyAnnotation: NSAttributedString.Key = kCTRubyAnnotationAttributeName as NSAttributedString.Key
}

extension NSMutableAttributedString {
    func addAttributes(_ attrs: [NSAttributedString.Key: Any] = [:]) {
        addAttributes(attrs, range: NSRange(string.startIndex ..< string.endIndex, in: string))
    }
}

extension NSRegularExpression {
    func matches(in string: String, options: NSRegularExpression.MatchingOptions = []) -> [NSTextCheckingResult] {
        return matches(in: string, options: options, range: NSRange(string.startIndex ..< string.endIndex, in: string))
    }
}

class View: UIView {
    let fontSize: CGFloat = 16
    var lineHeight: CGFloat { fontSize * 1.8 }

    lazy var attributedString: NSAttributedString = {
        let text = """
        「まさか、｜後罪《クライム》の｜触媒《カタリスト》を〈｜讃来歌《オラトリオ》〉無しで？」
        教師たちの狼狽した声が次々と上がる。
        ……なんでだろう。何を驚いているんだろう。
        ただ普通に、この｜触媒《カタリスト》を使って｜名詠門《チャネル》を開かせただけなのに。
        そう言えば、何を｜詠《よ》ぼう。
        自分の一番好きな花でいいかな。
        どんな宝石より素敵な、わたしの大好きな緋色の花。
        ――『｜Keinez《赤》』――
        そして、少女の口ずさんだその後に――
        """

        let attributedString = NSMutableAttributedString(string: text)

        for result in try! NSRegularExpression(pattern: "｜(.+?)《(.+?)》").matches(in: text).reversed() {
            if let string = Range(result.range(at: 1), in: text).map({ String(text[$0]) }),
                let ruby = Range(result.range(at: 2), in: text).map({ String(text[$0]) }) {
                let annotation = CTRubyAnnotationCreateWithAttributes(.auto, .auto, .before, ruby as CFString, [
                    kCTRubyAnnotationSizeFactorAttributeName: 0.5,
                ] as CFDictionary)
                let annotatedString = NSAttributedString(string: string, attributes: [
                    .rubyAnnotation: annotation,
                ])

                attributedString.replaceCharacters(in: result.range, with: annotatedString)
            }
        }

        attributedString.addAttributes([
            .font: UIFont(name: "HiraMinProN-W3", size: fontSize)!,
            .verticalGlyphForm: true,
        ])

        return attributedString
    }()

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }

        context.setFillColor(UIColor.white.cgColor)
        context.fill(rect)

        context.rotate(by: .pi / 2)
        context.scaleBy(x: 1, y: -1)
        context.translateBy(x: 0, y: rect.width)

        let framesetter = CTFramesetterCreateWithAttributedString(attributedString)
        let frame = CTFramesetterCreateFrame(framesetter, CFRange(), CGPath(rect: rect, transform: nil), [
            kCTFrameProgressionAttributeName: CTFrameProgression.rightToLeft.rawValue,
        ] as CFDictionary)

        for line in CTFrameGetLines(frame) as! [CTLine] {
            context.translateBy(x: 0, y: -1 * lineHeight)
            CTLineDraw(line, context)
        }
    }
}

let frame = UIScreen.main.bounds.applying(CGAffineTransform(scaleX: 0.5, y: 0.5))
PlaygroundPage.current.liveView = View(frame: frame)

CTFrameDraw ではなく CTLineDraw なのは、ルビの有無で行の高さが変わってつらい感じになるからです。どうして。

楽しい！₍₍ (ง╹◡╹)ว ⁾⁾