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.4k
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
1.1k
オフライン編集もできる複雑なデータ構造を端末間で同期するために / Offline editor and online data sync for complex structures
cc4966
3
1.3k
PHPでImageMagickとICUを使って画像に縦書きテキストを描画する / Draw vertical text in PHP using ImageMagick and ICU
cc4966
1
1.3k
iPadOSでマウス・キーボード対応アプリを作る / iPadOS App using Pointer and Keyboard
cc4966
3
1k
アプリストアからのレポート集計自動化 / App Report Automation
cc4966
0
170
縦書きエディタを6プラットフォームで開発してみて / On development of multi-platform text editor for vertical writing
cc4966
4
4.2k
ゼロから実装する縦書きTextViewとその周辺技術 / Vertical TextView from Scratch and Related Technologies
cc4966
6
5.3k
UIViewとUITextInputで作る縦書きのTextView / Vertical TextView based on UIView with UITextInput
cc4966
7
3.4k
Other Decks in Programming
See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.3k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
110
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
150
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
750
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
580
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
ソフトウェアエンジニアの成長
masuda220
PRO
10
1.1k
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
YesSQL, Process and Tooling at Scale
rocio
172
14k
What's in a price? How to price your products and services
michaelherold
244
12k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Unsuck your backbone
ammeep
669
57k
Optimizing for Happiness
mojombo
376
70k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
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 ご と の 対 応 状 況 の 違 い • ブ ラ ウ ザ 間 の 対 応 状 況 の 違 い • も っ と つ ら い こ と • 行 の ス ク ロ ー ル 方 向 が 横 方 向 • ス マ ホ で 縦 書 き す る と ソ フ ト キ ー ボ ー ド の 有 無 で リ フ ロ ー