Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
THE・縦書き / The TATEGAKI
Search
cc4966
March 05, 2019
Programming
1
3.2k
THE・縦書き / The TATEGAKI
日本語にはテキストを縦書きにして扱う文化があります。私たちが使っているコンピュータの世界で縦書きを支えている技術・実現する手段、そしてそれを取り巻く環境について話します。
cc4966
March 05, 2019
Tweet
Share
More Decks by cc4966
See All by cc4966
UGCプラットフォームの難しさをモデル化する / Modeling the Difficulties of UGC Platforms
cc4966
1
940
オフライン編集もできる複雑なデータ構造を端末間で同期するために / Offline editor and online data sync for complex structures
cc4966
3
1.2k
PHPでImageMagickとICUを使って画像に縦書きテキストを描画する / Draw vertical text in PHP using ImageMagick and ICU
cc4966
1
1.2k
iPadOSでマウス・キーボード対応アプリを作る / iPadOS App using Pointer and Keyboard
cc4966
3
970
アプリストアからのレポート集計自動化 / App Report Automation
cc4966
0
150
縦書きエディタを6プラットフォームで開発してみて / On development of multi-platform text editor for vertical writing
cc4966
4
3.8k
ゼロから実装する縦書きTextViewとその周辺技術 / Vertical TextView from Scratch and Related Technologies
cc4966
6
5k
UIViewとUITextInputで作る縦書きのTextView / Vertical TextView based on UIView with UITextInput
cc4966
7
3.2k
Other Decks in Programming
See All in Programming
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
2
740
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
Kotlin 2.0 and Beyond
antonarhipov
2
150
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
A New Era of Testing
mannodermaus
2
510
Featured
See All Featured
Six Lessons from altMBA
skipperchong
26
3.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Unsuck your backbone
ammeep
667
57k
Fireside Chat
paigeccino
31
2.9k
Speed Design
sergeychernyshev
22
430
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Agile that works and the tools we love
rasmusluckow
327
20k
Debugging Ruby Performance
tmm1
72
12k
Clear Off the Table
cherdarchuk
91
320k
Transcript
THE・ 縦 書 き KeynoteもGoogleスライドも縦書きできないので PowerPointで作りました
自 己 紹 介 • rokuroku • Twitter: @496_ •
だいたいアプリエンジニア • 縦書き関連 • TATEditorという縦書きエディタを趣味で開発・公開 • pixivの小説PDF変換機能の実装(縦書き) • iOSDC 2018で「縦書きTextView」について発表 • DroidKaigi 2019で「縦書きTextView」について発表
縦 書 き と は • 文 字 の 進
行 方 向 が 上 下 方 向 • 日 本 語 • モ ン ゴ ル 語 ( モ ン ゴ ル 文 字 ) • 日 本 語 の ユ ー ス ケ ー ス • 小 説 • 脚 本 • 新 聞 • コ ン ピ ュ ー タ 上 の 縦 書 き テ キ ス ト を 取 り 巻 く 環 境 に つ い て 話 し ま す
テ キ ス ト • テキスト • UTF-8でもShift-JISでもなんでもいい • 縦書きでも横書きでもテキストはテキスト
• OSは基本的に横書きがデフォルト • 縦書きのUIは用意されていないことが多い • 縦書きにしようと思ったらどうするの?
デ ー タ • 仕様に縦書きのある主要なデータ形式 • HTML (CSS) • writing-mode:
vertical-lr / vertical-rl を指定 • SVG 1.1 • writing-mode: tb / tb-rl を指定 • PDF • CMap: WMode 1 なフォントを使う
ビ ュ ー ア • 縦 書 き で 表
示 さ せ る 仕 様 は あ る • ビ ュ ー ア が 対 応 し て い れ ば よ い • ビ ュ ー ア は ど う や っ て テ キ ス ト を 縦 書 き で 表 示 す る の ? • テ キ ス ト を フ ォ ン ト を 使 っ て 画 像 に 変 換 し て 表 示 し ま す • フ ォ ン ト に 縦 書 き 用 文 字 が 必 要
テ キ ス ト を 画 像 に す る
• 横書きならGUIシステムにテキスト描画APIが あるけど… … • Canvas API (JavaScript) のfillText的なの • 縦書きだとそれが存在しないこともある • ない場合は作らないといけない • フォントを読み込むところから • 頑張れば作れます 作り方が知りたい方は あとで聞いてください
ビ ュ ー ア が あ る な ら エ
デ ィ タ も ほ し い • 大 体 ビ ュ ー ア と 同 じ • 日 本 語 入 力 に は IME が 必 要 不 可 欠 • 横 書 き 縦 書 き ど っ ち で も • 縦 書 き 対 応 に は 三 つ の ハ ー ド ル 1. OS に 仕 組 み が 必 要 2. IME の 縦 書 き 対 応 が 必 要 3. ア プ リ で の 実 装 も 必 要 理想
各 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つ全部 実装経験あり
各 ブ ラ ウ ザ の 縦 書 き 入
力 対 応 • ブラウザで縦書き編集 • writing-mode: vertical-lr / vertical-rl • contenteditable="true" • ブラウザによって対応差がある ブラウザ 縦書き入力への対応 Firefox あり Edge あり Safari あり Google Chrome なし (上下左右に正しく動けない)
ま と め ・ そ の 他 • 縦 書
き を 取 り 巻 く 環 境 • TextView す ら な い こ と が 多 い • テ キ ス ト 描 画 API も な か っ た り • OS ご と の 対 応 状 況 の 違 い • ブ ラ ウ ザ 間 の 対 応 状 況 の 違 い • も っ と つ ら い こ と • 行 の ス ク ロ ー ル 方 向 が 横 方 向 • ス マ ホ で 縦 書 き す る と ソ フ ト キ ー ボ ー ド の 有 無 で リ フ ロ ー