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
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
日付と正規化
megmogmog1965
0
140
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Activities at Cairo Library
cairolibrary720
0
1.2k
CSC307 Lecture 07
javiergs
PRO
0
220
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
4
590
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
The Invisible Customer
myddelton
117
13k
RailsConf 2023
tenderlove
16
720
Design by the Numbers
sachag
277
18k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Git: the NoSQL Database
bkeepers
PRO
423
64k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Embracing the Ebb and Flow
colly
81
4.3k
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 ご と の 対 応 状 況 の 違 い • ブ ラ ウ ザ 間 の 対 応 状 況 の 違 い • も っ と つ ら い こ と • 行 の ス ク ロ ー ル 方 向 が 横 方 向 • ス マ ホ で 縦 書 き す る と ソ フ ト キ ー ボ ー ド の 有 無 で リ フ ロ ー