PowerPoint プレゼンテーション

縦 書 き Web デ ザ イ ン 2 0 1 6 年 1 月 21 日 ( 木 ) 縦 書 き Web デ ザ イ ン ア ワ ー ド 連 動 企 画 作 品 応 募 〆 切 は 2 月 8 日 ( 月 )

縦書きサイトの事例 POPY Novels 全 家 研 月 刊 ポ ピ ー CSSで実現している小説 本文が縦書き http://www.popy.jp/fresta/novel s/3nen/index.php

縦 書 きサイトの 事 例 オ フ ィ シ ャ ル サ イ ト 西 尾 維 新 JavaScriptで 実 現 している 作 家 の 公 式 サイト 制 作 は カヤック 制 作? http://ni.siois.in/

TPAC W3C技術総会 2015 札幌 へデ のジ 応タ 用ル 例サ イ ネ ー ジ

[ 前 半 ] CSSを 用 いた 縦 書 きWebの 技 術 解 説

産 学 官 連 携 による 縦 書 き 標 準 化 の 国 内 検 討 体 制 縦 書 きWeb 普 及 委 員 会 ( 正 式 名 称 : 次 世 代 Webブラウザのテキストレイアウトに 関 する 検 討 会 ) 電 子 書 籍 端 末 メーカー 印 刷 事 業 社 通 信 事 業 者 などの 民 間 企 業 等 により 構 成 される 組 織 で Webにおける 縦 書 きやルビ 等 の 日 本 語 固 有 の 表 現 の 実 現 に 関 し 国 際 標 準 化 や 普 及 促 進 に 関 する 活 動 を 行 っています http://tategaki.github.io/ 官 ( 総 務 省 ) 産 学

が 縦 書 き を 実 装 2000 年 7 月 2010 年 ごろ 電 子 書 籍 の 国 際 標 準 で あ る が を 参 照 す る 形 で 縦 書 き に 対 応 2012 年 ~2013 年 1990 年 代 末 に お い て 縦 書 き 対 応 の 検 討 開 始 2011 年 10 月 産 学 官 連 携 に よ る 縦 書 き 標 準 化 の 検 討 体 制 設 立 縦 書 き 関 連 仕 様 で あ る が 勧 告 候 補 化 2014 年 10 月 ル ビ に 関 す る 機 能 が に 盛 り 込 ま れ る 形 で 勧 告 化 2015 年 9 月 が 縦 書 き 対 応 を 実 装 主 要 ブ ラ ウ ザ 全 て で 縦 書 き が 実 現 可 能 に ~~ 縦 書 きをウェブの 世 界 へ( 国 際 標 準 化 の 取 組 み) そ ろ そ ろ W e b で も 縦 書 き し て い く 時 期 で は!?

縦 書 きテキストレイアウトと CSS CSS3: Cascading Style Sheet, level 3. Level3 以 降 では さまざまな 機 能 がモジュールになっている 縦 書 きレイアウト 特 有 な 表 示 は 複 数 のモジュールを 利 用 する 必 要 がある 縦 書 き 表 示 ブラウザ 上 での 縦 書 き 表 示 (Writing Modes) 傍 線 文 字 列 の 左 右 に 線 を 付 加 (Text Decoration) ルビ 漢 字 等 に 振 り 仮 名 を 付 加 (HTML5 ruby & Ruby) 縦 中 横 特 定 の 文 字 だけ 横 書 きに 表 示 (Writing Modes) 均 等 割 り 行 末 をきれいにそろえる(Text) 圏 点 文 字 に 点 を 付 ける (Text Decoration) 禁 則 句 読 点 を 行 頭 に 位 置 しないよう にする 等 特 定 の 文 字 を 行 頭 又 は 行 末 に 位 置 させることを 禁 止 (Text)

HTML5 ruby & CSS ruby 勧 告 状 況 HTML5 ruby : Recommendation CSS Ruby Layout Module Level 1: Working Draft 基 本 書 式 <ruby> <rb> 超 電 磁 砲 </rb> <rt>レールガン</rt> </ruby> <ruby> 超 電 磁 砲 <rt>レールガン </ruby> Rec PR CR LC WD 複 雑 な 書 式 熟 語 ルビ <ruby> <rb> 熟 </rb><rb> 語 </rb> <rt>じゅく</rt><rt>ご</rt> </ruby> 両 側 ルビ <ruby> <rb> 月 <rb> 曜 <rt>げつ<rt>よう <rtc>monday style= ruby-position: under; >Monday </ruby> over または under を 指 定 縦 書 きでは over が 右 側 under が 左 側 注 :under は Firefox のみ 表 示 可 能

CSS Writing Modes 3 / 概要 勧告状況 Rec CSS Writing Modes Module Level 3: Candidate Recommendation PR CR LC Writing Modes に含まれるプロパティ WD 縦書き/横書き writing-mode 行の向き direction 文字の向き text-orientation, unicode-bidi, text-combine-upright, + 英語系言語 モンゴル語系言語 日本語系言語 参照 http://www.w3.org/tr/2012/wd-css3-writing-modes-20121115/ T e x t

CSS Writing Modes 3 / writing-mode 縦 書 き Firefox, Safari, Chrome の 書 式 html, body { writing-mode: vertical-rl; } IE の 書 式 縦 横 の 混 在 指 定 可 能 値 :vertical-lr, horizontal-tb, html, body { writing-mode: tb-rl; } 指 定 可 能 値 :lr-tb ブロック 及 びインラインブロックレベルでの 指 定 も 可 能 <p style="-webkit-writing-mode: vertical-rl;"> <span style="-webkit-writing-mode: horizontal-tb">web</span> デザイン </p>

CSS Writing Modes 3 / text-orientation 縦 書 きにおける 文 字 の 向 きの 基 本 基 本 upright sideways 半 角 文 字 90 時 計 回 り (sideways) 全 角 文 字 正 立 半 角 文 字 を 正 立 させる span#eng { text-orientation: upright; } 全 角 文 字 を90 時 計 回 りにする span#eng { text-orientation: sideways; } ( 参 考 )sideways-left と bidi 約 物 の 場 所 が 変 90 時 計 回 りは sideways-right と 呼 ばれる 90 反 時 計 回 りは sideways-left と 呼 ばれる ( 参 考 ) 縦 書 きとフォント 横 書 時 縦 書 時 縦 書 きと 横 書 きで 別 のグリフ ( 字 形 )が 必 要

CSS Writing Modes 3 / text-combine-upright 縦 中 横 CSS における 縦 中 横 複 数 の 文 字 を 1em に 収 めて 表 示 する 最 新 の 書 式.tcy { text-combine-upright: all; } 縦 中 横 に 関 するプロパティ 変 遷 と 現 状 WD-css3-writing-modes-20110428 時 点.tcy { text-combine: horizontal; } WD-css3-writing-modes-20121115 時 点.tcy { text-combine-horizontal: all; } CR-css-writing-modes-3-20140320/ 時 点 ( 最 新 ).tcy { text-combine-upright: all; } Chrome Safari EPUB 3.0 IE EPUB 3.0.1 Firefox nightly 1em 自 動 縦 中 横 文 章 中 の 数 字 を 自 動 で 縦 中 横 にしてくれる 機 能.tcy { text-combine-upright: digits 2; }

CSS2 / CSS Text & Text Decoration 3 勧 告 状 況 CSS Text Module Level 3 : Working Draft CSS Text Decoration Module Level 3: Candidate Recommendation 均 等 割 り (Text) p { text-align: justify; } Rec PR CR LC WD 圏 点 (Text Decoration) p { text-emphasis-style: sesame; } 下 線 (Text Decoration) p { text-decoration: underline; } 縦 書 きにおける 傍 線 (Text Decoration) p { text-decoration: overline; } = または p { text-decoration: underline; text-underline-position: under right; }

ウェブレイアウトの 新 技 術 Houdini レイアウトに 関 する 低 レベルな 情 報 を ユーザに 提 供 することで 細 粒 度 なレイアウト 調 整 を 可 能 にするための 手 法

ご 清 聴 ありがとうございました ビヨンド パースペクティブ ソリューションズ 株 式 会 社 榊 原 寛 skk@bpsinc.jp

後 半 パ ネ ル デ ィ ス カ ッ シ ョ ン 榊 原 寛 BPS 株 式 会 社 COO カ ワ セ タ ケ ヒ ロ musubime 代 表 佐 々 木 未 来 也 株 式 会 社 コ ン セ ン ト 高 瀬 拓 史 イ ー ス ト 株 式 会 社

JK Who s Who より 抜 粋 高 瀬 拓 史 TAKASE, Hiroshi TAKASE, Hiroshi イースト 株 式 会 社 EPUBエバンジェリスト @lost_and_found @lost_and_found 2010 年 4 月 に 日 本 電 子 出 版 協 会 (JEPA)の 依 頼 を 受 け 同 協 会 の 村 田 真 らとともに 特 別 な 技 術 や 設 備 がなくても 電 子 書 籍 を 作 ることができる 電 子 出 版 フォーマットとして 英 語 圏 で 普 及 が 始 まっていた EPUB に 縦 書 き ルビ 等 日 本 語 レイアウトを 実 現 するための 要 求 仕 様 を 作 成 同 フ ォーマットを 管 理 する 国 際 団 体 インターナショナル デジタル パブリッシ ング フォーラム(IDPF)に 提 出 した 同 年 6 月 に 開 始 したEPUB3の 仕 様 策 定 を 受 け EPUBへの 日 本 語 レイアウト 対 応 が 総 務 省 電 子 出 版 環 境 整 備 事 業 に 採 択 されると プロジェクトメンバーとして 国 内 有 識 者 の 意 見 取 りまとめを 行 う 2013 年 に 個 人 開 発 したEPUB 制 作 ウェブアプリケーション でんでんコン バーター は セルフパブリッシャー( 個 人 出 版 者 )を 中 心 に 支 持 を 集 め 同 年 のJEPA 電 子 出 版 アワードで 大 賞 を 受 賞 した 訳 書 に EPUB 3と は 何 か? (マット ガリッシュ 著 オライリー ジャパン)がある

電子書籍の変換サービスやってます 横書き(デフォルト) 縦書き 49,468 26,919 22,549 あの注目作もでんでんコンバーター製

トピック 1. 縦 書 きという 文 字 の 配 置 に 関 し て,デザイン 的 な 利 用 について 2. 現 状 の Web での 縦 書 きの 問 題 点 に 関 して 3. 次 の 世 代 の 表 示 デバイス( 表 示 メディア)

縦 書 きという 文 字 の 配 置 に 関 して, デザイン 的 な 利 用 について

現 状 の Web での 縦 書 きの 問 題 点 に 関 して

アルファベットの 扱 いは 悩 ましいですね

次 の 世 代 の 表 示 デバイス ( 表 示 メディア)

本 日 はご 参 加 頂 きありがとうございました 皆 さんの 作 品 応 募 お 待 ちしています! 縦 書 きWebデザインアワード http://tategaki.github.io/awards/ 応 募 〆 切 は2 月 8 日 ( 月 )

縦 書 きWebデザインアワード 募 集 内 容 CSS Writing Modes ( 文 字 表 記 の 方 向 ( 縦 横 )を 指 定 するCSSモジュール)を 使 用 し 1 表 現 的 に 優 れた 実 用 性 の 高 い 縦 書 きの 作 品 2Webの 新 たな 可 能 性 を 見 せてくれるような 縦 書 きの 作 品 を 募 集 自 由 部 門 CSS Writing Modes を 使 用 した 自 由 な 縦 書 きWebコンテンツ 素 材 は 問 いません( 必 要 であればご 自 身 にて 事 前 に 著 作 権 の 利 用 許 諾 を 得 て 下 さい) 課 題 部 門 課 題 部 門 素 材 (テキスト 画 像 )に 対 し CSS Writing Modesを 使 用 して 縦 書 き 化 を 行 います 一 つの 部 門 に 複 数 作 品 を 応 募 することも 可 能 です ただし 一 つの 作 品 を 複 数 部 門 に 応 募 することはできません 作 品 形 態 Web 上 に 公 開 募 集 対 象 者 一 般 Webクリエイター 学 生 ( 特 に 高 校 生 )など 性 別 年 齢 国 籍 を 問 わず 個 人 またはチームでの 参 加 が 可 能 応 募 方 法 応 募 フォームから 部 門 ごとに 作 品 URLを 応 募 応 募 期 間 2016 年 1 月 4 日 ( 月 )~2 月 15 日 ( 月 ) 表 彰 1 自 由 部 門 2 課 題 部 門 のそれぞれに 最 優 秀 賞 ( 賞 金 10 万 円 ) 優 秀 賞 ( 賞 金 又 は 副 賞 あり) 等 を 設 定 高 校 生 以 下 の 部 の 作 品 については 最 優 秀 賞 ( 賞 金 5 万 円 ) 及 び 優 秀 賞 ( 賞 金 又 は 副 賞 あり)を 設 定 選 考 方 法 応 募 作 品 の 事 前 選 考 を 実 施 候 補 者 は 表 彰 式 当 日 にアピールポイントなど3 分 程 度 でプレゼンして 頂 き 審 査 により 受 賞 作 品 を 決 定 結 果 発 表 表 彰 式 表 彰 式 およびWebサイトにて 発 表 表 彰 式 および 懇 親 会 は 以 下 のように 開 催 日 時 :2016 年 3 月 12 日 ( 土 ) 14:00~17:30 場 所 : 秋 葉 原 UDX