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.5k
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.2k
オフライン編集もできる複雑なデータ構造を端末間で同期するために / Offline editor and online data sync for complex structures
cc4966
3
1.4k
PHPでImageMagickとICUを使って画像に縦書きテキストを描画する / Draw vertical text in PHP using ImageMagick and ICU
cc4966
1
1.4k
iPadOSでマウス・キーボード対応アプリを作る / iPadOS App using Pointer and Keyboard
cc4966
3
1.1k
アプリストアからのレポート集計自動化 / App Report Automation
cc4966
0
180
縦書きエディタを6プラットフォームで開発してみて / On development of multi-platform text editor for vertical writing
cc4966
4
4.5k
ゼロから実装する縦書きTextViewとその周辺技術 / Vertical TextView from Scratch and Related Technologies
cc4966
6
5.5k
UIViewとUITextInputで作る縦書きのTextView / Vertical TextView based on UIView with UITextInput
cc4966
7
3.5k
Other Decks in Programming
See All in Programming
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
410
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
330
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
620
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
280
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
エンジニア向け採用ピッチ資料
inusan
0
170
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
CursorはMCPを使った方が良いぞ
taigakono
1
200
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
5つのアンチパターンから学ぶLT設計
narihara
1
130
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
The Language of Interfaces
destraynor
158
25k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Embracing the Ebb and Flow
colly
86
4.7k
BBQ
matthewcrist
89
9.7k
Side Projects
sachag
455
42k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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 ご と の 対 応 状 況 の 違 い • ブ ラ ウ ザ 間 の 対 応 状 況 の 違 い • も っ と つ ら い こ と • 行 の ス ク ロ ー ル 方 向 が 横 方 向 • ス マ ホ で 縦 書 き す る と ソ フ ト キ ー ボ ー ド の 有 無 で リ フ ロ ー