Upgrade to Pro — share decks privately, control downloads, hide ads and more …

THE・縦書き / The TATEGAKI

cc4966
March 05, 2019

THE・縦書き / The TATEGAKI

日本語にはテキストを縦書きにして扱う文化があります。私たちが使っているコンピュータの世界で縦書きを支えている技術・実現する手段、そしてそれを取り巻く環境について話します。

cc4966

March 05, 2019
Tweet

More Decks by cc4966

Other Decks in Programming

Transcript

  1. THE・



    KeynoteもGoogleスライドも縦書きできないので
    PowerPointで作りました

    View full-size slide





  2. • rokuroku
    • Twitter: @496_
    • だいたいアプリエンジニア
    • 縦書き関連
    • TATEditorという縦書きエディタを趣味で開発・公開
    • pixivの小説PDF変換機能の実装(縦書き)
    • iOSDC 2018で「縦書きTextView」について発表
    • DroidKaigi 2019で「縦書きTextView」について発表

    View full-size slide
























































































  3. View full-size slide





  4. • テキスト
    • UTF-8でもShift-JISでもなんでもいい
    • 縦書きでも横書きでもテキストはテキスト
    • OSは基本的に横書きがデフォルト
    • 縦書きのUIは用意されていないことが多い
    • 縦書きにしようと思ったらどうするの?

    View full-size slide




  5. • 仕様に縦書きのある主要なデータ形式
    • HTML (CSS)
    • writing-mode: vertical-lr / vertical-rl を指定
    • SVG 1.1
    • writing-mode: tb / tb-rl を指定
    • PDF
    • CMap: WMode 1 なフォントを使う

    View full-size slide








































































  6. 使





























    View full-size slide











  7. • 横書きならGUIシステムにテキスト描画APIが
    あるけど… …
    • Canvas API (JavaScript) のfillText的なの
    • 縦書きだとそれが存在しないこともある
    • ない場合は作らないといけない
    • フォントを読み込むところから
    • 頑張れば作れます
    作り方が知りたい方は
    あとで聞いてください

    View full-size slide




































  8. IME

































    1. OS







    2. IME









    3.










    理想

    View full-size slide


  9. OS








    • 各OSのIME APIと縦書き入力対応一覧
    プラットフォーム IME APIの名称 縦書き入力への対応
    Windows ITextStoreACP あり
    macOS NSTextInputClient あり
    GTK+ GtkIMContext あり - Gtk 3.6.18以降
    (対応IMEがない気がする)
    Android BaseInputConnection 不可能ではない
    UWP Windows.UI.Text.Core なし
    iOS UITextInput ないのと同じ
    6つ全部
    実装経験あり

    View full-size slide














  10. • ブラウザで縦書き編集
    • writing-mode: vertical-lr / vertical-rl
    • contenteditable="true"
    • ブラウザによって対応差がある
    ブラウザ 縦書き入力への対応
    Firefox あり
    Edge あり
    Safari あり
    Google Chrome なし
    (上下左右に正しく動けない)

    View full-size slide



















  11. • TextView
















    API






    • OS










































































    View full-size slide