First Commitment

cmex-30 · Aug 4, 2017 · a181e18 · a181e18
commit a181e18
Show file tree

Hide file tree

Showing 9 changed files with 385 additions and 0 deletions.
diff --git a/case01/bpmfgpos.otf b/case01/bpmfgpos.otf
diff --git a/case01/index.html b/case01/index.html
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-Hant-TW" xml:lang="zh-Hant-TW">
+<head>
+<meta charset="UTF-8">
+<title>Bopomofo Test Case 01</title>
+<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
+<style>
+
+html {
+	font-family: TestFont,serif;
+	font-size: 36px;
+}
+
+@font-face { 
+	font-family: TestFont; 
+	src: url(bpmfgpos.otf); 
+}
+
+ruby {
+/* in this case, use OpenType feature 'kern' instead of 'mark' */
+font-feature-settings: "kern";
+-moz-font-feature-settings: "kern=1";
+-ms-font-feature-settings: "kern";
+-webkit-font-feature-settings: "kern";
+-o-font-feature-settings: "kern";
+}
+
+rt{
+font-size: 28%;
+letter-spacing: 0;
+ruby-align: center;
+-moz-ruby-align: center;
+-ms-ruby-align: center;
+-webkit-ruby-align: center;
+-o-ruby-align: center;
+/* it seems ruby-align properties doesn't implied, text-align instead */
+text-align: center;
+
+}
+
+.description {
+	font-size: 14px;
+	border: 1px solid black;
+	border-radius: 2px;
+	padding: 3px;
+	font-family: serif;
+	text-align: center;
+}
+
+
+
+</style>
+</head>
+
+<body>
+	<p class="description">說明：文字橫排、注音橫排，使用<a href="https://www.facebook.com/but.ko.5">But Ko</a>的<a href="bpmfgpos.otf">bpmfgpos.otf</a>調整調號位置。<br/>Text and Bopomofo in horizontal writing, embedded subsetted font with GPOS feature to adjust tone marks' position.<br/><br/>
+<a href="http://binb.tw/bopomofo/case02/">Case02</a> | <a href="http://binb.tw/bopomofo/case03/">Case03</a></p>
+
+<h1>
+<ruby>一<rt>ㄧ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt></ruby></h1>
+
+<p><ruby>天<rt>ㄊ一ㄢ</rt>亮<rt>ㄌ一ㄤˋ</rt>了<rt>˙ㄌㄜ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>我<rt>ㄨㄛˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt></ruby></p>
+
+<? to avoid ruby marked on punctuations, blank rt added. ?>
+
+<p><ruby>天<rt>ㄊ一ㄢ</rt>亮<rt>ㄌ一ㄤˋ</rt>了<rt>˙ㄌㄜ</rt>，<rt></rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>。<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>。<rt></rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>，<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>。<rt></rt>我<rt>ㄨㄛˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt>，<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt></ruby>。</p>
+
+<p class="description">測試狀況回報<br/>report here</p>
+
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+    /* * * CONFIGURATION VARIABLES * * */
+    var disqus_shortname = 'bopomofotest';
+
+    /* * * DON'T EDIT BELOW THIS LINE * * */
+    (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+
+</body></html>
diff --git a/case02/bpmfgpos.otf b/case02/bpmfgpos.otf
diff --git a/case02/index.html b/case02/index.html
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-hant-TW" xml:lang="zh-hant-TW">
+<head>
+<meta charset="UTF-8"><title>Bopomofo Test Case 02</title>
+<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
+<style>
+
+html {
+	font-family: TestFont, serif;
+	font-size: 36px;
+}
+
+.vert {
+	-moz-writing-mode: vertical-rl;
+	-ms-writing-mode: vertical-rl;
+	-o-writing-mode: vertical-rl;
+	-webkit-writing-mode: vertical-rl;
+  	writing-mode: vertical-rl;
+  	margin-left: auto;
+  	margin-right: auto;
+}
+
+@font-face { 
+	font-family: TestFont; 
+	src: url(bpmfgpos.otf); 
+}
+
+p {
+	text-align: justify;
+	text-justify: ideographic;
+}
+
+ruby {
+/* in this case, use OpenType feature 'vkrn' instead of 'mark' */
+	font-feature-settings: "vkrn";
+	-moz-font-feature-settings: "vkrn=1";
+	-ms-font-feature-settings: "vkrn";
+	-webkit-font-feature-settings: "vkrn";
+	-o-font-feature-settings: "vkrn";
+}
+
+rt{
+font-size: 28%;
+letter-spacing: 0;
+ruby-align: center;
+/* it seems ruby-align properties doesn't implied, text-align instead */
+text-align: center;
+text-orientation: upright;
+
+
+}
+
+.description {
+	font-size: 14px;
+	border: 1px solid black;
+	border-radius: 2px;
+	padding: 3px;
+	font-family: serif;
+	text-align: center;
+}
+
+
+
+</style>
+</head>
+
+<body>
+	<p class="description">說明：文字直排、注音直排，使用<a href="https://www.facebook.com/but.ko.5">But Ko</a>的<a href="bpmfgpos.otf">bpmfgpos.otf</a>調整調號位置。<br/>
+若Firefox無法顯示直排，請安裝<a href="https://nightly.mozilla.org">Nightly版本</a>，透過<a href="about:config">about:config</a>將layout.css.vertical-text.enabled設定為True.<br/>
+Chrome可安裝<a href="https://www.google.com.tw/chrome/browser/canary.html">Chrome Canary</a>測試。<br/><br/>
+Text and Bopomofo in vertical writing, embedded subsetted font with GPOS feature to adjust tone marks' position.<br/>
+If your Firefox cannot show vertical text, please download <a href="https://nightly.mozilla.org">nightly build</a>, set 'layout.css.vertical-text.enabled' value to true.<br/>
+On Google Chrome, you can try <a href="https://www.google.com.tw/chrome/browser/canary.html">Chrome Canary</a>.<br/><br/>
+<a href="http://binb.tw/bopomofo/case01/">Case01</a> | <a href="http://binb.tw/bopomofo/case03/">Case03</a></p>
+<div class="vert">
+<h1>
+<ruby>一<rt>ㄧ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt></ruby></h1>
+
+
+
+<p><ruby>天<rt>ㄊ一ㄢ</rt>亮<rt>ㄌ一ㄤˋ</rt>了<rt>˙ㄌㄜ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>我<rt>ㄨㄛˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt></ruby></p>
+
+<? to avoid ruby marked on punctuations, blank rt added. ?>
+
+<p><ruby>天<rt>ㄊ一ㄢ</rt>亮<rt>ㄌ一ㄤˋ</rt>了<rt>˙ㄌㄜ</rt>，<rt></rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>。<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>。<rt></rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>，<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>。<rt></rt>我<rt>ㄨㄛˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt>，<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt></ruby>。</p>
+</div>
+<p class="description">測試狀況回報<br/>report here</p>
+
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+    /* * * CONFIGURATION VARIABLES * * */
+    var disqus_shortname = 'bopomofotest';
+
+    /* * * DON'T EDIT BELOW THIS LINE * * */
+    (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+
+</body></html>
diff --git a/case03/bpmfgpos.otf b/case03/bpmfgpos.otf
diff --git a/case03/index.html b/case03/index.html
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-hant-TW" xml:lang="zh-hant-TW">
+<head>
+<meta charset="UTF-8">
+<title>Bopomofo Test Case 03</title>
+<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
+<style>
+
+html {
+	font-size: 36px;
+}
+
+
+
+@font-face { 
+	font-family: TestFont; 
+	src: url(bpmfgpos.otf); 
+}
+
+p {
+	text-align: justify;
+	text-justify: ideographic;
+}
+
+ruby {
+	-webkit-ruby-position: inter-character;
+	-moz-ruby-position: inter-character;
+	ruby-position: inter-character;
+/* in this case, use OpenType feature 'vkrn' instead of 'mark' */
+	font-feature-settings: "vkrn";
+	-moz-font-feature-settings: "vkrn=1";
+	-ms-font-feature-settings: "vkrn";
+	-webkit-font-feature-settings: "vkrn";
+	-o-font-feature-settings: "vkrn";
+}
+
+rt{
+font-size: 28%;
+letter-spacing: 0;
+ruby-align: center;
+-moz-ruby-align: center;
+-ms-ruby-align: center;
+-webkit-ruby-align: center;
+-o-ruby-align: center;
+/* it seems ruby-align properties doesn't implied, text-align instead */
+text-align: center;
+
+}
+
+.description {
+	font-size: 14px;
+	border: 1px solid black;
+	border-radius: 2px;
+	padding: 3px;
+	font-family: serif;
+	text-align: center;
+}
+
+
+
+</style>
+</head>
+
+<body>
+	<p class="description">說明：文字橫排、注音直排、注音置於右側字間，使用<a href="https://www.facebook.com/but.ko.5">But Ko</a>的<a href="bpmfgpos.otf">bpmfgpos.otf</a>調整調號位置。<br/>
+請安裝支援ruby-position: inter-character的<a href="http://nightly.webkit.org/">Webkit Nightly Build</a>測試<br/><br/>
+Text in horizontal writing and Bopomofo in vertical writing with ruby-position: inter-character, Bopomofo  embedded subsetted font with GPOS feature to adjust tone marks' position.<br/>
+Please test on <a href="http://nightly.webkit.org/">Webkit Nightly Build</a> that supports ruby-position: inter-character.<br/><br/>
+<a href="http://binb.tw/bopomofo/case01/">Case01</a> | <a href="http://binb.tw/bopomofo/case02/">Case02</a></p>
+
+<h1>
+<ruby>一<rt>ㄧ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt></ruby></h1>
+
+<p><ruby>天<rt>ㄊ一ㄢ</rt>亮<rt>ㄌ一ㄤˋ</rt>了<rt>˙ㄌㄜ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>我<rt>ㄨㄛˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt></ruby></p>
+
+<? to avoid ruby marked on punctuations, blank rt added. ?>
+
+<p><ruby>天<rt>ㄊ一ㄢ</rt>亮<rt>ㄌ一ㄤˋ</rt>了<rt>˙ㄌㄜ</rt>，<rt></rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>。<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>來<rt>ㄌㄞˊ</rt>了<rt>˙ㄌㄜ</rt>。<rt></rt>我<rt>ㄨㄛˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>，<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>起<rt>ㄑㄧˇ</rt>得<rt>˙ㄉㄜ</rt>早<rt>ㄗㄠˇ</rt>。<rt></rt>我<rt>ㄨㄛˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt>，<rt></rt>太<rt>ㄊㄞˋ</rt>陽<rt>ㄧㄤˊ</rt>也<rt>一ㄝˇ</rt>天<rt>ㄊㄧㄢ</rt>天<rt>ㄊㄧㄢ</rt>早<rt>ㄗㄠˇ</rt>起<rt>ㄑㄧˇ</rt></ruby>。</p>
+
+<p class="description">測試狀況回報<br/>report here</p>
+
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+    /* * * CONFIGURATION VARIABLES * * */
+    var disqus_shortname = 'bopomofotest';
+
+    /* * * DON'T EDIT BELOW THIS LINE * * */
+    (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+
+</body></html>
diff --git a/case04/bpmfgpos.otf b/case04/bpmfgpos.otf
diff --git a/case04/index.html b/case04/index.html
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml"  lang="zh-hant-TW" xml:lang="zh-hant-TW">
+<head>
+<meta charset="UTF-8">
+<title>Bopomofo Test Case 02</title>
+<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
+<style>
+
+html {
+	font-family: TestFont, serif;
+	font-size: 36px;
+}
+
+.vert {
+	-moz-writing-mode: vertical-rl;
+	-ms-writing-mode: vertical-rl;
+	-o-writing-mode: vertical-rl;
+	-webkit-writing-mode: vertical-rl;
+  	writing-mode: vertical-rl;
+  	margin-left: auto;
+  	margin-right: auto;
+}
+
+@font-face { 
+	font-family: TestFont; 
+	src: url(bpmfgpos.otf); 
+}
+
+p {
+	text-align: justify;
+	text-justify: ideographic;
+/* in this case, use OpenType feature 'vkrn' instead of 'mark' */
+	font-feature-settings: "vkrn";
+	-moz-font-feature-settings: "vkrn=1";
+	-ms-font-feature-settings: "vkrn";
+	-webkit-font-feature-settings: "vkrn";
+	-o-font-feature-settings: "vkrn";
+}
+
+
+.description {
+	font-size: 14px;
+	border: 1px solid black;
+	border-radius: 2px;
+	padding: 3px;
+	font-family: serif;
+	text-align: center;
+}
+
+
+
+</style>
+</head>
+
+<body>
+	<p class="description">說明：注音置於內文直排，使用<a href="https://www.facebook.com/but.ko.5">But Ko</a>的<a href="bpmfgpos.otf">bpmfgpos.otf</a>調整調號位置。
+<br/><br/>
+In-line bopomofo in vertical writing, embedded subsetted font with GPOS feature to adjust tone marks' position.</p>
+
+<div class="vert">
+
+
+<p>這個字念ㄒㄧㄝˋ，不唸作ㄒㄧˊ。ㄨㄛˇ吃飽˙ㄌㄜ</p>
+</div>
+<p class="description">測試狀況回報<br/>report here</p>
+
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+    /* * * CONFIGURATION VARIABLES * * */
+    var disqus_shortname = 'bopomofotest';
+
+    /* * * DON'T EDIT BELOW THIS LINE * * */
+    (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+
+</body></html>
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-Hant-TW" xml:lang="zh-Hant-TW">
+<head>
+<meta charset="UTF-8">
+<title>Bopomofo Test</title>
+<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
+
+</head>
+
+<body>
+	<h1>Bopomofo Layout Test</h1>
+	<h2><a href="case01/index.html/">Case 1</a></h2>
+	<p>Text and Bopomofo in horizontal writing, embedded subsetted font with GPOS feature to adjust tone marks' position.</p>
+	<h2><a href="case02/index.html/">Case 2</a></h2>
+	<p>Text and Bopomofo in vertical writing, embedded subsetted font with GPOS feature to adjust tone marks' position.</p>
+	<h2><a href="case03/index.html/">Case 3</a></h2>
+	<p>Text in horizontal writing and Bopomofo in vertical writing with ruby-position: inter-character, Bopomofo embedded subsetted font with GPOS feature to adjust tone marks' position.</p>
+	<h2><a href="case04/index.html/">Case 4</a></h2>
+	<p>In-line bopomofo in vertical writing, embedded subsetted font with GPOS feature to adjust tone marks' position.</p>
+
+</body></html>