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
820
オフライン編集もできる複雑なデータ構造を端末間で同期するために / 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
940
アプリストアからのレポート集計自動化 / App Report Automation
cc4966
0
150
縦書きエディタを6プラットフォームで開発してみて / On development of multi-platform text editor for vertical writing
cc4966
4
3.7k
ゼロから実装する縦書きTextViewとその周辺技術 / Vertical TextView from Scratch and Related Technologies
cc4966
6
4.9k
UIViewとUITextInputで作る縦書きのTextView / Vertical TextView based on UIView with UITextInput
cc4966
7
3.2k
Other Decks in Programming
See All in Programming
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
CSC307 Lecture 13
javiergs
PRO
0
150
リハビリmruby
kishima
1
160
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Trial
cairolibrary720
1
130
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
It's Worth the Effort
3n
181
27k
Become a Pro
speakerdeck
PRO
15
4.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
For a Future-Friendly Web
brad_frost
173
9.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Fireside Chat
paigeccino
25
2.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
We Have a Design System, Now What?
morganepeng
46
7k
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 ご と の 対 応 状 況 の 違 い • ブ ラ ウ ザ 間 の 対 応 状 況 の 違 い • も っ と つ ら い こ と • 行 の ス ク ロ ー ル 方 向 が 横 方 向 • ス マ ホ で 縦 書 き す る と ソ フ ト キ ー ボ ー ド の 有 無 で リ フ ロ ー