HTMLと漢字
何故htmlにはlang属性が必要なのか？

id:Songmu ＜y.songmu@gmail.com＞
1000speakers #5 2008-5-24

自己紹介

名前

Songmu
http://songmu.jp/

身分

システム管理者
　なんちゃってCTO
　赤魔道師
　雑用係

使える言語

HTML+CSS+(Javascript)
VBScript+MSSQLでレガシーASP
Perl(勉強中)
　JAVA, Pascal, BASIC, prolog…
中国語

HTMLにはlang属性が必要

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language-Type" content="ja,zh" />
...

UTF-8で多言語を扱えるんだからlang属性は必要ない…？
そんなふうに考えていた時期がわたしにもありました
→全然違うよ！逆だよ！

lang属性の指定による違い

<dl class="demo">
	<dt>日本語</dt>
	<dd>了解</dd>
	<dt>中国語</dt>
	<dd lang="zh-cn" xml:lang="zh-cn">了解</dd>
</dl>

日本語

了解

中国語

了解

多言語とアクセシビリティ

言語指定がないと、UA側は完全に解釈しきれない！
スクリーンリーダーに読ませると？
マシンリーダブルを考えよう
→正しくマークアップする事が、マシンリーダブル、ひいてはアクセシビリティに繋がる。更には、一つのHTML文書が多様なメディアで解釈可能になり、様々な展開が図れる。

現状のUnicodeの問題点

似たような字形に同じユニコード番号を割り当てている
→「似たような字形」って何？判断基準は？
1. 同じユニコード番号、同じ字形、違う意味
2. 同じユニコード番号、違う字形、同じ意味
3. 同じユニコード番号、違う字形、違う意味
4. 違うユニコード番号、同じ字形、同じ意味
5. 違うユニコード番号、同じ字形、違う意味
6. 違うユニコード番号、違う字形、同じ意味

日本語と中国語(簡体字)

日本語	中文
機	机	同じ意味,違うコード,違う字形
机	几	同じ意味,違うコード,違う字形 (ただし几は別の意味で使うことが多い)
骨	骨	同じ意味,同じコード,違う字形
説	说	同じ意味,違うコード,違う字形

異体字とフォント

アプローチ

違う字形にすべて違うコードを割り当てる
代表的な字しか使わない
代表的な字に対して複数の異字体情報を付加する(折衷案)
＝CJKV統合漢字と異体字セレクタ
→ Ideographic Variation DatabaseとAdobe-Japan1-6
　http://www.unicode.org/ivd/

漢字は増え続けている！

例

マイトネリウム meitnerium 元素記号109番
→新しい元素が見つかるたびに、漢字を作っている！
グリフウィキの紹介

CSS3でのフォント埋込

<style type="text/css">
@font-face{
	font-family: genso;
	src: url('font/genso.ttf') format("truetype");
}
@font-face{
	font-family: koukotsu;
	src: url('font/koukotsu.otf') format("opentype");
}
.genso   {font-family: genso;}
.koukotsu{font-family: koukotsu}
</style>
</head>
<body style="font-size:800%;text-align:center;">
	<div>                 &#xE005;&#xE006;&#xE007;&#xE008;&#xE009;</div>
	<div class="koukotsu">&#xE005;&#xE006;&#xE007;&#xE008;&#xE009;</div>
	<div class="genso">   &#xE005;&#xE006;&#xE007;&#xE008;&#xE009;</div>

DEMO(safariのみ動作)

Rubyの話

		<ruby lang="zh-cn">
			<rb>你好</rb>
			<rp>(</rp><rt>Nǐhǎo</rt><rp>)</rp>
		</ruby>

DEMO(IEのみ動作)　実例(青空文庫)

tableライクな実装
これって構造優先というより見た目優先？
addrとrubyを併用したいときはどうするの？(北大とか)

<span ruby="ほくだい" abbr="北海道大学">北大</span>
<span ruby="Běidà" abbr="北京大学" lang="zh-cn" xml:lang="zh-cn">北大</span>

まとめ

htmlにlang属性は必要
Unicodeは課題多し
グリフウィキを使ってみよう！
@font-face使えばhtmlでもフォント埋め込めるよ！
rubyタグは普及して欲しいけど、実装が…

たまには漢字のことも思い出してやってください

参考

漢字フォント自動生成技術フォーラム: http://fonts.jp/
グリフウィキ: http://glyphwiki.org/
Kanji Database Project （漢字データベース計画）: http://kanji-database.sourceforge.net/
W3C: http://www.w3.org/
The Periodic Table of Chemical Elements: http://www.sungwh.freeserve.co.uk/perdtabl.htm
CJKV日中関越情報処理 Ken Lunde著オライリージャパン

謝辞

上地宏一様
1000speakersの皆様
ご静聴の皆様

こういう機会を設けてくださりありがとうございました！

HTMLと漢字 何故htmlにはlang属性が必要なのか？

id:Songmu ＜y.songmu@gmail.com＞1000speakers #5 2008-5-24

自己紹介

HTMLにはlang属性が必要

lang属性の指定による違い

多言語とアクセシビリティ

現状のUnicodeの問題点

日本語と中国語(簡体字)

異体字とフォント

アプローチ

漢字は増え続けている！

例

CSS3でのフォント埋込

DEMO(safariのみ動作)

Rubyの話

DEMO(IEのみ動作) 実例(青空文庫)

まとめ

たまには漢字のことも思い出してやってください

参考

謝辞

谢谢!

id:Songmu ＜y.songmu@gmail.com＞

HTMLと漢字
何故htmlにはlang属性が必要なのか？

id:Songmu ＜y.songmu@gmail.com＞
1000speakers #5 2008-5-24

DEMO(IEのみ動作)　実例(青空文庫)