+---------------------------------------------------------------- */
+/* 四邊 */
+.m-auto { margin: auto; }
+.m-0,
+.m-0em,
+.m-000per { margin: 0; }
+
+/* 以％指定 */
+.m-005per { margin: 5%; }
+.m-010per { margin: 10%; }
+.m-015per { margin: 15%; }
+.m-020per { margin: 20%; }
+.m-025per { margin: 25%; }
+.m-030per { margin: 30%; }
+.m-033per { margin: 33%; }
+.m-040per { margin: 40%; }
+.m-050per { margin: 50%; }
+.m-060per { margin: 60%; }
+.m-067per { margin: 67%; }
+.m-070per { margin: 70%; }
+.m-075per { margin: 75%; }
+.m-080per { margin: 80%; }
+.m-090per { margin: 90%; }
+
+/* 以文字數指定 */
+.m-0em10 { margin: 0.10em; }
+.m-0em20 { margin: 0.20em; }
+.m-0em25 { margin: 0.25em; }
+.m-0em30 { margin: 0.30em; }
+.m-0em40 { margin: 0.40em; }
+.m-0em50 { margin: 0.50em; }
+.m-0em60 { margin: 0.60em; }
+.m-0em70 { margin: 0.70em; }
+.m-0em75 { margin: 0.75em; }
+.m-0em80 { margin: 0.80em; }
+.m-0em90 { margin: 0.90em; }
+.m-1em { margin: 1.00em; }
+.m-1em25 { margin: 1.25em; }
+.m-1em50 { margin: 1.50em; }
+.m-1em75 { margin: 1.75em; }
+.m-2em { margin: 2.00em; }
+.m-2em50 { margin: 2.50em; }
+.m-3em { margin: 3.00em; }
+.m-4em { margin: 4.00em; }
+.m-5em { margin: 5.00em; }
+
+
+/* 螢幕上方（直排：行頭／橫排：行前方） */
+.m-top-auto { margin-top: auto; }
+.m-top-0,
+.m-top-0em,
+.m-top-000per { margin-top: 0; }
+
+/* 以％指定 */
+.m-top-005per { margin-top: 5%; }
+.m-top-010per { margin-top: 10%; }
+.m-top-015per { margin-top: 15%; }
+.m-top-020per { margin-top: 20%; }
+.m-top-025per { margin-top: 25%; }
+.m-top-030per { margin-top: 30%; }
+.m-top-033per { margin-top: 33%; }
+.m-top-040per { margin-top: 40%; }
+.m-top-050per { margin-top: 50%; }
+.m-top-060per { margin-top: 60%; }
+.m-top-067per { margin-top: 67%; }
+.m-top-070per { margin-top: 70%; }
+.m-top-075per { margin-top: 75%; }
+.m-top-080per { margin-top: 80%; }
+.m-top-090per { margin-top: 90%; }
+
+/* 以文字數指定 */
+.m-top-0em25 { margin-top: 0.25em; }
+.m-top-0em50 { margin-top: 0.50em; }
+.m-top-0em75 { margin-top: 0.75em; }
+.m-top-1em { margin-top: 1.00em; }
+.m-top-1em25 { margin-top: 1.25em; }
+.m-top-1em50 { margin-top: 1.50em; }
+.m-top-1em75 { margin-top: 1.75em; }
+.m-top-2em { margin-top: 2.00em; }
+.m-top-2em50 { margin-top: 2.50em; }
+.m-top-3em { margin-top: 3.00em; }
+.m-top-4em { margin-top: 4.00em; }
+.m-top-5em { margin-top: 5.00em; }
+.m-top-5em25 { margin-top: 5.25em; }
+
+
+/* 螢幕左側（直排：行後方／橫排：行頭） */
+.m-left-auto { margin-left: auto; }
+.m-left-0,
+.m-left-0em,
+.m-left-000per { margin-left: 0; }
+
+/* 以％指定 */
+.m-left-005per { margin-left: 5%; }
+.m-left-010per { margin-left: 10%; }
+.m-left-015per { margin-left: 15%; }
+.m-left-020per { margin-left: 20%; }
+.m-left-025per { margin-left: 25%; }
+.m-left-030per { margin-left: 30%; }
+.m-left-033per { margin-left: 33%; }
+.m-left-040per { margin-left: 40%; }
+.m-left-050per { margin-left: 50%; }
+.m-left-060per { margin-left: 60%; }
+.m-left-067per { margin-left: 67%; }
+.m-left-070per { margin-left: 70%; }
+.m-left-075per { margin-left: 75%; }
+.m-left-080per { margin-left: 80%; }
+.m-left-090per { margin-left: 90%; }
+
+/* 以文字數指定 */
+.m-left-0em25 { margin-left: 0.25em; }
+.m-left-0em50 { margin-left: 0.50em; }
+.m-left-0em75 { margin-left: 0.75em; }
+.m-left-1em { margin-left: 1.00em; }
+.m-left-1em25 { margin-left: 1.25em; }
+.m-left-1em50 { margin-left: 1.50em; }
+.m-left-1em75 { margin-left: 1.75em; }
+.m-left-2em { margin-left: 2.00em; }
+.m-left-2em50 { margin-left: 2.50em; }
+.m-left-3em { margin-left: 3.00em; }
+.m-left-4em { margin-left: 4.00em; }
+.m-left-5em { margin-left: 5.00em; }
+.m-left-5em25 { margin-left: 5.25em; }
+
+
+/* 螢幕右側（直排：行前方／橫排：行末） */
+.m-right-auto { margin-right: auto; }
+.m-right-0
+.m-right-0em
+.m-right-000per { margin-right: 0; }
+
+/* 以％指定 */
+.m-right-005per { margin-right: 5%; }
+.m-right-010per { margin-right: 10%; }
+.m-right-015per { margin-right: 15%; }
+.m-right-020per { margin-right: 20%; }
+.m-right-025per { margin-right: 25%; }
+.m-right-030per { margin-right: 30%; }
+.m-right-033per { margin-right: 33%; }
+.m-right-040per { margin-right: 40%; }
+.m-right-050per { margin-right: 50%; }
+.m-right-060per { margin-right: 60%; }
+.m-right-067per { margin-right: 67%; }
+.m-right-070per { margin-right: 70%; }
+.m-right-075per { margin-right: 75%; }
+.m-right-080per { margin-right: 80%; }
+.m-right-090per { margin-right: 90%; }
+
+/* 以文字數指定 */
+.m-right-0em25 { margin-right: 0.25em; }
+.m-right-0em50 { margin-right: 0.50em; }
+.m-right-0em75 { margin-right: 0.75em; }
+.m-right-1em { margin-right: 1.00em; }
+.m-right-1em25 { margin-right: 1.25em; }
+.m-right-1em50 { margin-right: 1.50em; }
+.m-right-1em75 { margin-right: 1.75em; }
+.m-right-2em { margin-right: 2.00em; }
+.m-right-2em50 { margin-right: 2.50em; }
+.m-right-3em { margin-right: 3.00em; }
+.m-right-4em { margin-right: 4.00em; }
+.m-right-5em { margin-right: 5.00em; }
+.m-right-5em25 { margin-right: 5.25em; }
+
+
+/* 螢幕下側（直排：行末／橫排：行後方） */
+.m-bottom-auto { margin-bottom: auto; }
+.m-bottom-0,
+.m-bottom-0em,
+.m-bottom-000per { margin-bottom: 0; }
+
+/* 以％指定 */
+.m-bottom-005per { margin-bottom: 5%; }
+.m-bottom-010per { margin-bottom: 10%; }
+.m-bottom-015per { margin-bottom: 15%; }
+.m-bottom-020per { margin-bottom: 20%; }
+.m-bottom-025per { margin-bottom: 25%; }
+.m-bottom-030per { margin-bottom: 30%; }
+.m-bottom-033per { margin-bottom: 33%; }
+.m-bottom-040per { margin-bottom: 40%; }
+.m-bottom-050per { margin-bottom: 50%; }
+.m-bottom-060per { margin-bottom: 60%; }
+.m-bottom-067per { margin-bottom: 67%; }
+.m-bottom-070per { margin-bottom: 70%; }
+.m-bottom-075per { margin-bottom: 75%; }
+.m-bottom-080per { margin-bottom: 80%; }
+.m-bottom-090per { margin-bottom: 90%; }
+
+/* 以文字數指定 */
+.m-bottom-0em25 { margin-bottom: 0.25em; }
+.m-bottom-0em50 { margin-bottom: 0.50em; }
+.m-bottom-0em75 { margin-bottom: 0.75em; }
+.m-bottom-1em { margin-bottom: 1.00em; }
+.m-bottom-1em25 { margin-bottom: 1.25em; }
+.m-bottom-1em50 { margin-bottom: 1.50em; }
+.m-bottom-1em75 { margin-bottom: 1.75em; }
+.m-bottom-2em { margin-bottom: 2.00em; }
+.m-bottom-2em50 { margin-bottom: 2.50em; }
+.m-bottom-3em { margin-bottom: 3.00em; }
+.m-bottom-4em { margin-bottom: 4.00em; }
+.m-bottom-5em { margin-bottom: 5.00em; }
+.m-bottom-5em25 { margin-bottom: 5.25em; }
+
+
+/* 內圍留白（Padding）
+---------------------------------------------------------------- */
+/* 四邊 */
+.p-0,
+.p-0em,
+.p-000per { padding: 0; }
+
+/* 以％指定 */
+.p-005per { padding: 5%; }
+.p-010per { padding: 10%; }
+.p-015per { padding: 15%; }
+.p-020per { padding: 20%; }
+.p-025per { padding: 25%; }
+.p-030per { padding: 30%; }
+.p-033per { padding: 33%; }
+.p-040per { padding: 40%; }
+.p-050per { padding: 50%; }
+.p-060per { padding: 60%; }
+.p-067per { padding: 67%; }
+.p-070per { padding: 70%; }
+.p-075per { padding: 75%; }
+.p-080per { padding: 80%; }
+.p-090per { padding: 90%; }
+
+/* 以文字數指定 */
+.p-0em10 { padding: 0.10em; }
+.p-0em20 { padding: 0.20em; }
+.p-0em25 { padding: 0.25em; }
+.p-0em30 { padding: 0.30em; }
+.p-0em40 { padding: 0.40em; }
+.p-0em50 { padding: 0.50em; }
+.p-0em60 { padding: 0.60em; }
+.p-0em70 { padding: 0.70em; }
+.p-0em75 { padding: 0.75em; }
+.p-0em80 { padding: 0.80em; }
+.p-0em90 { padding: 0.90em; }
+.p-1em { padding: 1.00em; }
+.p-1em25 { padding: 1.25em; }
+.p-1em50 { padding: 1.50em; }
+.p-1em75 { padding: 1.75em; }
+.p-2em { padding: 2.00em; }
+.p-2em50 { padding: 2.50em; }
+.p-3em { padding: 3.00em; }
+.p-4em { padding: 4.00em; }
+.p-5em { padding: 5.00em; }
+
+
+/* 螢幕上側（直排：行頭／橫排：行前方） */
+.p-top-0,
+.p-top-0em,
+.p-top-000per { padding-top: 0; }
+
+/* 以％指定 */
+.p-top-005per { padding-top: 5%; }
+.p-top-010per { padding-top: 10%; }
+.p-top-015per { padding-top: 15%; }
+.p-top-020per { padding-top: 20%; }
+.p-top-025per { padding-top: 25%; }
+.p-top-030per { padding-top: 30%; }
+.p-top-033per { padding-top: 33%; }
+.p-top-040per { padding-top: 40%; }
+.p-top-050per { padding-top: 50%; }
+.p-top-060per { padding-top: 60%; }
+.p-top-067per { padding-top: 67%; }
+.p-top-070per { padding-top: 70%; }
+.p-top-075per { padding-top: 75%; }
+.p-top-080per { padding-top: 80%; }
+.p-top-090per { padding-top: 90%; }
+
+/* 以文字數指定 */
+.p-top-0em25 { padding-top: 0.25em; }
+.p-top-0em50 { padding-top: 0.50em; }
+.p-top-0em75 { padding-top: 0.75em; }
+.p-top-1em { padding-top: 1.00em; }
+.p-top-1em25 { padding-top: 1.25em; }
+.p-top-1em50 { padding-top: 1.50em; }
+.p-top-1em75 { padding-top: 1.75em; }
+.p-top-2em { padding-top: 2.00em; }
+.p-top-2em50 { padding-top: 2.50em; }
+.p-top-3em { padding-top: 3.00em; }
+.p-top-4em { padding-top: 4.00em; }
+.p-top-5em { padding-top: 5.00em; }
+.p-top-5em25 { padding-top: 5.25em; }
+
+
+/* 螢幕左側（直排：行後方／橫排：行頭） */
+.p-left-0,
+.p-left-0em,
+.p-left-000per { padding-left: 0; }
+
+/* 以％指定 */
+.p-left-005per { padding-left: 5%; }
+.p-left-010per { padding-left: 10%; }
+.p-left-015per { padding-left: 15%; }
+.p-left-020per { padding-left: 20%; }
+.p-left-025per { padding-left: 25%; }
+.p-left-030per { padding-left: 30%; }
+.p-left-033per { padding-left: 33%; }
+.p-left-040per { padding-left: 40%; }
+.p-left-050per { padding-left: 50%; }
+.p-left-060per { padding-left: 60%; }
+.p-left-067per { padding-left: 67%; }
+.p-left-070per { padding-left: 70%; }
+.p-left-075per { padding-left: 75%; }
+.p-left-080per { padding-left: 80%; }
+.p-left-090per { padding-left: 90%; }
+
+/* 以文字數指定 */
+.p-left-0em25 { padding-left: 0.25em; }
+.p-left-0em50 { padding-left: 0.50em; }
+.p-left-0em75 { padding-left: 0.75em; }
+.p-left-1em { padding-left: 1.00em; }
+.p-left-1em25 { padding-left: 1.25em; }
+.p-left-1em50 { padding-left: 1.50em; }
+.p-left-1em75 { padding-left: 1.75em; }
+.p-left-2em { padding-left: 2.00em; }
+.p-left-2em50 { padding-left: 2.50em; }
+.p-left-3em { padding-left: 3.00em; }
+.p-left-4em { padding-left: 4.00em; }
+.p-left-5em { padding-left: 5.00em; }
+.p-left-5em25 { padding-left: 5.25em; }
+
+
+/* 螢幕右側（直排：行前方／橫排：行末） */
+.p-right-0
+.p-right-0em
+.p-right-000per { padding-right: 0; }
+
+/* 以％指定 */
+.p-right-005per { padding-right: 5%; }
+.p-right-010per { padding-right: 10%; }
+.p-right-015per { padding-right: 15%; }
+.p-right-020per { padding-right: 20%; }
+.p-right-025per { padding-right: 25%; }
+.p-right-030per { padding-right: 30%; }
+.p-right-033per { padding-right: 33%; }
+.p-right-040per { padding-right: 40%; }
+.p-right-050per { padding-right: 50%; }
+.p-right-060per { padding-right: 60%; }
+.p-right-067per { padding-right: 67%; }
+.p-right-070per { padding-right: 70%; }
+.p-right-075per { padding-right: 75%; }
+.p-right-080per { padding-right: 80%; }
+.p-right-090per { padding-right: 90%; }
+
+/* 以文字數指定 */
+.p-right-0em25 { padding-right: 0.25em; }
+.p-right-0em50 { padding-right: 0.50em; }
+.p-right-0em75 { padding-right: 0.75em; }
+.p-right-1em { padding-right: 1.00em; }
+.p-right-1em25 { padding-right: 1.25em; }
+.p-right-1em50 { padding-right: 1.50em; }
+.p-right-1em75 { padding-right: 1.75em; }
+.p-right-2em { padding-right: 2.00em; }
+.p-right-2em50 { padding-right: 2.50em; }
+.p-right-3em { padding-right: 3.00em; }
+.p-right-4em { padding-right: 4.00em; }
+.p-right-5em { padding-right: 5.00em; }
+.p-right-5em25 { padding-right: 5.25em; }
+
+
+/* 螢幕下側（直排：行末／橫排：行後方） */
+.p-bottom-0,
+.p-bottom-0em,
+.p-bottom-000per { padding-bottom: 0; }
+
+/* 以％指定 */
+.p-bottom-005per { padding-bottom: 5%; }
+.p-bottom-010per { padding-bottom: 10%; }
+.p-bottom-015per { padding-bottom: 15%; }
+.p-bottom-020per { padding-bottom: 20%; }
+.p-bottom-025per { padding-bottom: 25%; }
+.p-bottom-030per { padding-bottom: 30%; }
+.p-bottom-033per { padding-bottom: 33%; }
+.p-bottom-040per { padding-bottom: 40%; }
+.p-bottom-050per { padding-bottom: 50%; }
+.p-bottom-060per { padding-bottom: 60%; }
+.p-bottom-067per { padding-bottom: 67%; }
+.p-bottom-070per { padding-bottom: 70%; }
+.p-bottom-075per { padding-bottom: 75%; }
+.p-bottom-080per { padding-bottom: 80%; }
+.p-bottom-090per { padding-bottom: 90%; }
+
+/* 以文字數指定 */
+.p-bottom-0em25 { padding-bottom: 0.25em; }
+.p-bottom-0em50 { padding-bottom: 0.50em; }
+.p-bottom-0em75 { padding-bottom: 0.75em; }
+.p-bottom-1em { padding-bottom: 1.00em; }
+.p-bottom-1em25 { padding-bottom: 1.25em; }
+.p-bottom-1em50 { padding-bottom: 1.50em; }
+.p-bottom-1em75 { padding-bottom: 1.75em; }
+.p-bottom-2em { padding-bottom: 2.00em; }
+.p-bottom-2em50 { padding-bottom: 2.50em; }
+.p-bottom-3em { padding-bottom: 3.00em; }
+.p-bottom-4em { padding-bottom: 4.00em; }
+.p-bottom-5em { padding-bottom: 5.00em; }
+.p-bottom-5em25 { padding-bottom: 5.25em; }
+
+
+/* 高度
+---------------------------------------------------------------- */
+.height-auto { height: auto; }
+
+/* 以％指定 */
+.height-010per { height: 10%; }
+.height-020per { height: 20%; }
+.height-025per { height: 25%; }
+.height-030per { height: 30%; }
+.height-033per { height: 33%; }
+.height-040per { height: 40%; }
+.height-050per { height: 50%; }
+.height-060per { height: 60%; }
+.height-067per { height: 67%; }
+.height-070per { height: 70%; }
+.height-075per { height: 75%; }
+.height-080per { height: 80%; }
+.height-090per { height: 90%; }
+.height-100per { height: 100%; }
+
+/* 以文字數指定 */
+.height-0em25 { height: 0.25em; }
+.height-0em50 { height: 0.50em; }
+.height-0em75 { height: 0.75em; }
+.height-1em { height: 1.00em; }
+.height-1em25 { height: 1.25em; }
+.height-1em50 { height: 1.50em; }
+.height-1em75 { height: 1.75em; }
+.height-2em { height: 2.00em; }
+.height-2em50 { height: 2.50em; }
+.height-3em { height: 3.00em; }
+.height-4em { height: 4.00em; }
+.height-5em { height: 5.00em; }
+.height-5em25 { height: 5.25em; }
+.height-6em { height: 6.00em; }
+.height-7em { height: 7.00em; }
+.height-8em { height: 8.00em; }
+.height-8em75 { height: 8.75em; }
+.height-9em { height: 9.00em; }
+.height-10em { height: 10.00em; }
+.height-11em { height: 11.00em; }
+.height-12em { height: 12.00em; }
+.height-13em { height: 13.00em; }
+.height-14em { height: 14.00em; }
+.height-15em { height: 15.00em; }
+.height-20em { height: 20.00em; }
+.height-30em { height: 30.00em; }
+.height-40em { height: 40.00em; }
+
+
+/* 高度的最大値
+---------------------------------------------------------------- */
+.max-height-none { max-height: none; }
+
+/* 以％指定 */
+.max-height-010per { max-height: 10%; }
+.max-height-020per { max-height: 20%; }
+.max-height-025per { max-height: 25%; }
+.max-height-030per { max-height: 30%; }
+.max-height-033per { max-height: 33%; }
+.max-height-040per { max-height: 40%; }
+.max-height-050per { max-height: 50%; }
+.max-height-060per { max-height: 60%; }
+.max-height-067per { max-height: 67%; }
+.max-height-070per { max-height: 70%; }
+.max-height-075per { max-height: 75%; }
+.max-height-080per { max-height: 80%; }
+.max-height-090per { max-height: 90%; }
+.max-height-100per { max-height: 100%; }
+
+/* 以文字數指定 */
+.max-height-0em25 { max-height: 0.25em; }
+.max-height-0em50 { max-height: 0.50em; }
+.max-height-0em75 { max-height: 0.75em; }
+.max-height-1em { max-height: 1.00em; }
+.max-height-1em25 { max-height: 1.25em; }
+.max-height-1em50 { max-height: 1.50em; }
+.max-height-1em75 { max-height: 1.75em; }
+.max-height-2em { max-height: 2.00em; }
+.max-height-2em50 { max-height: 2.50em; }
+.max-height-3em { max-height: 3.00em; }
+.max-height-4em { max-height: 4.00em; }
+.max-height-5em { max-height: 5.00em; }
+.max-height-5em25 { max-height: 5.25em; }
+.max-height-6em { max-height: 6.00em; }
+.max-height-7em { max-height: 7.00em; }
+.max-height-8em { max-height: 8.00em; }
+.max-height-8em75 { max-height: 8.75em; }
+.max-height-9em { max-height: 9.00em; }
+.max-height-10em { max-height: 10.00em; }
+.max-height-11em { max-height: 11.00em; }
+.max-height-12em { max-height: 12.00em; }
+.max-height-13em { max-height: 13.00em; }
+.max-height-14em { max-height: 14.00em; }
+.max-height-15em { max-height: 15.00em; }
+.max-height-20em { max-height: 20.00em; }
+.max-height-30em { max-height: 30.00em; }
+.max-height-40em { max-height: 40.00em; }
+
+
+/* 寬度
+---------------------------------------------------------------- */
+.width-auto { width: auto; }
+
+/* 以％指定 */
+.width-010per { width: 10%; }
+.width-020per { width: 20%; }
+.width-025per { width: 25%; }
+.width-030per { width: 30%; }
+.width-033per { width: 33%; }
+.width-040per { width: 40%; }
+.width-050per { width: 50%; }
+.width-060per { width: 60%; }
+.width-067per { width: 67%; }
+.width-070per { width: 70%; }
+.width-075per { width: 75%; }
+.width-080per { width: 80%; }
+.width-090per { width: 90%; }
+.width-100per { width: 100%; }
+
+/* 以文字數指定 */
+.width-0em25 { width: 0.25em; }
+.width-0em50 { width: 0.50em; }
+.width-0em75 { width: 0.75em; }
+.width-1em { width: 1.00em; }
+.width-1em25 { width: 1.25em; }
+.width-1em50 { width: 1.50em; }
+.width-1em75 { width: 1.75em; }
+.width-2em { width: 2.00em; }
+.width-2em50 { width: 2.50em; }
+.width-3em { width: 3.00em; }
+.width-4em { width: 4.00em; }
+.width-5em { width: 5.00em; }
+.width-5em25 { width: 5.25em; }
+.width-6em { width: 6.00em; }
+.width-7em { width: 7.00em; }
+.width-8em { width: 8.00em; }
+.width-8em75 { width: 8.75em; }
+.width-9em { width: 9.00em; }
+.width-10em { width: 10.00em; }
+.width-11em { width: 11.00em; }
+.width-12em { width: 12.00em; }
+.width-13em { width: 13.00em; }
+.width-14em { width: 14.00em; }
+.width-15em { width: 15.00em; }
+.width-20em { width: 20.00em; }
+.width-30em { width: 30.00em; }
+.width-40em { width: 40.00em; }
+
+
+/* 寬度的最大値
+---------------------------------------------------------------- */
+.max-width-none { max-width: none; }
+
+/* 以％指定 */
+.max-width-010per { max-width: 10%; }
+.max-width-020per { max-width: 20%; }
+.max-width-025per { max-width: 25%; }
+.max-width-030per { max-width: 30%; }
+.max-width-033per { max-width: 33%; }
+.max-width-040per { max-width: 40%; }
+.max-width-050per { max-width: 50%; }
+.max-width-060per { max-width: 60%; }
+.max-width-067per { max-width: 67%; }
+.max-width-070per { max-width: 70%; }
+.max-width-075per { max-width: 75%; }
+.max-width-080per { max-width: 80%; }
+.max-width-090per { max-width: 90%; }
+.max-width-100per { max-width: 100%; }
+
+/* 以文字數指定 */
+.max-width-0em25 { max-width: 0.25em; }
+.max-width-0em50 { max-width: 0.50em; }
+.max-width-0em75 { max-width: 0.75em; }
+.max-width-1em { max-width: 1.00em; }
+.max-width-1em25 { max-width: 1.25em; }
+.max-width-1em50 { max-width: 1.50em; }
+.max-width-1em75 { max-width: 1.75em; }
+.max-width-2em { max-width: 2.00em; }
+.max-width-2em50 { max-width: 2.50em; }
+.max-width-3em { max-width: 3.00em; }
+.max-width-4em { max-width: 4.00em; }
+.max-width-5em { max-width: 5.00em; }
+.max-width-5em25 { max-width: 5.25em; }
+.max-width-6em { max-width: 6.00em; }
+.max-width-7em { max-width: 7.00em; }
+.max-width-8em { max-width: 8.00em; }
+.max-width-8em75 { max-width: 8.75em; }
+.max-width-9em { max-width: 9.00em; }
+.max-width-10em { max-width: 10.00em; }
+.max-width-11em { max-width: 11.00em; }
+.max-width-12em { max-width: 12.00em; }
+.max-width-13em { max-width: 13.00em; }
+.max-width-14em { max-width: 14.00em; }
+.max-width-15em { max-width: 15.00em; }
+.max-width-20em { max-width: 20.00em; }
+.max-width-30em { max-width: 30.00em; }
+.max-width-40em { max-width: 40.00em; }
+
+
+/* 最大尺寸
+---------------------------------------------------------------- */
+.max-size-none { max-height: none; max-width: none; }
+
+/* 以％指定 */
+.max-size-005per { max-height: 5%; max-width: 5%; }
+.max-size-010per { max-height: 10%; max-width: 10%; }
+.max-size-020per { max-height: 20%; max-width: 20%; }
+.max-size-025per { max-height: 25%; max-width: 25%; }
+.max-size-030per { max-height: 30%; max-width: 30%; }
+.max-size-033per { max-height: 33%; max-width: 33%; }
+.max-size-040per { max-height: 40%; max-width: 40%; }
+.max-size-050per { max-height: 50%; max-width: 50%; }
+.max-size-060per { max-height: 60%; max-width: 60%; }
+.max-size-067per { max-height: 67%; max-width: 67%; }
+.max-size-070per { max-height: 70%; max-width: 70%; }
+.max-size-075per { max-height: 75%; max-width: 75%; }
+.max-size-080per { max-height: 80%; max-width: 80%; }
+.max-size-090per { max-height: 90%; max-width: 90%; }
+.max-size-100per { max-height: 100%; max-width: 100%; }
+
+/* 以文字數指定 */
+.max-size-0em25 { max-height: 0.25em; max-width: 0.25em; }
+.max-size-0em50 { max-height: 0.50em; max-width: 0.50em; }
+.max-size-0em75 { max-height: 0.75em; max-width: 0.75em; }
+.max-size-1em { max-height: 1.00em; max-width: 1.00em; }
+.max-size-1em25 { max-height: 1.25em; max-width: 1.25em; }
+.max-size-1em50 { max-height: 1.50em; max-width: 1.50em; }
+.max-size-1em75 { max-height: 1.75em; max-width: 1.75em; }
+.max-size-2em { max-height: 2.00em; max-width: 2.00em; }
+.max-size-2em50 { max-height: 2.50em; max-width: 2.50em; }
+.max-size-3em { max-height: 3.00em; max-width: 3.00em; }
+.max-size-4em { max-height: 4.00em; max-width: 4.00em; }
+.max-size-5em { max-height: 5.00em; max-width: 5.00em; }
+.max-size-5em25 { max-height: 5.25em; max-width: 5.25em; }
+.max-size-6em { max-height: 6.00em; max-width: 6.00em; }
+.max-size-7em { max-height: 7.00em; max-width: 7.00em; }
+.max-size-8em { max-height: 8.00em; max-width: 8.00em; }
+.max-size-8em75 { max-height: 8.75em; max-width: 8.75em; }
+.max-size-9em { max-height: 9.00em; max-width: 9.00em; }
+.max-size-10em { max-height: 10.00em; max-width: 10.00em; }
+.max-size-11em { max-height: 11.00em; max-width: 11.00em; }
+.max-size-12em { max-height: 12.00em; max-width: 12.00em; }
+.max-size-13em { max-height: 13.00em; max-width: 13.00em; }
+.max-size-14em { max-height: 14.00em; max-width: 14.00em; }
+.max-size-15em { max-height: 15.00em; max-width: 15.00em; }
+.max-size-20em { max-height: 20.00em; max-width: 20.00em; }
+.max-size-30em { max-height: 30.00em; max-width: 30.00em; }
+.max-size-40em { max-height: 40.00em; max-width: 40.00em; }
+
+
+/* 避頭點規則
+---------------------------------------------------------------- */
+.line-break-auto {
+ -webkit-line-break: auto;
+}
+.line-break-loose {
+ -webkit-line-break: loose;
+}
+.line-break-normal {
+ -webkit-line-break: normal;
+}
+.line-break-strict {
+ -webkit-line-break: strict;
+}
+
+
+/* 自動換行規則
+---------------------------------------------------------------- */
+.word-break-normal {
+ -webkit-word-break: normal;
+}
+.word-break-break-all {
+ -webkit-word-break: break-all;
+ word-break: break-all;
+}
+.word-break-keep-all {
+ -webkit-word-break: keep-all;
+}
+
+
+/* 長單字的換行規則
+---------------------------------------------------------------- */
+.word-wrap-normal {
+ word-wrap: normal;
+}
+.word-wrap-break-word {
+ word-wrap: break-word;
+}
+
+
+/* 【参考】文繞圖
+---------------------------------------------------------------- */
+/* 圖置於行頭方向 */
+.float-left,
+.float-start {
+ float: left;
+}
+/* 圖置於行尾方向 */
+.float-right,
+.float-end {
+ float: right;
+}
+/* 不要文繞圖 */
+.float-none {
+ float: none;
+}
+/* 解除文繞圖 */
+.float-clear {
+ clear: both;
+}
+/* 解除圖置於行頭方向 */
+.float-clear-left,
+.float-clear-start {
+ clear: left;
+}
+/* 解除圖置於行尾方向 */
+.float-clear-right,
+.float-clear-end {
+ clear: right;
+}
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-001.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-001.xhtml"
new file mode 100644
index 0000000..119fc39
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-001.xhtml"
@@ -0,0 +1,21 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-002.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-002.xhtml"
new file mode 100644
index 0000000..22e6d2c
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-002.xhtml"
@@ -0,0 +1,34 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
流式版面的適用範圍
+
+
+
+
EPUB 3 （reflow 流式版面）適用於一般文字書，如小說、非虛構、詩集等以文字為主，輔以插圖的書籍。
+
+
流式版面的使用方式
+
+
請將內容按照標題、內文等，使用<h1>、使用<h2>以及使用<p>元素標註後，依照章節置入範本中的各內容頁。再使用CSS的樣式進行修整，可直接將class加入各內容元素，或者使用使用<span>對行內文字作修飾
+
+
+
+
+
次頁為不使用任何CSS時的預設內容顯示範本
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-003.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-003.xhtml"
new file mode 100644
index 0000000..497ad34
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-003.xhtml"
@@ -0,0 +1,46 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
+
大標：一桿稱仔
+
+
中標：賴和
+
+
鎮南威麗村裡，住的人家，大都是勤儉、耐苦、平和、順從的農民。村中除了包辦官業的幾家勢豪，從事公職的幾家下級官吏，其餘都是窮苦的占多數。
+
+
村中，秦得參的一家，尤其是窮困得慘痛，當他生下的時候，他父親早就死了。他在世，雖曾得幾畝田地耕作，他死了後，只剩下可憐的妻兒。鄰右看她母子倆的孤苦，多為之傷心。有些上了年紀的人，就替他們設法，因為餓死已經不是小事了。結局因鄰人的做媒，他母親就招贅一個夫婿進來，他的後父不太能體恤這個前夫的兒子，而且把他母親亦只視作一種機器，所以得參，不僅不能得到幸福，又多挨些打罵，他母親因此和後夫就不十分和睦。
+
+
第三層小標
+
+
幸他母親，耐勞苦，會打算，自己織草鞋、畜雞鴨、養豬，辛辛苦苦，始能度那近於似人的生活。好容易，到得參九歲的那一年，他母親就遣他，去替人家看牛、做長工。這時候，他後夫已不大顧到家內，雖然他們母子倆，自己的勞力，經已可免凍餒的威脅。
+
+
第四層小標
+
+
+
得參十六歲的時候，他母親教他辭去了長工，回家裡來，想租幾畝田耕作，可是這時候，租田就不容易了。因為製糖會社，糖的利益大，雖農民們受過會社刻虧、剝奪，不願意種蔗，會社就加「租聲」向業主爭，業主們若自己有利益，那管到農民的痛苦，田地就多被會社租去了。若做會社的勞工呢，有同牛馬一樣，他母親又不肯，只在家裡，等著做些散工。因他的氣力大，做事勤敏，就每天有人喚他工作，比較他做長工的時候，勞力輕省，得錢又多。又得他母親的刻儉，漸積下些錢來。到得參十八歲的時候，他母親為得參娶妻。就在村中，娶了一個種田的女兒。幸得過門以後，和得參還協力到田裡工作，他一家生計，暫不覺得困難。得參的母親，在他二十一歲那一年，得了一個男孫子，不久後，就過世了。
+
+
第五層小標
+
+
+
+引言：翌年，他又生下一女孩子。家裡頭因失去了母親，須他妻子自己照管，並且有了兒子的拖累，不能和他出外工作，進款就減少一半，所以得參自己不能不加倍工作，這樣辛苦著，過有四年，他的身體，就因過勞，患著瘧疾，病了四五天，才診過一次西醫，花去兩塊多錢，雖則輕快些，腳手尚覺乏力，在這煩忙的時候，而又是勤勉的得參，就不敢閒在家裡，亦即耐苦到田裡去。到晚上回家，就覺得有點不好過，睡到夜半，寒熱再發起來，翌天也不能離床，這回他不敢再請西醫診治了。他心裡想，三天的工作，還不夠吃一服藥，那得那麼些錢花？但亦不能放他病著，就煎些不用錢的青草，或不多花錢的漢藥服食。雖未全部無效，總隔兩三天，發一回寒熱，經過有好幾個月，才不再發作。
+
+
+
第六層小標
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-004.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-004.xhtml"
new file mode 100644
index 0000000..52f45d1
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-004.xhtml"
@@ -0,0 +1,68 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
預設CSS樣式表說明
+
+
本範本的style資料夾中提供六組預設樣式表範本，以下為各CSS檔案的說明。
+
+
+
・book-style.css
+
+
+為在內容文件（XHTML）中主要連結的樣式表
+以此樣式表匯入（@import）其他樣式表內容
+提供書籍客製化設計調整，若要對排版設計進行調整，請修改本CSS檔案中的內容
+
+
+
・style-reset.css
+
+
+本樣式表的主要目的為將UA（瀏覽器引擎，如Webkit等）的預設樣式表重置，以避免在不同UA之間造成不一致的顯示結果。
+
+
+
・style-standard.css
+
+
+本樣式表為主要樣式設定，包含文字方向、位置對齊、縮排與字體樣式等等，可參考此處預設值對內容加入層級（Class）進行排版調整，若有需要客製化修改之處，請不要直接修改本樣式表，請到book-style.css調整
+
+
+
・style-advance.css
+
+
+本樣式表主要提供兩項功能：
+
+以邏輯方向（start, end, before, after）調整尺寸
+對應子元素排版方向改變時（如直排中的橫排Box）的樣式調整
+
+
+
+
・style-check.css
+
+
+本樣式表為將以範本製作的電子書，在某些版本的Windows上測試時，以求直排字型能正常顯示所設
+本樣式表預設不在book-style.css中匯入
+
+
+
・font.css
+
+
+本樣式表主要提供嵌入字體時使用，作為範例檔案
+本樣式表預設不在book-style.css中匯入，有需求時請於book-style.css匯入
+
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-005.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-005.xhtml"
new file mode 100644
index 0000000..1d8d0c9
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-005.xhtml"
@@ -0,0 +1,54 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
文字排列方向
+
+
文字書分為「直排」與「橫排」兩種。
+
+
請依照排版方向做以下調整：
+
+
・橫排書
+
+
。OPF檔案
+
+
需要在<spine> 中設定翻頁方向，由右向左如：
+
+
<spine page-progression-direction="rtl">
+
+
或者不設定，預設為橫排書的向左翻頁。
+
+
<spine>
+
+
。內容（html）檔案
+
+
需要在<html> 內加入class="hltr" ，內文行文則會由左而右、行由上而下排列。
+
+
・直排書
+
+
+
。OPF檔案
+
+
需要在<spine>中設定翻頁方向，由左向右如：
+
+
<spine page-progression-direction="ltr">
+
+
。內容（html）檔案
+
+
需要在<html> 內加入class="vrtl" ，內文行文則會由上而下，行由右而左排列。
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-006.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-006.xhtml"
new file mode 100644
index 0000000..35e6e27
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-006.xhtml"
@@ -0,0 +1,265 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
文字處理
+
+
這部分針對書籍內文的樣式進行說明。
+
+
・字體
+
+
字體預設使用「明體」顯示，若段落以及個別文字需要更改文字，可套用以下語法：
+
+
+
+
黑體為class="gfont"
+
+
楷體為class="kfont"，但是否能顯示，得依閱讀程式是否內建
+
+
明體為class="mfont"
+
+
・文字尺寸
+
+
文字尺寸以閱讀程式預設字級為主，針對不同段落、標題，可使用預設的CSS進行調整。
+
+
調整方式分為「以百分比指定」和「以預設字級字數指定」。
+
+
以百分比指定，將依照元素字級為基準變化，例如標題預設為2em，套用font-050per，即為1em。
+
+
可使用以下CSS於HTML元素：
+
+
+
+
這一段使用font-050per，文字為元素字級的50%
+
+
這一段使用font-060per，文字為元素字級的60%
+
+
這一段使用font-070per，文字為元素字級的70%
+
+
這一段使用font-075per，文字為元素字級的75%
+
+
這一段使用font-080per，文字為元素字級的80%
+
+
這一段使用font-085per，文字為元素字級的85%
+
+
這一段使用font-090per，文字為元素字級的90%
+
+
這一段使用font-100per，文字為元素字級
+
+
這一段使用font-110per，文字為元素字級的110%
+
+
這一段使用font-115per，文字為元素字級的115%
+
+
這一段使用font-120per，文字為元素字級的120%
+
+
這一段使用font-130per，文字為元素字級的130%
+
+
這一段使用font-140per，文字為元素字級的140%
+
+
這一段使用font-150per，文字為元素字級的150%
+
+
這一段使用font-160per，文字為元素字級的160%
+
+
這一段使用font-170per，文字為元素字級的170%
+
+
這一段使用font-180per，文字為元素字級的180%
+
+
這一段使用font-190per，文字為元素字級的190%
+
+
這一段使用font-200per，文字為元素字級的200%
+
+
這一段使用font-250per，文字為元素字級的250%
+
+
這一段使用font-300per，文字為元素字級的300%
+
+
+
+
以預設字級字數指定，將以預設字級為基準變化，不受元素字級影響。
+
+
可使用以下CSS於HTML元素：
+
+
+
+
這一段使用font-0em50，文字為0.5預設字級大小
+
+
這一段使用font-0em60，文字為0.6預設字級大小
+
+
這一段使用font-0em70，文字為0.7預設字級大小
+
+
這一段使用font-0em75，文字為0.75預設字級大小
+
+
這一段使用font-0em80，文字為0.8預設字級大小
+
+
這一段使用font-0em85，文字為0.85預設字級大小
+
+
這一段使用font-0em90，文字為0.9預設字級大小
+
+
這一段使用font-1em，文字為預設字級大小
+
+
這一段使用font-1em10，文字為1.1預設字級大小
+
+
這一段使用font-1em15，文字為1.15預設字級大小
+
+
這一段使用font-1em20，文字為1.2預設字級大小
+
+
這一段使用font-1em30，文字為1.3預設字級大小
+
+
這一段使用font-1em40，文字為1.4預設字級大小
+
+
這一段使用font-1em50，文字為1.5預設字級大小
+
+
這一段使用font-1em60，文字為1.6預設字級大小
+
+
這一段使用font-1em70，文字為1.7預設字級大小
+
+
這一段使用font-1em80，文字為1.8預設字級大小
+
+
這一段使用font-1em90，文字為1.9預設字級大小
+
+
這一段使用font-2em，文字為2預設字級大小
+
+
這一段使用font-2em50，文字為2.5預設字級大小
+
+
這一段使用font-3em，文字為3預設字級大小
+
+
+
+
・粗、斜體字
+
+
。粗體字
+
+
可使用HTML的<b>與<strong>標籤標註粗體字，也可使用class="bold"。
+
+
在粗體字段落中，可使用class="font-weight-normal"來不加粗 。
+
+
+
。斜體字
+
+
可使用HTML的<i>標籤標註粗體字，也可使用class="italic"，但不建議套用在漢字上。
+
+
在斜體字段落中，可使用class="font-style-normal"轉正 。
+
+
・上下標字
+
+
內文中的上標字 （直排為偏右）可使用class="super"標註。
+
+
內文中的下標字 （直排為偏左）可使用class="sub"標註。
+
+
・直排中的橫排
+
+
直排中的數字與英文，符號，如167 ，請使用class="tcy"標註。
+
+
需注意，最大支援到四位數，且不得套用其他樣式，如希望A+在直排文字中佔一字寬橫排，同時+為上標字，則無法正常顯示，請將A+以缺字圖片的方式處理。
+
+
・文字轉向
+
+
直排中若希望英文與數字直立，請使用全型英文數字，如ＡＢＣ１２３。
+
+
若使用半型時，可套用class="upright-1"，效果如1 。
+
+
若直排文字與符號希望與橫排相同，卻轉90度時，請使用class="upright"強制調整，如「 。實務上使用到的機會不多。
+
+
若直排文字與符號應轉90度，卻未轉向時，請使用class="sideways"強制調整，如＝ 。實務上常應用在數學符號。
+
+
・文字色彩，背景色
+
+
範本中預設有八種灰階的文字色彩，以及五種基本色和背景色，以及文字黑白反轉。
+
+
請注意，色彩無法在電子紙閱讀器上呈現，且文字顏色太淡也可能難以讓讀者閱讀。
+
+
+
+
預設文字黑色class="color-black" ，
+
+
背景色為黑色class="bg-black" 。
+
+
文字第一階段灰色class="color-dimgray" ，
+
+
背景色第一階段灰色class="bg-dimgray" 。
+
+
文字第二階段灰色class="color-gray" ，
+
+
背景色第二階段灰色class="bg-gray" 。
+
+
文字第三階段灰色class="color-darkgray" ，
+
+
背景色第三階段灰色class="bg-darkgray" 。
+
+
文字第四階段灰色class="color-silver" ，
+
+
背景色第四階段灰色class="color-silver" 。
+
+
文字第五階段灰色class="color-gainsboro" ，
+
+
背景色第五階段灰色class="color-gainsboro" 。
+
+
文字白色class="color-white" ，
+
+
背景色為白色class="bg-white" 。
+
+
+
+
文字紅色class="color-red" ，
+
+
背景色為紅色class="bg-red" 。
+
+
文字藍色class="color-blue" ，
+
+
背景色為藍色class="bg-blue" 。
+
+
文字黃色class="color-cyan" ，
+
+
背景色為黃色class="bg-cyan" 。
+
+
文字桃紅色class="color-magenta" ，
+
+
背景色為桃紅色class="bg-magenta" 。
+
+
文字橘紅色class="color-orangered" ，
+
+
背景色為橘紅色class="bg-orangered" 。
+
+
文字為白色，背景為黑色class="inverse" ，
+
+
・刪除線
+
+
若要顯示刪除線 ，請使用class="line-through"
+
+
・底線
+
+
底線可以使用<u>元素或者class="em-line"來標註，橫排時為底線，直排時為左線。
+
+
若要使用別方向的線條，可使用class="em-line-outside"，橫排時為上方線條，直排時右方線條。
+
+
・分隔線
+
+
若要加入段落中的分隔線，請直接輸入<hr/>，橫排時為水平線，直排時為垂直線，預設邊界兩側各為0.5預設字級。
+
+
+
・連結
+
+
若要為書中內容加入超連結，或者內頁連結，請使用<a href="網址或者內頁連結">包覆連結文字，預設顯示如連結範例 。
+
+
・英文長單字與網址的斷行
+
+
若行內有網址、以及長單字時，可使用class="word-break-break-all"，來強制斷行，避免齊頭尾造成的問題
+
+
+
+
這裡有一個很長的連結http://aaaaaaaaaaaaaa.bbbbbbbbbbbbbbbbbb.cccccccccccccccccc.dddddddddddddd.com 。
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-007.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-007.xhtml"
new file mode 100644
index 0000000..656a546
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-007.xhtml"
@@ -0,0 +1,64 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
缺字圖片
+
+
漢字經常會遇到內建字體缺字的狀況，包括「古籍罕用字」、「日韓越南用漢字」、「台客語用字」等。這些字或許包含在系統內建字體中，但不一定所有的閱讀程式都會包括這些字，所以會建議使用圖片的方式處理。
+
+
請將該字製作成至少128像素平方的圖片，可存成底色透明的PNG，考量到多數閱讀程式有黑白反轉的「夜間模式」，為了避免無法閱讀，也可存為底色為白色的PNG。
+
+
當在將字嵌入內容中，請使用css語法class="gaiji"。如<img src="../image/gaiji.png" class="gaiji" alt="讀音"/>。顯示結果為
+
+
class="gaiji"是將圖片長寬各以元素內一字大小顯示，若遇到連續多字的狀況，直排可使用class="gaiji-line"指定為一字寬，橫排可使用class="gaiji-wide"指定為一字高。
+
+
外文嵌入字體
+
+
當遇到泰文、越南文、阿拉伯文等文字時，請嘗試使用嵌入字體的方式處理。
+
+
首先可使用Google提供的開放授權字體Noto ，下載對應語文的字體，置入item的font資料夾中，這裡以泰文為例：
+
+
・於OPF檔案中加入<manifest>宣告檔案
+
+
<item media-type="application/vnd.ms-opentype" href="font/notosthai.otf" id="_source.otf" />
+
+
・在font.css宣告字體名稱
+
+
@font-face {
+font-family: sourcethai;
+src: url('../font/notosthai.otf') format('OpenType');
+}
+
+
・同時對應到相對的語言
+
+
lang(th) {
+ font-family: sourcethai;
+}
+
+
・於book-style.css確認是否匯入font.css
+
+
@import "font.css";
+
+
・以語言標籤標注內容中的泰文字
+
+
這裡有一句泰文：<span lang="th">นายกรัฐมนตรี นำประชาชนทุกภาคส่วนปฏิบัติการจิตอาสา</span> </p>
+
+
實際看起來會像：
+
+
這裡有一句泰文：นายกรัฐมนตรี นำประชาชนทุกภาคส่วนปฏิบัติการจิตอาสา
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-008.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-008.xhtml"
new file mode 100644
index 0000000..95fe70d
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-008.xhtml"
@@ -0,0 +1,35 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
註釋處理
+
+
處理註釋時，依照目前電子書的特性，建議內容提供者將註釋以章末註的方式處理。
+
+
內頁註釋標記語法為：
+
+
<a epub:type="noteref" class="noteref" id="位置編號" href="#註解編號" rel="footnote" >1</a>
+
+
章末註釋的內容標記法為：
+
+
<div epub:type="footnote" class="footnote" id="註解編號">
+<p>注釋內容中的一個段落。</p>
+<a href="#位置編號">返回符號</a>
+<div>
+
+
+
閱讀程式可以利用以上標準語法做出不同的顯示方式，如跳出式註解。
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-009.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-009.xhtml"
new file mode 100644
index 0000000..3bccfad
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-009.xhtml"
@@ -0,0 +1,255 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
標題與內文段落的行排列處理
+
+
「標題字級以及標題字前後的空間」，以及「預設行距及對齊方式」請於book-style.css中進行調整設計。
+
+
以外，請參考以下語法對內容進行調整設計
+
+
・對齊方式
+
+
對齊方式原則上全部預設使用CSS text-align: justify，讓所有內容齊頭尾對齊，也就是遇到預設避頭尾點的狀況時，會自動加入字距讓每一行齊頭尾對齊。若在設計上有其他考量，可以針對個別元素進行以下調整。
+
+
+
+
使用class="align-start"來對齊行頭，行尾不會自動對齊。
+
+
使用class="align-center"來置中。
+
+
使用class="align-end"來對齊行尾，用於署名等。
+
+
・行距
+
+
預設行距為1.7，也就是內文段落行與行間的間隔為0.7個預設字級，而在標題上，則是指定標題文字字級的0.7倍。
+
+
行距可使用以下語法調整倍數。
+
+
+
+
使用class=""line-height-normal"
+
+
使用class=""line-height-1em"
+
+
使用class=""line-height-1em50"
+
+
使用class=""line-height-1em75"
+
+
使用class=""line-height-2em"
+
+
使用class=""line-height-2em50"
+
+
使用class=""line-height-3em"
+
+
使用class=""line-height-3em50"
+
+
使用class=""line-height-4em"
+
+
使用class=""line-height-4em50"
+
+
使用class=""line-height-5em"
+
+
・字距
+
+
預設不加入字距，也不建議在內文加入字距，僅推薦使用於標題等具設計的元素上。
+
+
+
+
使用class="lspacing-normal"，字距為預設值
+
+
使用class="lspacing-0em"，字距為0
+
+
使用class="lspacing-0em10"，字距為0.1字級
+
+
使用class="lspacing-0em20"，字距為0.2字級
+
+
使用class="lspacing-0em25"，字距為0.25字級
+
+
使用class="lspacing-0em30"，字距為0.3字級
+
+
使用class="lspacing-0em33"，字距為0.33字級
+
+
使用class="lspacing-0em40"，字距為0.4字級
+
+
使用class="lspacing-0em50"，字距為0.5字級
+
+
使用class="lspacing-0em60"，字距為0.6字級
+
+
使用class="lspacing-0em67"，字距為0.67字級
+
+
使用class="lspacing-0em70"，字距為0.7字級
+
+
使用class="lspacing-0em75"，字距為0.75字級
+
+
使用class="lspacing-0em80"，字距為0.8字級
+
+
使用class="lspacing-0em90"，字距為0.9字級
+
+
使用class="lspacing-1em"，字距為1字級
+
+
+
+
一字級以上字距請參考CSS內設定
+
+
・行頭縮排
+
+
預設為無縮排，可使用以下語法針對段落設定行頭縮排，或者使用U+3000全型空白於行頭亦可。
+
+
+
+
使用class="indent-0em"，
+
+
使用class="indent-1em"，
+
+
使用class="indent-2em"，
+
+
使用class="indent-3em"，
+
+
使用class="indent-4em"，
+
+
使用class="indent-5em"，
+
+
使用class="indent-6em"，
+
+
使用class="indent-7em"，
+
+
使用class="indent-8em"，
+
+
使用class="indent-9em"，
+
+
使用class="indent-10em"，
+
+
・行頭凸排
+
+
應用於對話、劇本等，需要凸排的狀況，可使用以下語法調整，應用於橫排與直排
+
+
+
+
使用class="h-indent-0em"，
+
+
使用class="h-indent-1em"，
+
+
使用class="h-indent-2em"，
+
+
使用class="h-indent-3em"，
+
+
使用class="h-indent-4em"，
+
+
使用class="h-indent-5em"，
+
+
使用class="h-indent-6em"，
+
+
使用class="h-indent-7em"，
+
+
使用class="h-indent-8em"，
+
+
使用class="h-indent-9em"，
+
+
使用class="h-indent-10em"，
+
+
・段落縮排
+
+
當段落於行頭處整段縮排時，可使用以下語法，適用於直排與橫排。
+
+
若是書中經常出現的樣式，如引言等，建議修改book-style.css中的blockquote樣式進行調整。
+
+
+
+
使用class="start-0em"，
+
+
使用class="start-0em25"，
+
+
使用class="start-0em50"，
+
+
使用class="start-0em75"，
+
+
使用class="start-1em"，
+
+
使用class="start-1em25"，
+
+
使用class="start-1em50"，
+
+
使用class="start-1em75"，
+
+
使用class="start-2em"，
+
+
使用class="start-2em50"，
+
+
使用class="start-3em"，
+
+
使用class="start-4em"，
+
+
使用class="start-5em"，
+
+
使用class="start-6em"，
+
+
使用class="start-7em"，
+
+
使用class="start-8em"，
+
+
使用class="start-9em"，
+
+
使用class="start-10em"，
+
+
・段落提排
+
+
當段落於行尾處整段提排時，可使用以下語法，適用於直排與橫排。
+
+
若是書中經常出現的樣式，如引言等，建議修改book-style.css中的blockquote樣式進行調整。
+
+
為展示顯示效果，以下段落也套用了使用class="align-end"對齊行尾。
+
+
+
+
使用class="end-0em"，
+
+
使用class="end-0em25"，
+
+
使用class="end-0em50"，
+
+
使用class="end-0em75"，
+
+
使用class="end-1em"，
+
+
使用class="end-1em25"，
+
+
使用class="end-1em50"，
+
+
使用class="end-1em75"，
+
+
使用class="end-2em"，
+
+
使用class="end-2em50"，
+
+
使用class="end-3em"，
+
+
使用class="end-4em"，
+
+
使用class="end-5em"，
+
+
使用class="end-6em"，
+
+
使用class="end-7em"，
+
+
使用class="end-8em"，
+
+
使用class="end-9em"，
+
+
使用class="end-10em"，
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-010.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-010.xhtml"
new file mode 100644
index 0000000..db8e4cd
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-010.xhtml"
@@ -0,0 +1,516 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
區塊元素的排列
+
+
・區塊（Box）種類
+
+
區塊的種類分為inline, inline-block, block三種，指定方式如下：
+
+
+
+
使用class="display-inline"指定為inline元素
+
+
+
+
+
+
使用class="display-inline-block"指定為inline-block元素
+
+
+
+
+
使用class="display-block"指定為block元素
+
+
+
・區塊的對齊方式
+
+
對齊區塊元素可使用以下語法，分為絕對方向與邏輯方向。
+
+
。邏輯方向
+
+
不因直橫排而有所改變。
+
+
+
+
使用class="block-align-start"對齊行頭
+
+
+
+
+
+
使用class="block-align-center"齊中
+
+
+
+
+
+
使用class="block-align-end"對齊行尾
+
+
+
+
。絕對方向
+
+
左右僅能應用於橫排，上下僅能應用於直排。
+
+
+
+
使用class="block-align-left"對齊左側
+
+
+
+
+
+
使用class="block-align-center"齊中
+
+
+
+
+
+
使用class="block-align-right"對齊右側
+
+
+
+
・Inline元素的對齊方式
+
+
Inline行內元素與前後文字對齊可按照基準線作出調整，如以下語法：
+
+
+
+
使用class="valign-baseline"對齊基線，如：
字
對齊。
+
+
使用class="valign-sub"對齊sub基線，如：
字
對齊。
+
+
使用class="valign-super"對齊super基線，如：
字
對齊。
+
+
使用class="valign-top"對齊top基線，如：
字
對齊。
+
+
使用class="valign-text-top"對齊文字上緣，如：
字
對齊。
+
+
使用class="valign-text-middle"對齊正中，如：
字
對齊。
+
+
使用class="valign-text-bottome"對齊bottom基線，如：
字
對齊。
+
+
使用class="valign-text-bottom"對齊文字下緣，如：
字
對齊。
+
+
・框線
+
+
若要為元素加上外框線，可使用以下四種語法直接套用到四邊。
+
+
+
+
實心線請使用class="k-solid"。
+
+
+
+
+
點線請使用class="k-dotted"。
+
+
+
+
+
雙重線請使用class="k-double"。
+
+
+
+
+
虛線請使用class="k-dashed"。
+
+
+
+
+
同時預設四種灰階的實心線
+
+
+
+
黑色實心線請使用class="k-solid-black"。
+
+
+
+
+
灰色實心線請使用class="k-solid-gray"。
+
+
+
+
+
銀色實心線請使用class="k-solid-silver"。
+
+
+
+
+
白色實心線請使用class="k-solid-white"。
+
+
+
+
+
其他預設框線語法如class="k-solid-top"，有四種線種：
+
+
+k-solid：實心線
+k-dotted：點線
+k-double：雙重線
+k-dashed：虛線
+
+
+
方向則有六種
+
+
+-top：上方
+-right：右側
+-bottom：下方
+-left：左側
+-topbottom：上下
+-rightleft：左右
+
+
+
線寬則可使用class="k-0px"
+
+
+k-0px：寬度為0
+k-1px：寬度為1
+中間不列舉
+k-8px：寬度為8
+k-thin：寬度為預設細
+k-medium：寬度為預設適中
+k-thick：寬度為預設粗
+
+
+
顏色灰階則可使用class="k-black"
+
+
+k-black：黑色
+k-dimgray：第一階灰
+k-gray：第二階灰
+k-darkgray：第三階灰
+k-silver：第四階灰
+k-gainsboro：第五階灰
+k-white：白色
+k-red：紅色
+k-blue：藍色
+k-cyan：黃色
+k-magenta：桃紅色
+k-orangered：橘紅色
+
+
+
・尺寸
+
+
針對區塊元素，可指定寬與高。可以對應在圖片以及文字元素上頭。
+
+
但請注意，若同時指定寬與高，可能會有文字無法完整顯示的狀況。
+
+
。高度
+
+
高度可以使用佔螢幕尺寸的百分比，以及以文字數指定兩種方式。
+
+
在橫排中使用高度百分比會有無法顯示的狀況發生，請多加注意
+
+
+
+
使用class="height-010per"指定區塊高度
+
+
+
使用class="height-020per"指定區塊高度
+
+
+
使用class="height-025per"指定區塊高度
+
+
+
使用class="height-030per"指定區塊高度
+
+
+
使用class="height-033per"指定區塊高度
+
+
+
使用class="height-040per"指定區塊高度
+
+
+
使用class="height-050per"指定區塊高度
+
+
+
使用class="height-060per"指定區塊高度
+
+
+
使用class="height-067per"指定區塊高度
+
+
+
使用class="height-070per"指定區塊高度
+
+
+
使用class="height-075per"指定區塊高度
+
+
+
使用class="height-080per"指定區塊高度
+
+
+
使用class="height-090per"指定區塊高度
+
+
+
使用class="height-100per"指定區塊高度
+
+
+
+
+
使用class="height-0em25"指定區塊高度為0.25個字級
+
+
+
使用class="height-0em50"指定區塊高度為0.5個字級
+
+
+
使用class="height-0em75"指定區塊高度為0.75個字級
+
+
+
使用class="height-1em"指定區塊高度為1個字級
+
+
+
使用class="height-1em25"指定區塊高度為1.25個字級
+
+
+
使用class="height-1em50"指定區塊高度為1.50個字級
+
+
+
使用class="height-1em75"指定區塊高度為1.75個字級
+
+
+
使用class="height-2em"指定區塊高度為2個字級
+
+
+
使用class="height-2em50"指定區塊高度為2.5個字級
+
+
+
使用class="height-3em"指定區塊高度為3個字級
+
+
+
使用class="height-4em"指定區塊高度為3個字級
+
+
+
使用class="height-5em"指定區塊高度為3個字級
+
+
+
使用class="height-5em25"指定區塊高度為5.25個字級
+
+
+
使用class="height-6em"指定區塊高度為3個字級
+
+
+
使用class="height-7em"指定區塊高度為3個字級
+
+
+
使用class="height-8em"指定區塊高度為3個字級
+
+
+
使用class="height-8em75"指定區塊高度為8.75個字級
+
+
+
使用class="height-9em"指定區塊高度為9個字級
+
+
+
使用class="height-10em"指定區塊高度為10個字級
+
+
+
使用class="height-11em"指定區塊高度為11個字級
+
+
+
使用class="height-12em"指定區塊高度為12個字級
+
+
+
使用class="height-13em"指定區塊高度為13個字級
+
+
+
使用class="height-14em"指定區塊高度為14個字級
+
+
+
使用class="height-15em"指定區塊高度為15個字級
+
+
+
使用class="height-20em"指定區塊高度為20個字級
+
+
+
使用class="height-30em"指定區塊高度為30個字級
+
+
+
使用class="height-40em"指定區塊高度為40個字級
+
+
+
。寬度
+
+
寬度可以使用佔螢幕尺寸的百分比，以及以文字數指定兩種方式。
+
+
數值與高度相同，不再重複列舉。
+
+
+
+
使用class="width-050per"指定區塊寬度
+
+
+
+
+
使用class="width-5em"指定區塊寬度為5個字級
+
+
+
+
+
另在高度與寬度，使用百分比指定時，可設定以字級為單位的最大值；使用文字數指定時，可設定以百分比的最大值。
+
+
也請注意，使用高度指定百分比可能不會正常運作。
+
+
+
+
使用class="max-height-030per"讓設定高度為20個字級的區塊，高度不超過螢幕的30%。
+
+
+
使用class="max-height-10em"讓設定高度為50%的區塊，高度不超過10個字級。
+
+
+
+
+
使用class="max-width-030per"讓設定寬度為20個字級的區塊，寬度不超過螢幕的30%。
+
+
+
使用class="max-width-10em"讓設定寬度為50%的區塊，寬度不超過15個字級。
+
+
+
+
+
也可同時指定最大尺寸的寬高，如：
+
+
+
+
使用class="max-size-030per"設定寬高不能超過螢幕的30%
+
+
+
使用class="max-size-10em"設定寬高不能超過10個字級
+
+
+
・邊界（margin)
+
+
對於圖片以及文字區塊，可以指定邊界所佔空間。
+
+
請注意，對於文字區塊，請不要同時指定縮排、凸排、提排在同樣的元素上，會產生優先順序問題。
+
+
這裡不一一列舉，請參考style-standard.css裡的數值。
+
+
+
+
使用class="m-0"讓邊界為0。
+
+
+
使用class="m-005per"讓邊界為螢幕寬高的5%。
+
+
+
使用class="m-010per"讓邊界為螢幕寬高的10%。
+
+
+
+
+
使用class="m-0em50"讓邊界為0.5字級。
+
+
+
使用class="m-1em50"讓邊界為1字級。
+
+
+
+
+
同樣可以指定絕對單一方向的邊界：
+
+
+
+
使用class="m-top-010per"讓上方邊界為螢幕高的10%。
+
+
+
使用class="m-bottom-010per"讓下方邊界為螢幕高的10%。
+
+
+
使用class="m-left-010per"讓左方邊界為螢幕寬的10%。
+
+
+
使用class="m-right-010per"讓右方邊界為螢幕寬的10%。
+
+
+
使用class="m-top-1em"讓上方邊界為1字級。
+
+
+
使用class="m-bottom-1em"讓下方邊界為1字級。
+
+
+
使用class="m-left-1em"讓左方邊界為1字級。
+
+
+
使用class="m-right-1em"讓右方邊界為1字級。
+
+
+
・內邊界（Padding）
+
+
對於圖片以及文字區塊，可以指定內邊界空間。
+
+
這裡不一一列舉，請參考style-standard.css裡的數值。
+
+
+
+
使用class="p-0"讓內邊界為0。
+
內容
+
+
使用class="p-005per"讓內邊界為螢幕寬高的5%。
+
內容
+
+
使用class="p-010per"讓內邊界為螢幕寬高的10%。
+
內容
+
+
+
+
使用class="p-0em50"讓內邊界為0.5字級。
+
內容
+
+
使用class="p-1em"讓內邊界為1字級。
+
內容
+
+
+
+
同樣可以指定絕對單一方向的內邊界：
+
+
+
+
使用class="p-top-010per"讓上方內邊界為螢幕高的10%。
+
內容
+
+
使用class="p-bottom-010per"讓下方內邊界為螢幕高的10%。
+
內容
+
+
使用class="p-left-010per"讓左方內邊界為螢幕寬的10%。
+
內容
+
+
使用class="p-right-010per"讓右方內邊界為螢幕寬的10%。
+
內容
+
+
使用class="p-top-1em"讓上方內邊界為1字級。
+
內容
+
+
使用class="p-bottom-1em"讓下方內邊界為1字級。
+
內容
+
+
使用class="p-left-1em"讓左方內邊界為1字級。
+
內容
+
+
使用class="p-right-1em"讓右方內邊界為1字級。
+
內容
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-011.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-011.xhtml"
new file mode 100644
index 0000000..c0141a9
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-011.xhtml"
@@ -0,0 +1,56 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
滿版圖片
+
+
流式書籍中的滿版圖片分為兩種：
+
+
+單頁的圖片頁：如書名頁、章名頁、章與章之間的插畫
+內文中的圖片頁：如整頁的圖片。
+
+
+
・單頁圖片頁
+
+
單頁圖片頁希望佔整頁空間，建議使用Fixed Layout的方式製作。
+
+
內頁請參考Fixed Layout使用SVG Wrapping的方式製作。
+
+
+
需要在OPF檔案的<manifest>中做properties="svg"宣告：
+
+
<manifest>
+<item media-type="application/xhtml+xml" id="p-fmatter-001" href="xhtml/p-fmatter-001.xhtml" properties="svg"/>
+</manifest>
+
+
也需要在<spine>中宣告Fixed Layout頁面：
+
+
<spine>
+<itemref linear="yes" idref="p-fmatter-001" properties="rendition:layout-pre-paginated rendition:spread-auto page-spread-left"/>
+</spine>
+
+
請注意，閱讀程式不一定會按照指定的左右頁正常呈現。
+
+
・內文圖片頁
+
+
內文圖片頁可使用預設的CSS class="fit"，語法如：
+
+
<p><img src="../image/img-001.jpg class="fit" alt="圖片說明"/></p>
+
+
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-012.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-012.xhtml"
new file mode 100644
index 0000000..dff5fb7
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-012.xhtml"
@@ -0,0 +1,36 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
換頁（實驗性功能）
+
+
一般內容中若需要切分到另一頁，最通用的做法是將內容切為兩個HTML檔案。
+
+
但在每一章的頁數少時，可以使用以下語法進行換頁指定。
+
+
不過因為page-break語法並非所有閱讀程式都支援，所以務必要另外進行測試。
+
+
+
使用class="pagebreak"語法時，會於套用的區塊後換頁。
+
+
若閱讀程式支援，這一句會出現在新頁面。
+
+
使用class="pagebreak-before"語法時，會於套用的區塊前換頁。若閱讀程式支援，這一句會出現在新頁面。
+
+
另可使用class="pagebreak-both"語法，讓元素前後都換頁。
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-013.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-013.xhtml"
new file mode 100644
index 0000000..b351b73
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-013.xhtml"
@@ -0,0 +1,41 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
文繞圖（實驗性功能）
+
+
圖置放於行頭方向，請使用class="float-start"或class="float-left"。
+
+
+
+
文繞圖的文字。
+
+
要取消行頭文繞圖，請使用class="float-clear-start“或者class="float-clear-left"。
+
+
+
圖置放於行尾方向，請使用class="float-end"或class="float-right"。
+
+
+
+
文繞圖的文字。
+
+
要取消行尾文繞圖，請使用class="float-clear-end"或者class="float-clear-right"。
+
+
+
當文繞圖多，會影響到其他元素，或疊合時，請使用class="float-clear"。
+
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-caution.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-caution.xhtml"
new file mode 100644
index 0000000..d6f4d94
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-caution.xhtml"
@@ -0,0 +1,21 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-colophon.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-colophon.xhtml"
new file mode 100644
index 0000000..5120f33
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-colophon.xhtml"
@@ -0,0 +1,29 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
版權頁
+
+
+
+
台灣EPUB 3製作指引
+
+
EPUB 3流式版面範本
+
+
2018年11月製作
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-cover.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-cover.xhtml"
new file mode 100644
index 0000000..dbb5cd2
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-cover.xhtml"
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-fmatter-001.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-fmatter-001.xhtml"
new file mode 100644
index 0000000..6a09b43
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-fmatter-001.xhtml"
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
sample
+
+
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-titlepage.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-titlepage.xhtml"
new file mode 100644
index 0000000..fb1cc6f
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-titlepage.xhtml"
@@ -0,0 +1,21 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
書名頁
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-toc.xhtml" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-toc.xhtml"
new file mode 100644
index 0000000..9896843
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/item/xhtml/p-toc.xhtml"
@@ -0,0 +1,69 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
diff --git "a/samples/EPUB reflow sample_\346\251\253\346\216\222/mimetype" "b/samples/EPUB reflow sample_\346\251\253\346\216\222/mimetype"
new file mode 100644
index 0000000..57ef03f
--- /dev/null
+++ "b/samples/EPUB reflow sample_\346\251\253\346\216\222/mimetype"
@@ -0,0 +1 @@
+application/epub+zip
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/META-INF/container.xml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/META-INF/container.xml"
new file mode 100644
index 0000000..ca40728
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/META-INF/container.xml"
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/font/notosthai.otf" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/font/notosthai.otf"
new file mode 100644
index 0000000..df19f34
Binary files /dev/null and "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/font/notosthai.otf" differ
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/image/cover.jpg" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/image/cover.jpg"
new file mode 100644
index 0000000..d0bf94e
Binary files /dev/null and "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/image/cover.jpg" differ
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/navigation-documents.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/navigation-documents.xhtml"
new file mode 100644
index 0000000..597f6dc
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/navigation-documents.xhtml"
@@ -0,0 +1,296 @@
+
+
+
+
+
+
目錄
+
+
+
+
+目錄
+
+封面 目錄 關於本文件
+ 目的 概要 需求層級 範本檔案
+對閱讀程式的需求
+文件檔案的基礎
+ 文字編碼 換行符號 原始碼中的空白、換行與註解處理
+包裝文件（Package Document/OPF檔案）
+ 遵守翻頁方向 遵守Spine元素指定規則 不使用已廢止的元素 處理Metadata等
+導覽文件（EPUB Navigation Document）
+ 處理導覽文件 顯示導覽文件
+基本樣式表
+ CSS值的限制與實作基準 使用預設樣式表集 不使用替代樣式表 盡量不使用-epub-Prefix的CSS屬性 使用@import規則 需支援嵌入字體 指定html元素 覆蓋RS的預設樣式表
+文字與字體
+ 需包含的文字數量 字體 直排時的文字方向 直排時的對齊
+圖片
+ 圖片的種類 造字圖片 指定圖片與Block元素的尺寸以及最大尺寸 與頁面進行方向寬度相等或者小於寬度 大於頁面進行方向時 縮小圖片，讓使用者操作放大
+封面圖片
+ 替代圖片 檔案名稱
+頁面邊界
+ Body元素的留白 內文顯示區域內的邊界
+其他HTML元素
+ 空白行所使用的<br/> 注音符號使用的<ruby> 頁面內連結（錨點連結） 註釋連結 nav與列表元素
+表格 數學等計算公式 其他CSS的解釋方法
+ 書名號與私名號 縱中橫排 不顯示
+標點符號 固定版面EPUB 其他
+Script
+RS需支援的HTML元素以及CSS屬性
+【HTML】
+根元素 文件的metadata 區塊元素 內容群組化 為文字加入意義 插入元素
+【CSS】
+値 選擇器 屬性選擇器 關聯組合 虛擬元素 色彩、背景 Margin Padding Border Font Text 寬與高 顯示 Paged Media CSS Text Level 3 CSS Writing Modes Module Level 3 CSS Fonts Level 3 CSS Text Decoration Level 3
+
+RS不需支援的HTML元素與CSS屬性
+【HTML】
+文件的Metadata Scripting 區塊元素 內容群組化 為文字加入意義 修正 插入內容 表格檔案 表單 互動元素
+【CSS】
+値 選擇器 @規則 色彩、背景 字體 文字 寬高 顯示 Paged Media 列表 文繞圖 位置 表格 挿入 Outline CSS 3.0 Speech CSS Text Level 3 CSS Writing Modes Module Level 3 CSS3 Multi Column CSS 2.0 EPUB 3
+
+
+出版社須提供的資料
+圖片與內容文件與推薦、限制尺寸及容量不同的對應方式 出版社特有頁面的範本與樣式表 體裁的簡化規則 常會出問題的要素
+基本製作方式
+使用最新版的EPUBCHECK，檔案不能有任何錯誤（Error） 基本的資料夾構成與檔案名 檔案規格 簡單的編碼規則
+範本：流式版型
+必要的設定檔案
+mimetype META-INF中的container.xml 導覽文件 OPF檔案
+XHTML文件檔案
+關於範本內的顏色標注 關於排版方向 封面頁 正文前（本例為插畫） 書名頁 電子版用的說明頁面 目錄頁 章名頁 內文頁面（直排） 內文頁面（橫排） 內文頁面（只有圖片） 指定頁面整體的對齊位置 版權頁 廣告頁
+【參考資訊】本文件不推薦的項目
+直排文字居中頁面
+
+範本：固定版面型
+必要的設定檔案
+mimetype META-INF中的container.xml 導覽文件 OPF檔案
+XHTML文件檔案
+關於範本內的顏色標注 封面頁 內文頁 內文ImageMap（Clickable Map）頁面
+
+樣式一覽
+CSS檔案的使用規則
+支援@import讀入CSS 原則上不調整預設CSS 修改、新增請自行負責 避免id重複 製作或追加固定Class 固定Class的種類
+Ａ・不分直橫排，內容不需要修改的項目 Ｂ・隨直橫排而需要調整語法的項目 參考資料（本文件不推薦使用） Ｃ・直排與橫排混排時的對應方法
+
+客製化 製作自有的CSS
+
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/standard.opf" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/standard.opf"
new file mode 100644
index 0000000..350f4f8
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/standard.opf"
@@ -0,0 +1,159 @@
+
+
+
+
+
+
+台灣EPUB 3製作指引
+
+
+台灣數位出版聯盟
+作者名２
+台灣數位出版聯盟
+
+
+zh-TW
+
+
+urn:uuid:d7a8d311-7cd0-40df-9443-65847561dacf
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/book-style.css" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/book-style.css"
new file mode 100644
index 0000000..cfdb625
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/book-style.css"
@@ -0,0 +1,350 @@
+@charset "UTF-8";
+@import "style-reset.css";
+@import "style-standard.css";
+@import "style-advance.css";
+@import "font.css";
+
+/* -------------------------------------------------------------
+當使用Windows確認時，請加上下面的CSS。
+確認完畢後請務必刪除或者放入註解中
+@import "style-check.css";
+---------------------------------------------------------------- */
+
+
+
+/* 檔案資訊
+----------------------------------------------------------------
+【内容】
+一併讀入外部CSS，並且提供該書的專有設定
+
+【CSS檔案版本】
+ver. 1
+
+【細節】
+・讀入外部CSS
+・該書專有客製化區塊
+
+【更新紀錄】
+2016/10/13 ver.1.0b
+・初版
+---------------------------------------------------------------- */
+
+
+/* -------------------------------------------------------------
+ * 該書專有客製化區塊
+ * ------------------------------------------------------------- */
+
+
+/* 標題字體
+---------------------------------------------------------------- */
+/* 横排用 */
+.hltr h1,
+.hltr h2,
+.hltr h3,
+.hltr h4,
+.hltr h5,
+.hltr h6 {
+ font-family: serif-tw, serif;
+}
+/* 直排用 */
+.vrtl h1,
+.vrtl h2,
+.vrtl h3,
+.vrtl h4,
+.vrtl h5,
+.vrtl h6 {
+ font-family: serif-tw-v,serif-tw, serif;
+}
+
+/* 標題預設樣式
+---------------------------------------------------------------- */
+
+/* 直排用 */
+.vrtl h1 {
+ font-size: 1.6rem;
+ margin: 0 1rem;
+}
+.vrtl h2 {
+ font-size: 1.4rem;
+ margin: 0 1.1rem;
+}
+.vrtl h3 {
+ font-size: 1.2rem;
+ margin: 0 1.2rem;
+}
+.vrtl h4 {
+ font-size: 1rem;
+ margin: 0 1.3rem;
+}
+.vrtl h5 {
+ font-size: 1rem;
+ margin: 0 0.4rem;
+}
+.vrtl h6 {
+ font-size: 1rem;
+ margin: 0 0.4rem;
+}
+
+/* 橫排用 */
+.hltr h1 {
+ font-size: 1.6rem;
+ margin: 1rem 0;
+}
+.hltr h2 {
+ font-size: 1.4rem;
+ margin: 1.1rem 0;
+}
+.hltr h3 {
+ font-size: 1.2rem;
+ margin: 1.2rem 0;
+}
+.hltr h4 {
+ font-size: 1rem;
+ margin: 1.3rem 0;
+}
+.hltr h5 {
+ font-size: 1rem;
+ margin: 0.4rem 0;
+}
+.hltr h6 {
+ font-size: 1rem;
+ margin: 0.4rem 0;
+}
+
+/* 引言預設預設樣式
+---------------------------------------------------------------- */
+
+/* 直排用 */
+.vrtl blockquote {
+ margin: 2rem 1.8rem 0;
+}
+
+/* 橫排用 */
+.hltr blockquote {
+ margin: 1.8rem 0rem 1.8rem 2rem;
+}
+
+/* 段落預設行距與對齊方式
+---------------------------------------------------------------- */
+
+p {
+ line-height: 1.7;
+ text-align: justify;
+ font-family: serif-tw, serif;
+}
+
+code {
+ background-color: #f0f0f0;
+}
+
+pre {
+ background-color: #f0f0f0;
+ margin: 1.7rem 2rem;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+td,th {
+ border: 1px solid black;
+ margin: 0;
+ padding: 0.5rem;
+}
+
+tr {
+ margin: 0;padding: 0;
+}
+
+/* 連結
+---------------------------------------------------------------- */
+/* 基本設定（上：横排 下：直排） */
+.hltr a {
+}
+.vrtl a {
+}
+/* 未開啟連結 */
+a:link {
+}
+/* 已開啟連結 */
+a:visited {
+}
+/* 滑鼠移到其上時 */
+a:hover {
+}
+/* 選擇時 */
+a:focus {
+}
+/* 啟動時 */
+a:active {
+}
+
+
+/* 特殊連結
+---------------------------------------------------------------- */
+/* 基本設定（上：横排 下：直排） */
+
+/* .link-01
+-------------------- */
+.hltr a.link-01 {
+}
+.vrtl a.link-01 {
+}
+/* 未開啟連結 */
+a.link-01:link {
+}
+/* 已開啟連結 */
+a.link-01:visited {
+}
+/* 滑鼠移到其上時 */
+a.link-01:hover {
+}
+/* 選擇時 */
+a.link-01:focus {
+}
+/* 啟動時 */
+a.link-01:active {
+}
+
+/* .link-02
+-------------------- */
+.hltr a.link-02 {
+}
+.vrtl a.link-02 {
+}
+/* 未開啟連結 */
+a.link-02:link {
+}
+/* 已開啟連結 */
+a.link-02:visited {
+}
+/* 滑鼠移到其上時 */
+a.link-02:hover {
+}
+/* 選擇時 */
+a.link-02:focus {
+}
+/* 啟動時 */
+a.link-02:active {
+}
+
+/* .link-03
+-------------------- */
+.hltr a.link-03 {
+}
+.vrtl a.link-03 {
+}
+/* 未開啟連結 */
+a.link-03:link {
+}
+/* 已開啟連結 */
+a.link-03:visited {
+}
+/* 滑鼠移到其上時 */
+a.link-03:hover {
+}
+/* 選擇時 */
+a.link-03:focus {
+}
+/* 啟動時 */
+a.link-03:active {
+}
+
+
+/* 注釋連結的底線與色彩（內文註解方）
+---------------------------------------------------------------- */
+/* 基本設定（上：横排 下：直排） */
+.hltr a.noteref {
+}
+.vrtl a.noteref {
+}
+/* 未開啟連結 */
+a.noteref:link {
+}
+/* 已開啟連結 */
+a.noteref:visited {
+}
+/* 滑鼠移到其上時 */
+a.noteref:hover {
+}
+/* 選擇時 */
+a.noteref:focus {
+}
+/* 啟動時 */
+a.noteref:active {
+}
+
+
+/* 注釋連結的底線與色彩（註解內容方）
+---------------------------------------------------------------- */
+/* 基本設定（上：横排 下：直排） */
+.hltr a.note {
+}
+.vrtl a.note {
+}
+/* 未開啟連結 */
+a.note:link {
+}
+/* 已開啟連結 */
+a.note:visited {
+}
+/* 滑鼠移到其上時 */
+a.note:hover {
+}
+/* 選擇時 */
+a.note:focus {
+}
+/* 啟動時 */
+a.note:active {
+}
+
+
+/* 文字頁面
+---------------------------------------------------------------- */
+body.p-text {
+}
+body.p-text .main {
+}
+
+
+/* 書名頁
+---------------------------------------------------------------- */
+body.p-titlepage {
+}
+body.p-titlepage .main {
+}
+
+
+/* 版權頁
+---------------------------------------------------------------- */
+body.p-colophon {
+}
+body.p-colophon .main {
+}
+
+
+/* 目錄頁
+---------------------------------------------------------------- */
+body.p-toc {
+}
+body.p-toc .main {
+}
+
+
+/* 電子書說明頁
+---------------------------------------------------------------- */
+body.p-caution {
+}
+body.p-caution .main {
+}
+
+
+/* 廣告頁
+---------------------------------------------------------------- */
+body.p-ad {
+}
+body.p-ad .main {
+}
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/font.css" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/font.css"
new file mode 100644
index 0000000..0b9a1d6
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/font.css"
@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+
+/* 檔案資訊
+----------------------------------------------------------------
+【内容】
+嵌入字體用樣式表
+
+【CSS檔案版本】
+ver.1
+
+【細節】
+・設定嵌入字體
+
+【更新紀錄】
+2018/11/22 ver.1.0
+・初版
+---------------------------------------------------------------- */
+
+
+/* -------------------------------------------------------------
+ * 指定嵌入用字體名稱與指定字體檔案
+ * ------------------------------------------------------------- */
+
+
+@font-face {
+ font-family: sourcethai;
+ src: url('../font/notosthai.otf') format('OpenType');
+}
+
+/* -------------------------------------------------------------
+ * 將特定語言標籤對應到嵌入字體名稱
+ * ------------------------------------------------------------- */
+
+:lang(th) {
+ font-family: sourcethai;
+}
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-advance.css" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-advance.css"
new file mode 100644
index 0000000..aac0656
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-advance.css"
@@ -0,0 +1,1536 @@
+@charset "UTF-8";
+
+
+/* 檔案資訊
+----------------------------------------------------------------
+【内容】
+全書共通的基本樣式（邏輯方向指定・子元素排版方向改變時的對應用）
+
+【CSS檔案版本】
+ver.1
+
+【細節】
+・【子元素排版方向改變時的對應】指定連結
+・【子元素排版方向改變時的對應】缺字圖片
+・【子元素排版方向改變時的對應】指定圖片為滿版
+・【子元素排版方向改變時的對應】分隔線
+・【子元素排版方向改變時的對應】傍線
+・【邏輯方向指定】框線
+・【子元素排版方向改變時的對應】凸排
+・【子元素排版方向改變時的對應】段落縮排、提排
+・【邏輯方向指定】外圍邊界（Margin）
+・【邏輯方向指定】內圍留白（Padding）
+・【邏輯方向指定】行長方向的尺寸
+・【邏輯方向指定】行長方向的最大尺寸
+・【邏輯方向指定】行寬方向的尺寸
+・【邏輯方向指定】行寬方向的最大尺寸
+
+【更新紀錄】
+2016/10/13 ver.1.0b
+・初版
+---------------------------------------------------------------- */
+
+
+/* 【子元素排版方向改變時的對應】指定連結
+---------------------------------------------------------------- */
+/* 橫排：底線 直排：左線 */
+.vrtl .hltr a {
+ text-decoration: underline;
+}
+.hltr .vrtl a {
+ text-decoration: underline;
+}
+
+
+/* 【子元素排版方向改變時的對應】缺字圖片
+---------------------------------------------------------------- */
+/* 缺字圖片的基準線 */
+.vrtl .hltr img.gaiji,
+.vrtl .hltr img.gaiji-line,
+.vrtl .hltr img.gaiji-wide {
+ vertical-align: text-bottom;
+}
+.hltr .vrtl img.gaiji,
+.hltr .vrtl img.gaiji-line,
+.hltr .vrtl img.gaiji-wide {
+ vertical-align: baseline;
+}
+
+
+/* 【子元素排版方向改變時的對應】指定圖片為滿版
+---------------------------------------------------------------- */
+/* 圖片的基準線 */
+.vrtl .hltr .fit {
+ vertical-align: top;
+}
+.hltr .vrtl .fit {
+ vertical-align: baseline;
+}
+
+
+/* 【子元素排版方向改變時的對應】分隔線
+---------------------------------------------------------------- */
+/* 【橫排】水平線 */
+.vrtl .hltr hr {
+ margin: 0.5em 0;
+ border-style: solid none none none;
+}
+/* 【直排】垂直線 */
+.hltr .vrtl hr {
+ margin: 0 0.5em;
+ border-style: none solid none none;
+}
+
+
+/* 【子元素排版方向改變時的對應】傍線
+---------------------------------------------------------------- */
+/* 【橫排】底線 【直排】右線 */
+.vrtl .hltr .em-line {
+ text-decoration: underline;
+}
+.hltr .vrtl .em-line {
+ text-decoration: overline;
+}
+/* 【橫排】上線 【直排】左線 */
+.vrtl .hltr .em-line-outside {
+ text-decoration: overline;
+}
+.hltr .vrtl .em-line-outside {
+ text-decoration: underline;
+}
+
+
+/* 【邏輯方向指定】框線
+---------------------------------------------------------------- */
+/* 線種【實線】 */
+.k-solid-start,
+.k-solid-before,
+.k-solid-end,
+.k-solid-after,
+.k-solid-startend,
+.k-solid-beforeafter {
+ border-width: 1px;
+ border-color: #000000;
+}
+/* 線位置【實線】 */
+/* 橫排用 */
+.hltr .k-solid-start, .vrtl .hltr .k-solid-start { border-style: none none none solid; }
+.hltr .k-solid-before, .vrtl .hltr .k-solid-before { border-style: solid none none none; }
+.hltr .k-solid-end, .vrtl .hltr .k-solid-end { border-style: none solid none none; }
+.hltr .k-solid-after, .vrtl .hltr .k-solid-after { border-style: none none solid none; }
+.hltr .k-solid-startend, .vrtl .hltr .k-solid-startend { border-style: none solid none solid; }
+.hltr .k-solid-beforeafter, .vrtl .hltr .k-solid-beforeafter { border-style: solid none solid none; }
+/* 直排用 */
+.vrtl .k-solid-start, .hltr .vrtl .k-solid-start { border-style: solid none none none; }
+.vrtl .k-solid-before, .hltr .vrtl .k-solid-before { border-style: none solid none none; }
+.vrtl .k-solid-end, .hltr .vrtl .k-solid-end { border-style: none none solid none; }
+.vrtl .k-solid-after, .hltr .vrtl .k-solid-after { border-style: none none none solid; }
+.vrtl .k-solid-startend, .hltr .vrtl .k-solid-startend { border-style: solid none solid none; }
+.vrtl .k-solid-beforeafter, .hltr .vrtl .k-solid-beforeafter { border-style: none solid none solid; }
+
+/* 線種【點線】 */
+.k-dotted-start,
+.k-dotted-before,
+.k-dotted-end,
+.k-dotted-after,
+.k-dotted-startend,
+.k-dotted-beforeafter {
+ border-width: 2px;
+ border-color: #000000;
+}
+/* 線位置【點線】 */
+/* 橫排用 */
+.hltr .k-dotted-start, .vrtl .hltr .k-dotted-start { border-style: none none none dotted; }
+.hltr .k-dotted-before, .vrtl .hltr .k-dotted-before { border-style: dotted none none none; }
+.hltr .k-dotted-end, .vrtl .hltr .k-dotted-end { border-style: none dotted none none; }
+.hltr .k-dotted-after, .vrtl .hltr .k-dotted-after { border-style: none none dotted none; }
+.hltr .k-dotted-startend, .vrtl .hltr .k-dotted-startend { border-style: none dotted none dotted; }
+.hltr .k-dotted-beforeafter, .vrtl .hltr .k-dotted-beforeafter { border-style: dotted none dotted none; }
+/* 直排用 */
+.vrtl .k-dotted-start, .hltr .vrtl .k-dotted-start { border-style: dotted none none none; }
+.vrtl .k-dotted-before, .hltr .vrtl .k-dotted-before { border-style: none dotted none none; }
+.vrtl .k-dotted-end, .hltr .vrtl .k-dotted-end { border-style: none none dotted none; }
+.vrtl .k-dotted-after, .hltr .vrtl .k-dotted-after { border-style: none none none dotted; }
+.vrtl .k-dotted-startend, .hltr .vrtl .k-dotted-startend { border-style: dotted none dotted none; }
+.vrtl .k-dotted-beforeafter, .hltr .vrtl .k-dotted-beforeafter { border-style: none dotted none dotted; }
+
+/* 線種【雙重線】 */
+.k-double-start,
+.k-double-before,
+.k-double-end,
+.k-double-after,
+.k-double-startend,
+.k-double-beforeafter {
+ border-width: 4px;
+ border-color: #000000;
+}
+/* 線位置【雙重線】*/
+/* 橫排用 */
+.hltr .k-double-start, .vrtl .hltr .k-double-start { border-style: none none none double; }
+.hltr .k-double-before, .vrtl .hltr .k-double-before { border-style: double none none none; }
+.hltr .k-double-end, .vrtl .hltr .k-double-end { border-style: none double none none; }
+.hltr .k-double-after, .vrtl .hltr .k-double-after { border-style: none none double none; }
+.hltr .k-double-startend, .vrtl .hltr .k-double-startend { border-style: none double none double; }
+.hltr .k-double-beforeafter, .vrtl .hltr .k-double-beforeafter { border-style: double none double none; }
+/* 直排用 */
+.vrtl .k-double-start, .hltr .vrtl .k-double-start { border-style: double none none none; }
+.vrtl .k-double-before, .hltr .vrtl .k-double-before { border-style: none double none none; }
+.vrtl .k-double-end, .hltr .vrtl .k-double-end { border-style: none none double none; }
+.vrtl .k-double-after, .hltr .vrtl .k-double-after { border-style: none none none double; }
+.vrtl .k-double-startend, .hltr .vrtl .k-double-startend { border-style: double none double none; }
+.vrtl .k-double-beforeafter, .hltr .vrtl .k-double-beforeafter { border-style: none double none double; }
+
+/* 線種【虛線】 */
+.k-dashed-start,
+.k-dashed-before,
+.k-dashed-end,
+.k-dashed-after,
+.k-dashed-startend,
+.k-dashed-beforeafter {
+ border-width: 1px;
+ border-color: #000000;
+}
+/* 線位置【虛線】 */
+/* 橫排用 */
+.hltr .k-dashed-start, .vrtl .hltr .k-dashed-start { border-style: none none none dashed; }
+.hltr .k-dashed-before, .vrtl .hltr .k-dashed-before { border-style: dashed none none none; }
+.hltr .k-dashed-end, .vrtl .hltr .k-dashed-end { border-style: none dashed none none; }
+.hltr .k-dashed-after, .vrtl .hltr .k-dashed-after { border-style: none none dashed none; }
+.hltr .k-dashed-startend, .vrtl .hltr .k-dashed-startend { border-style: none dashed none dashed; }
+.hltr .k-dashed-beforeafter, .vrtl .hltr .k-dashed-beforeafter { border-style: dashed none dashed none; }
+/* 直排用 */
+.vrtl .k-dashed-start, .hltr .vrtl .k-dashed-start { border-style: dashed none none none; }
+.vrtl .k-dashed-before, .hltr .vrtl .k-dashed-before { border-style: none dashed none none; }
+.vrtl .k-dashed-end, .hltr .vrtl .k-dashed-end { border-style: none none dashed none; }
+.vrtl .k-dashed-after, .hltr .vrtl .k-dashed-after { border-style: none none none dashed; }
+.vrtl .k-dashed-startend, .hltr .vrtl .k-dashed-startend { border-style: dashed none dashed none; }
+.vrtl .k-dashed-beforeafter, .hltr .vrtl .k-dashed-beforeafter { border-style: none dashed none dashed; }
+
+/* 線寬 */
+.k-0px { border-width: 0; }
+.k-1px { border-width: 1px; }
+.k-2px { border-width: 2px; }
+.k-3px { border-width: 3px; }
+.k-4px { border-width: 4px; }
+.k-5px { border-width: 5px; }
+.k-6px { border-width: 6px; }
+.k-7px { border-width: 7px; }
+.k-8px { border-width: 8px; }
+.k-thin { border-width: thin; }
+.k-medium { border-width: medium; }
+.k-thick { border-width: thick; }
+
+/* 線色 */
+.k-black { border-color: #000000; }
+.k-dimgray { border-color: #696969; }
+.k-gray { border-color: #808080; }
+.k-darkgray { border-color: #a9a9a9; }
+.k-silver { border-color: #c0c0c0; }
+.k-gainsboro { border-color: #dcdcdc; }
+.k-white { border-color: #ffffff; }
+
+/* 基本色 */
+.k-red { border-color: #ff0000; }
+.k-blue { border-color: #0000ff; }
+.k-cyan { border-color: #00ffff; }
+.k-magenta { border-color: #ff00ff; }
+.k-orangered { border-color: #ff4500; }
+
+
+/* 【子元素排版方向改變時的對應】凸排
+---------------------------------------------------------------- */
+/* .hltr .vrtl [class|="h-indent"] { padding-left: 0; } */
+.hltr .vrtl .h-indent-1em, .hltr .vrtl .h-indent-2em, .hltr .vrtl .h-indent-3em,
+.hltr .vrtl .h-indent-4em, .hltr .vrtl .h-indent-5em, .hltr .vrtl .h-indent-6em,
+.hltr .vrtl .h-indent-7em, .hltr .vrtl .h-indent-8em, .hltr .vrtl .h-indent-9em,
+.hltr .vrtl .h-indent-10em {
+ padding-left: 0;
+}
+
+/* .vrtl .hltr [class|="h-indent"] { padding-top: 0; } */
+.vrtl .hltr .h-indent-1em, .vrtl .hltr .h-indent-2em, .vrtl .hltr .h-indent-3em,
+.vrtl .hltr .h-indent-4em, .vrtl .hltr .h-indent-5em, .vrtl .hltr .h-indent-6em,
+.vrtl .hltr .h-indent-7em, .vrtl .hltr .h-indent-8em, .vrtl .hltr .h-indent-9em,
+.vrtl .hltr .h-indent-10em {
+ padding-top: 0;
+}
+
+
+/* 【子元素排版方向改變時的對應】段落縮排、提排
+---------------------------------------------------------------- */
+/* 縮排 */
+/* .hltr .vrtl [class|="start"] { margin-left: 0; } */
+.hltr .vrtl .start-0em25, .hltr .vrtl .start-0em50, .hltr .vrtl .start-0em75,
+.hltr .vrtl .start-1em, .hltr .vrtl .start-1em25, .hltr .vrtl .start-1em50,
+.hltr .vrtl .start-1em75, .hltr .vrtl .start-2em, .hltr .vrtl .start-2em50,
+.hltr .vrtl .start-3em, .hltr .vrtl .start-4em, .hltr .vrtl .start-5em,
+.hltr .vrtl .start-6em, .hltr .vrtl .start-7em, .hltr .vrtl .start-8em,
+.hltr .vrtl .start-9em, .hltr .vrtl .start-10em {
+ margin-left: 0;
+}
+/* .vrtl .hltr [class|="start"] { margin-top: 0; } */
+.vrtl .hltr .start-0em25, .vrtl .hltr .start-0em50, .vrtl .hltr .start-0em75,
+.vrtl .hltr .start-1em, .vrtl .hltr .start-1em25, .vrtl .hltr .start-1em50,
+.vrtl .hltr .start-1em75, .vrtl .hltr .start-2em, .vrtl .hltr .start-2em50,
+.vrtl .hltr .start-3em, .vrtl .hltr .start-4em, .vrtl .hltr .start-5em,
+.vrtl .hltr .start-6em, .vrtl .hltr .start-7em, .vrtl .hltr .start-8em,
+.vrtl .hltr .start-9em, .vrtl .hltr .start-10em {
+ margin-top: 0;
+}
+
+/* 凸排 */
+/* .hltr .vrtl [class|="end"] { margin-right: 0; } */
+.hltr .vrtl .end-0em25, .hltr .vrtl .end-0em50, .hltr .vrtl .end-0em75,
+.hltr .vrtl .end-1em, .hltr .vrtl .end-1em25, .hltr .vrtl .end-1em50,
+.hltr .vrtl .end-1em75, .hltr .vrtl .end-2em, .hltr .vrtl .end-2em50,
+.hltr .vrtl .end-3em, .hltr .vrtl .end-4em, .hltr .vrtl .end-5em,
+.hltr .vrtl .end-6em, .hltr .vrtl .end-7em, .hltr .vrtl .end-8em,
+.hltr .vrtl .end-9em, .hltr .vrtl .end-10em {
+ margin-right: 0;
+}
+/* .vrtl .hltr [class|="end"] { margin-bottom: 0; } */
+.vrtl .hltr .end-0em25, .vrtl .hltr .end-0em50, .vrtl .hltr .end-0em75,
+.vrtl .hltr .end-1em, .vrtl .hltr .end-1em25, .vrtl .hltr .end-1em50,
+.vrtl .hltr .end-1em75, .vrtl .hltr .end-2em, .vrtl .hltr .end-2em50,
+.vrtl .hltr .end-3em, .vrtl .hltr .end-4em, .vrtl .hltr .end-5em,
+.vrtl .hltr .end-6em, .vrtl .hltr .end-7em, .vrtl .hltr .end-8em,
+.vrtl .hltr .end-9em, .vrtl .hltr .end-10em {
+ margin-bottom: 0;
+}
+
+
+/* 【邏輯方向指定】外圍邊界（Margin）
+---------------------------------------------------------------- */
+/* 行頭邊界：橫排用 */
+.hltr .m-start-auto { margin-left: auto; }
+.hltr .m-start-0,
+.hltr .m-start-0em,
+.hltr .m-start-000per { margin-left: 0; }
+
+/* 以％指定 */
+.hltr .m-start-005per { margin-left: 5%; }
+.hltr .m-start-010per { margin-left: 10%; }
+.hltr .m-start-015per { margin-left: 15%; }
+.hltr .m-start-020per { margin-left: 20%; }
+.hltr .m-start-025per { margin-left: 25%; }
+.hltr .m-start-030per { margin-left: 30%; }
+.hltr .m-start-033per { margin-left: 33%; }
+.hltr .m-start-040per { margin-left: 40%; }
+.hltr .m-start-050per { margin-left: 50%; }
+.hltr .m-start-060per { margin-left: 60%; }
+.hltr .m-start-067per { margin-left: 67%; }
+.hltr .m-start-070per { margin-left: 70%; }
+.hltr .m-start-075per { margin-left: 75%; }
+.hltr .m-start-080per { margin-left: 80%; }
+.hltr .m-start-090per { margin-left: 90%; }
+
+/* 以文字數指定 */
+.hltr .m-start-0em25 { margin-left: 0.25em; }
+.hltr .m-start-0em50 { margin-left: 0.50em; }
+.hltr .m-start-0em75 { margin-left: 0.75em; }
+.hltr .m-start-1em { margin-left: 1.00em; }
+.hltr .m-start-1em25 { margin-left: 1.25em; }
+.hltr .m-start-1em50 { margin-left: 1.50em; }
+.hltr .m-start-1em75 { margin-left: 1.75em; }
+.hltr .m-start-2em { margin-left: 2.00em; }
+.hltr .m-start-2em50 { margin-left: 2.50em; }
+.hltr .m-start-3em { margin-left: 3.00em; }
+.hltr .m-start-4em { margin-left: 4.00em; }
+.hltr .m-start-5em { margin-left: 5.00em; }
+.hltr .m-start-5em25 { margin-left: 5.25em; }
+
+/* 行頭邊界：直排用 */
+.vrtl .m-start-auto { margin-top: auto; }
+.vrtl .m-start-0,
+.vrtl .m-start-0em,
+.vrtl .m-start-000per { margin-top: 0; }
+
+/* 以％指定 */
+.vrtl .m-start-005per { margin-top: 5%; }
+.vrtl .m-start-010per { margin-top: 10%; }
+.vrtl .m-start-015per { margin-top: 15%; }
+.vrtl .m-start-020per { margin-top: 20%; }
+.vrtl .m-start-025per { margin-top: 25%; }
+.vrtl .m-start-030per { margin-top: 30%; }
+.vrtl .m-start-033per { margin-top: 33%; }
+.vrtl .m-start-040per { margin-top: 40%; }
+.vrtl .m-start-050per { margin-top: 50%; }
+.vrtl .m-start-060per { margin-top: 60%; }
+.vrtl .m-start-067per { margin-top: 67%; }
+.vrtl .m-start-070per { margin-top: 70%; }
+.vrtl .m-start-075per { margin-top: 75%; }
+.vrtl .m-start-080per { margin-top: 80%; }
+.vrtl .m-start-090per { margin-top: 90%; }
+
+/* 以文字數指定 */
+.vrtl .m-start-0em25 { margin-top: 0.25em; }
+.vrtl .m-start-0em50 { margin-top: 0.50em; }
+.vrtl .m-start-0em75 { margin-top: 0.75em; }
+.vrtl .m-start-1em { margin-top: 1.00em; }
+.vrtl .m-start-1em25 { margin-top: 1.25em; }
+.vrtl .m-start-1em50 { margin-top: 1.50em; }
+.vrtl .m-start-1em75 { margin-top: 1.75em; }
+.vrtl .m-start-2em { margin-top: 2.00em; }
+.vrtl .m-start-2em50 { margin-top: 2.50em; }
+.vrtl .m-start-3em { margin-top: 3.00em; }
+.vrtl .m-start-4em { margin-top: 4.00em; }
+.vrtl .m-start-5em { margin-top: 5.00em; }
+.vrtl .m-start-5em25 { margin-top: 5.25em; }
+
+/* 子元素排版方向改變時的對應 */
+/* .hltr .vrtl [class|="m-start"] { margin-left: 0; } */
+.hltr .vrtl .m-start-auto,
+.hltr .vrtl .m-start-005per, .hltr .vrtl .m-start-010per, .hltr .vrtl .m-start-015per,
+.hltr .vrtl .m-start-020per, .hltr .vrtl .m-start-025per, .hltr .vrtl .m-start-030per,
+.hltr .vrtl .m-start-033per, .hltr .vrtl .m-start-040per, .hltr .vrtl .m-start-050per,
+.hltr .vrtl .m-start-060per, .hltr .vrtl .m-start-067per, .hltr .vrtl .m-start-070per,
+.hltr .vrtl .m-start-075per, .hltr .vrtl .m-start-080per, .hltr .vrtl .m-start-090per,
+.hltr .vrtl .m-start-0em25, .hltr .vrtl .m-start-0em50, .hltr .vrtl .m-start-0em75,
+.hltr .vrtl .m-start-1em, .hltr .vrtl .m-start-1em25, .hltr .vrtl .m-start-1em50,
+.hltr .vrtl .m-start-1em75, .hltr .vrtl .m-start-2em, .hltr .vrtl .m-start-2em50,
+.hltr .vrtl .m-start-3em, .hltr .vrtl .m-start-4em, .hltr .vrtl .m-start-5em,
+.hltr .vrtl .m-start-5em25 {
+ margin-left: 0;
+}
+/* .vrtl .hltr [class|="m-start"] { margin-top: 0; } */
+.vrtl .hltr .m-start-auto,
+.vrtl .hltr .m-start-005per, .vrtl .hltr .m-start-010per, .vrtl .hltr .m-start-015per,
+.vrtl .hltr .m-start-020per, .vrtl .hltr .m-start-025per, .vrtl .hltr .m-start-030per,
+.vrtl .hltr .m-start-033per, .vrtl .hltr .m-start-040per, .vrtl .hltr .m-start-050per,
+.vrtl .hltr .m-start-060per, .vrtl .hltr .m-start-067per, .vrtl .hltr .m-start-070per,
+.vrtl .hltr .m-start-075per, .vrtl .hltr .m-start-080per, .vrtl .hltr .m-start-090per,
+.vrtl .hltr .m-start-0em25, .vrtl .hltr .m-start-0em50, .vrtl .hltr .m-start-0em75,
+.vrtl .hltr .m-start-1em, .vrtl .hltr .m-start-1em25, .vrtl .hltr .m-start-1em50,
+.vrtl .hltr .m-start-1em75, .vrtl .hltr .m-start-2em, .vrtl .hltr .m-start-2em50,
+.vrtl .hltr .m-start-3em, .vrtl .hltr .m-start-4em, .vrtl .hltr .m-start-5em,
+.vrtl .hltr .m-start-5em25 {
+ margin-top: 0;
+}
+
+
+/* 行末邊界：橫排用 */
+.hltr .m-end-auto { margin-right: auto; }
+.hltr .m-end-0,
+.hltr .m-end-0em,
+.hltr .m-end-000per { margin-right: 0; }
+
+/* 以％指定 */
+.hltr .m-end-005per { margin-right: 5%; }
+.hltr .m-end-010per { margin-right: 10%; }
+.hltr .m-end-015per { margin-right: 15%; }
+.hltr .m-end-020per { margin-right: 20%; }
+.hltr .m-end-025per { margin-right: 25%; }
+.hltr .m-end-030per { margin-right: 30%; }
+.hltr .m-end-033per { margin-right: 33%; }
+.hltr .m-end-040per { margin-right: 40%; }
+.hltr .m-end-050per { margin-right: 50%; }
+.hltr .m-end-060per { margin-right: 60%; }
+.hltr .m-end-067per { margin-right: 67%; }
+.hltr .m-end-070per { margin-right: 70%; }
+.hltr .m-end-075per { margin-right: 75%; }
+.hltr .m-end-080per { margin-right: 80%; }
+.hltr .m-end-090per { margin-right: 90%; }
+
+/* 以文字數指定 */
+.hltr .m-end-0em25 { margin-right: 0.25em; }
+.hltr .m-end-0em50 { margin-right: 0.50em; }
+.hltr .m-end-0em75 { margin-right: 0.75em; }
+.hltr .m-end-1em { margin-right: 1.00em; }
+.hltr .m-end-1em25 { margin-right: 1.25em; }
+.hltr .m-end-1em50 { margin-right: 1.50em; }
+.hltr .m-end-1em75 { margin-right: 1.75em; }
+.hltr .m-end-2em { margin-right: 2.00em; }
+.hltr .m-end-2em50 { margin-right: 2.50em; }
+.hltr .m-end-3em { margin-right: 3.00em; }
+.hltr .m-end-4em { margin-right: 4.00em; }
+.hltr .m-end-5em { margin-right: 5.00em; }
+.hltr .m-end-5em25 { margin-right: 5.25em; }
+
+/* 行末邊界：直排用 */
+.vrtl .m-end-auto { margin-bottom: auto; }
+.vrtl .m-end-0,
+.vrtl .m-end-0em,
+.vrtl .m-end-000per { margin-bottom: 0; }
+
+/* 以％指定 */
+.vrtl .m-end-005per { margin-bottom: 5%; }
+.vrtl .m-end-010per { margin-bottom: 10%; }
+.vrtl .m-end-015per { margin-bottom: 15%; }
+.vrtl .m-end-020per { margin-bottom: 20%; }
+.vrtl .m-end-025per { margin-bottom: 25%; }
+.vrtl .m-end-030per { margin-bottom: 30%; }
+.vrtl .m-end-033per { margin-bottom: 33%; }
+.vrtl .m-end-040per { margin-bottom: 40%; }
+.vrtl .m-end-050per { margin-bottom: 50%; }
+.vrtl .m-end-060per { margin-bottom: 60%; }
+.vrtl .m-end-067per { margin-bottom: 67%; }
+.vrtl .m-end-070per { margin-bottom: 70%; }
+.vrtl .m-end-075per { margin-bottom: 75%; }
+.vrtl .m-end-080per { margin-bottom: 80%; }
+.vrtl .m-end-090per { margin-bottom: 90%; }
+
+/* 以文字數指定 */
+.vrtl .m-end-0em25 { margin-bottom: 0.25em; }
+.vrtl .m-end-0em50 { margin-bottom: 0.50em; }
+.vrtl .m-end-0em75 { margin-bottom: 0.75em; }
+.vrtl .m-end-1em { margin-bottom: 1.00em; }
+.vrtl .m-end-1em25 { margin-bottom: 1.25em; }
+.vrtl .m-end-1em50 { margin-bottom: 1.50em; }
+.vrtl .m-end-1em75 { margin-bottom: 1.75em; }
+.vrtl .m-end-2em { margin-bottom: 2.00em; }
+.vrtl .m-end-2em50 { margin-bottom: 2.50em; }
+.vrtl .m-end-3em { margin-bottom: 3.00em; }
+.vrtl .m-end-4em { margin-bottom: 4.00em; }
+.vrtl .m-end-5em { margin-bottom: 5.00em; }
+.vrtl .m-end-5em25 { margin-bottom: 5.25em; }
+
+/* 子元素排版方向改變時的對應 */
+/* .hltr .vrtl [class|="m-end"] { margin-right: 0; } */
+.hltr .vrtl .m-end-auto,
+.hltr .vrtl .m-end-005per, .hltr .vrtl .m-end-010per, .hltr .vrtl .m-end-015per,
+.hltr .vrtl .m-end-020per, .hltr .vrtl .m-end-025per, .hltr .vrtl .m-end-030per,
+.hltr .vrtl .m-end-033per, .hltr .vrtl .m-end-040per, .hltr .vrtl .m-end-050per,
+.hltr .vrtl .m-end-060per, .hltr .vrtl .m-end-067per, .hltr .vrtl .m-end-070per,
+.hltr .vrtl .m-end-075per, .hltr .vrtl .m-end-080per, .hltr .vrtl .m-end-090per,
+.hltr .vrtl .m-end-0em25, .hltr .vrtl .m-end-0em50, .hltr .vrtl .m-end-0em75,
+.hltr .vrtl .m-end-1em, .hltr .vrtl .m-end-1em25, .hltr .vrtl .m-end-1em50,
+.hltr .vrtl .m-end-1em75, .hltr .vrtl .m-end-2em, .hltr .vrtl .m-end-2em50,
+.hltr .vrtl .m-end-3em, .hltr .vrtl .m-end-4em, .hltr .vrtl .m-end-5em,
+.hltr .vrtl .m-end-5em25 {
+ margin-right: 0;
+}
+/* .vrtl .hltr [class|="m-end"] { margin-bottom: 0; } */
+.vrtl .hltr .m-end-auto,
+.vrtl .hltr .m-end-005per, .vrtl .hltr .m-end-010per, .vrtl .hltr .m-end-015per,
+.vrtl .hltr .m-end-020per, .vrtl .hltr .m-end-025per, .vrtl .hltr .m-end-030per,
+.vrtl .hltr .m-end-033per, .vrtl .hltr .m-end-040per, .vrtl .hltr .m-end-050per,
+.vrtl .hltr .m-end-060per, .vrtl .hltr .m-end-067per, .vrtl .hltr .m-end-070per,
+.vrtl .hltr .m-end-075per, .vrtl .hltr .m-end-080per, .vrtl .hltr .m-end-090per,
+.vrtl .hltr .m-end-0em25, .vrtl .hltr .m-end-0em50, .vrtl .hltr .m-end-0em75,
+.vrtl .hltr .m-end-1em, .vrtl .hltr .m-end-1em25, .vrtl .hltr .m-end-1em50,
+.vrtl .hltr .m-end-1em75, .vrtl .hltr .m-end-2em, .vrtl .hltr .m-end-2em50,
+.vrtl .hltr .m-end-3em, .vrtl .hltr .m-end-4em, .vrtl .hltr .m-end-5em,
+.vrtl .hltr .m-end-5em25 {
+ margin-bottom: 0;
+}
+
+
+/* 行前邊界：橫排用 */
+.hltr .m-before-auto { margin-top: auto; }
+.hltr .m-before-0,
+.hltr .m-before-0em,
+.hltr .m-before-000per { margin-top: 0; }
+
+/* 以％指定 */
+.hltr .m-before-005per { margin-top: 5%; }
+.hltr .m-before-010per { margin-top: 10%; }
+.hltr .m-before-015per { margin-top: 15%; }
+.hltr .m-before-020per { margin-top: 20%; }
+.hltr .m-before-025per { margin-top: 25%; }
+.hltr .m-before-030per { margin-top: 30%; }
+.hltr .m-before-033per { margin-top: 33%; }
+.hltr .m-before-040per { margin-top: 40%; }
+.hltr .m-before-050per { margin-top: 50%; }
+.hltr .m-before-060per { margin-top: 60%; }
+.hltr .m-before-067per { margin-top: 67%; }
+.hltr .m-before-070per { margin-top: 70%; }
+.hltr .m-before-075per { margin-top: 75%; }
+.hltr .m-before-080per { margin-top: 80%; }
+.hltr .m-before-090per { margin-top: 90%; }
+
+/* 以文字數指定 */
+.hltr .m-before-0em25 { margin-top: 0.25em; }
+.hltr .m-before-0em50 { margin-top: 0.50em; }
+.hltr .m-before-0em75 { margin-top: 0.75em; }
+.hltr .m-before-1em { margin-top: 1.00em; }
+.hltr .m-before-1em25 { margin-top: 1.25em; }
+.hltr .m-before-1em50 { margin-top: 1.50em; }
+.hltr .m-before-1em75 { margin-top: 1.75em; }
+.hltr .m-before-2em { margin-top: 2.00em; }
+.hltr .m-before-2em50 { margin-top: 2.50em; }
+.hltr .m-before-3em { margin-top: 3.00em; }
+.hltr .m-before-4em { margin-top: 4.00em; }
+.hltr .m-before-5em { margin-top: 5.00em; }
+.hltr .m-before-5em25 { margin-top: 5.25em; }
+
+/* 行前邊界：直排用 */
+.vrtl .m-before-auto { margin-right: auto; }
+.vrtl .m-before-0,
+.vrtl .m-before-0em,
+.vrtl .m-before-000per { margin-right: 0; }
+
+/* 以％指定 */
+.vrtl .m-before-005per { margin-right: 5%; }
+.vrtl .m-before-010per { margin-right: 10%; }
+.vrtl .m-before-015per { margin-right: 15%; }
+.vrtl .m-before-020per { margin-right: 20%; }
+.vrtl .m-before-025per { margin-right: 25%; }
+.vrtl .m-before-030per { margin-right: 30%; }
+.vrtl .m-before-033per { margin-right: 33%; }
+.vrtl .m-before-040per { margin-right: 40%; }
+.vrtl .m-before-050per { margin-right: 50%; }
+.vrtl .m-before-060per { margin-right: 60%; }
+.vrtl .m-before-067per { margin-right: 67%; }
+.vrtl .m-before-070per { margin-right: 70%; }
+.vrtl .m-before-075per { margin-right: 75%; }
+.vrtl .m-before-080per { margin-right: 80%; }
+.vrtl .m-before-090per { margin-right: 90%; }
+
+/* 以文字數指定 */
+.vrtl .m-before-0em25 { margin-right: 0.25em; }
+.vrtl .m-before-0em50 { margin-right: 0.50em; }
+.vrtl .m-before-0em75 { margin-right: 0.75em; }
+.vrtl .m-before-1em { margin-right: 1.00em; }
+.vrtl .m-before-1em25 { margin-right: 1.25em; }
+.vrtl .m-before-1em50 { margin-right: 1.50em; }
+.vrtl .m-before-1em75 { margin-right: 1.75em; }
+.vrtl .m-before-2em { margin-right: 2.00em; }
+.vrtl .m-before-2em50 { margin-right: 2.50em; }
+.vrtl .m-before-3em { margin-right: 3.00em; }
+.vrtl .m-before-4em { margin-right: 4.00em; }
+.vrtl .m-before-5em { margin-right: 5.00em; }
+.vrtl .m-before-5em25 { margin-right: 5.25em; }
+
+/* 子元素排版方向改變時的對應 */
+/* .hltr .vrtl [class|="m-before"] { margin-top: 0; } */
+.hltr .vrtl .m-before-auto,
+.hltr .vrtl .m-before-005per, .hltr .vrtl .m-before-010per, .hltr .vrtl .m-before-015per,
+.hltr .vrtl .m-before-020per, .hltr .vrtl .m-before-025per, .hltr .vrtl .m-before-030per,
+.hltr .vrtl .m-before-033per, .hltr .vrtl .m-before-040per, .hltr .vrtl .m-before-050per,
+.hltr .vrtl .m-before-060per, .hltr .vrtl .m-before-067per, .hltr .vrtl .m-before-070per,
+.hltr .vrtl .m-before-075per, .hltr .vrtl .m-before-080per, .hltr .vrtl .m-before-090per,
+.hltr .vrtl .m-before-0em25, .hltr .vrtl .m-before-0em50, .hltr .vrtl .m-before-0em75,
+.hltr .vrtl .m-before-1em, .hltr .vrtl .m-before-1em25, .hltr .vrtl .m-before-1em50,
+.hltr .vrtl .m-before-1em75, .hltr .vrtl .m-before-2em, .hltr .vrtl .m-before-2em50,
+.hltr .vrtl .m-before-3em, .hltr .vrtl .m-before-4em, .hltr .vrtl .m-before-5em,
+.hltr .vrtl .m-before-5em25 {
+ margin-top: 0;
+}
+/* .vrtl .hltr [class|="m-before"] { margin-right: 0; } */
+.vrtl .hltr .m-before-auto,
+.vrtl .hltr .m-before-005per, .vrtl .hltr .m-before-010per, .vrtl .hltr .m-before-015per,
+.vrtl .hltr .m-before-020per, .vrtl .hltr .m-before-025per, .vrtl .hltr .m-before-030per,
+.vrtl .hltr .m-before-033per, .vrtl .hltr .m-before-040per, .vrtl .hltr .m-before-050per,
+.vrtl .hltr .m-before-060per, .vrtl .hltr .m-before-067per, .vrtl .hltr .m-before-070per,
+.vrtl .hltr .m-before-075per, .vrtl .hltr .m-before-080per, .vrtl .hltr .m-before-090per,
+.vrtl .hltr .m-before-0em25, .vrtl .hltr .m-before-0em50, .vrtl .hltr .m-before-0em75,
+.vrtl .hltr .m-before-1em, .vrtl .hltr .m-before-1em25, .vrtl .hltr .m-before-1em50,
+.vrtl .hltr .m-before-1em75, .vrtl .hltr .m-before-2em, .vrtl .hltr .m-before-2em50,
+.vrtl .hltr .m-before-3em, .vrtl .hltr .m-before-4em, .vrtl .hltr .m-before-5em,
+.vrtl .hltr .m-before-5em25 {
+ margin-right: 0;
+}
+
+
+/* 行後邊界：橫排用 */
+.hltr .m-after-auto { margin-bottom: auto; }
+.hltr .m-after-0,
+.hltr .m-after-0em,
+.hltr .m-after-000per { margin-bottom: 0; }
+
+/* 以％指定 */
+.hltr .m-after-005per { margin-bottom: 5%; }
+.hltr .m-after-010per { margin-bottom: 10%; }
+.hltr .m-after-015per { margin-bottom: 15%; }
+.hltr .m-after-020per { margin-bottom: 20%; }
+.hltr .m-after-025per { margin-bottom: 25%; }
+.hltr .m-after-030per { margin-bottom: 30%; }
+.hltr .m-after-033per { margin-bottom: 33%; }
+.hltr .m-after-040per { margin-bottom: 40%; }
+.hltr .m-after-050per { margin-bottom: 50%; }
+.hltr .m-after-060per { margin-bottom: 60%; }
+.hltr .m-after-067per { margin-bottom: 67%; }
+.hltr .m-after-070per { margin-bottom: 70%; }
+.hltr .m-after-075per { margin-bottom: 75%; }
+.hltr .m-after-080per { margin-bottom: 80%; }
+.hltr .m-after-090per { margin-bottom: 90%; }
+
+/* 以文字數指定 */
+.hltr .m-after-0em25 { margin-bottom: 0.25em; }
+.hltr .m-after-0em50 { margin-bottom: 0.50em; }
+.hltr .m-after-0em75 { margin-bottom: 0.75em; }
+.hltr .m-after-1em { margin-bottom: 1.00em; }
+.hltr .m-after-1em25 { margin-bottom: 1.25em; }
+.hltr .m-after-1em50 { margin-bottom: 1.50em; }
+.hltr .m-after-1em75 { margin-bottom: 1.75em; }
+.hltr .m-after-2em { margin-bottom: 2.00em; }
+.hltr .m-after-2em50 { margin-bottom: 2.50em; }
+.hltr .m-after-3em { margin-bottom: 3.00em; }
+.hltr .m-after-4em { margin-bottom: 4.00em; }
+.hltr .m-after-5em { margin-bottom: 5.00em; }
+.hltr .m-after-5em25 { margin-bottom: 5.25em; }
+
+/* 行後邊界：橫排用 */
+.vrtl .m-after-auto { margin-left: auto; }
+.vrtl .m-after-0,
+.vrtl .m-after-0em,
+.vrtl .m-after-000per { margin-left: 0; }
+
+/* 以％指定 */
+.vrtl .m-after-005per { margin-left: 5%; }
+.vrtl .m-after-010per { margin-left: 10%; }
+.vrtl .m-after-015per { margin-left: 15%; }
+.vrtl .m-after-020per { margin-left: 20%; }
+.vrtl .m-after-025per { margin-left: 25%; }
+.vrtl .m-after-030per { margin-left: 30%; }
+.vrtl .m-after-033per { margin-left: 33%; }
+.vrtl .m-after-040per { margin-left: 40%; }
+.vrtl .m-after-050per { margin-left: 50%; }
+.vrtl .m-after-060per { margin-left: 60%; }
+.vrtl .m-after-067per { margin-left: 67%; }
+.vrtl .m-after-070per { margin-left: 70%; }
+.vrtl .m-after-075per { margin-left: 75%; }
+.vrtl .m-after-080per { margin-left: 80%; }
+.vrtl .m-after-090per { margin-left: 90%; }
+
+/* 以文字數指定 */
+.vrtl .m-after-0em25 { margin-left: 0.25em; }
+.vrtl .m-after-0em50 { margin-left: 0.50em; }
+.vrtl .m-after-0em75 { margin-left: 0.75em; }
+.vrtl .m-after-1em { margin-left: 1.00em; }
+.vrtl .m-after-1em25 { margin-left: 1.25em; }
+.vrtl .m-after-1em50 { margin-left: 1.50em; }
+.vrtl .m-after-1em75 { margin-left: 1.75em; }
+.vrtl .m-after-2em { margin-left: 2.00em; }
+.vrtl .m-after-2em50 { margin-left: 2.50em; }
+.vrtl .m-after-3em { margin-left: 3.00em; }
+.vrtl .m-after-4em { margin-left: 4.00em; }
+.vrtl .m-after-5em { margin-left: 5.00em; }
+.vrtl .m-after-5em25 { margin-left: 5.25em; }
+
+/* 子元素排版方向改變時的對應 */
+/* .hltr .vrtl [class|="m-after"] { margin-bottom: 0; } */
+.hltr .vrtl .m-after-auto,
+.hltr .vrtl .m-after-005per, .hltr .vrtl .m-after-010per, .hltr .vrtl .m-after-015per,
+.hltr .vrtl .m-after-020per, .hltr .vrtl .m-after-025per, .hltr .vrtl .m-after-030per,
+.hltr .vrtl .m-after-033per, .hltr .vrtl .m-after-040per, .hltr .vrtl .m-after-050per,
+.hltr .vrtl .m-after-060per, .hltr .vrtl .m-after-067per, .hltr .vrtl .m-after-070per,
+.hltr .vrtl .m-after-075per, .hltr .vrtl .m-after-080per, .hltr .vrtl .m-after-090per,
+.hltr .vrtl .m-after-0em25, .hltr .vrtl .m-after-0em50, .hltr .vrtl .m-after-0em75,
+.hltr .vrtl .m-after-1em, .hltr .vrtl .m-after-1em25, .hltr .vrtl .m-after-1em50,
+.hltr .vrtl .m-after-1em75, .hltr .vrtl .m-after-2em, .hltr .vrtl .m-after-2em50,
+.hltr .vrtl .m-after-3em, .hltr .vrtl .m-after-4em, .hltr .vrtl .m-after-5em,
+.hltr .vrtl .m-after-5em25 {
+ margin-bottom: 0;
+}
+/* .vrtl .hltr [class|="m-after"] { margin-left: 0; } */
+.vrtl .hltr .m-after-auto,
+.vrtl .hltr .m-after-005per, .vrtl .hltr .m-after-010per, .vrtl .hltr .m-after-015per,
+.vrtl .hltr .m-after-020per, .vrtl .hltr .m-after-025per, .vrtl .hltr .m-after-030per,
+.vrtl .hltr .m-after-033per, .vrtl .hltr .m-after-040per, .vrtl .hltr .m-after-050per,
+.vrtl .hltr .m-after-060per, .vrtl .hltr .m-after-067per, .vrtl .hltr .m-after-070per,
+.vrtl .hltr .m-after-075per, .vrtl .hltr .m-after-080per, .vrtl .hltr .m-after-090per,
+.vrtl .hltr .m-after-0em25, .vrtl .hltr .m-after-0em50, .vrtl .hltr .m-after-0em75,
+.vrtl .hltr .m-after-1em, .vrtl .hltr .m-after-1em25, .vrtl .hltr .m-after-1em50,
+.vrtl .hltr .m-after-1em75, .vrtl .hltr .m-after-2em, .vrtl .hltr .m-after-2em50,
+.vrtl .hltr .m-after-3em, .vrtl .hltr .m-after-4em, .vrtl .hltr .m-after-5em,
+.vrtl .hltr .m-after-5em25 {
+ margin-left: 0;
+}
+
+
+/* 【邏輯方向指定】內圍留白（Padding）
+---------------------------------------------------------------- */
+/* 行頭留白：橫排用 */
+.hltr .p-start-0,
+.hltr .p-start-0em,
+.hltr .p-start-000per { padding-left: 0; }
+
+/* 以％指定 */
+.hltr .p-start-005per { padding-left: 5%; }
+.hltr .p-start-010per { padding-left: 10%; }
+.hltr .p-start-015per { padding-left: 15%; }
+.hltr .p-start-020per { padding-left: 20%; }
+.hltr .p-start-025per { padding-left: 25%; }
+.hltr .p-start-030per { padding-left: 30%; }
+.hltr .p-start-033per { padding-left: 33%; }
+.hltr .p-start-040per { padding-left: 40%; }
+.hltr .p-start-050per { padding-left: 50%; }
+.hltr .p-start-060per { padding-left: 60%; }
+.hltr .p-start-067per { padding-left: 67%; }
+.hltr .p-start-070per { padding-left: 70%; }
+.hltr .p-start-075per { padding-left: 75%; }
+.hltr .p-start-080per { padding-left: 80%; }
+.hltr .p-start-090per { padding-left: 90%; }
+
+/* 以文字數指定 */
+.hltr .p-start-0em25 { padding-left: 0.25em; }
+.hltr .p-start-0em50 { padding-left: 0.50em; }
+.hltr .p-start-0em75 { padding-left: 0.75em; }
+.hltr .p-start-1em { padding-left: 1.00em; }
+.hltr .p-start-1em25 { padding-left: 1.25em; }
+.hltr .p-start-1em50 { padding-left: 1.50em; }
+.hltr .p-start-1em75 { padding-left: 1.75em; }
+.hltr .p-start-2em { padding-left: 2.00em; }
+.hltr .p-start-2em50 { padding-left: 2.50em; }
+.hltr .p-start-3em { padding-left: 3.00em; }
+.hltr .p-start-4em { padding-left: 4.00em; }
+.hltr .p-start-5em { padding-left: 5.00em; }
+.hltr .p-start-5em25 { padding-left: 5.25em; }
+
+/* 行頭留白：直排用 */
+.vrtl .p-start-0,
+.vrtl .p-start-0em,
+.vrtl .p-start-000per { padding-top: 0; }
+
+/* 以％指定 */
+.vrtl .p-start-005per { padding-top: 5%; }
+.vrtl .p-start-010per { padding-top: 10%; }
+.vrtl .p-start-015per { padding-top: 15%; }
+.vrtl .p-start-020per { padding-top: 20%; }
+.vrtl .p-start-025per { padding-top: 25%; }
+.vrtl .p-start-030per { padding-top: 30%; }
+.vrtl .p-start-033per { padding-top: 33%; }
+.vrtl .p-start-040per { padding-top: 40%; }
+.vrtl .p-start-050per { padding-top: 50%; }
+.vrtl .p-start-060per { padding-top: 60%; }
+.vrtl .p-start-067per { padding-top: 67%; }
+.vrtl .p-start-070per { padding-top: 70%; }
+.vrtl .p-start-075per { padding-top: 75%; }
+.vrtl .p-start-080per { padding-top: 80%; }
+.vrtl .p-start-090per { padding-top: 90%; }
+
+/* 以文字數指定 */
+.vrtl .p-start-0em25 { padding-top: 0.25em; }
+.vrtl .p-start-0em50 { padding-top: 0.50em; }
+.vrtl .p-start-0em75 { padding-top: 0.75em; }
+.vrtl .p-start-1em { padding-top: 1.00em; }
+.vrtl .p-start-1em25 { padding-top: 1.25em; }
+.vrtl .p-start-1em50 { padding-top: 1.50em; }
+.vrtl .p-start-1em75 { padding-top: 1.75em; }
+.vrtl .p-start-2em { padding-top: 2.00em; }
+.vrtl .p-start-2em50 { padding-top: 2.50em; }
+.vrtl .p-start-3em { padding-top: 3.00em; }
+.vrtl .p-start-4em { padding-top: 4.00em; }
+.vrtl .p-start-5em { padding-top: 5.00em; }
+.vrtl .p-start-5em25 { padding-top: 5.25em; }
+
+/* 子元素排版方向改變時的對應 */
+/* .hltr .vrtl [class|="p-start"] { padding-left: 0; } */
+.hltr .vrtl .p-start-005per, .hltr .vrtl .p-start-010per, .hltr .vrtl .p-start-015per,
+.hltr .vrtl .p-start-020per, .hltr .vrtl .p-start-025per, .hltr .vrtl .p-start-030per,
+.hltr .vrtl .p-start-033per, .hltr .vrtl .p-start-040per, .hltr .vrtl .p-start-050per,
+.hltr .vrtl .p-start-060per, .hltr .vrtl .p-start-067per, .hltr .vrtl .p-start-070per,
+.hltr .vrtl .p-start-075per, .hltr .vrtl .p-start-080per, .hltr .vrtl .p-start-090per,
+.hltr .vrtl .p-start-0em25, .hltr .vrtl .p-start-0em50, .hltr .vrtl .p-start-0em75,
+.hltr .vrtl .p-start-1em, .hltr .vrtl .p-start-1em25, .hltr .vrtl .p-start-1em50,
+.hltr .vrtl .p-start-1em75, .hltr .vrtl .p-start-2em, .hltr .vrtl .p-start-2em50,
+.hltr .vrtl .p-start-3em, .hltr .vrtl .p-start-4em, .hltr .vrtl .p-start-5em,
+.hltr .vrtl .p-start-5em25 {
+ padding-left: 0;
+}
+/* .vrtl .hltr [class|="p-start"] { padding-top: 0; } */
+.vrtl .hltr .p-start-005per, .vrtl .hltr .p-start-010per, .vrtl .hltr .p-start-015per,
+.vrtl .hltr .p-start-020per, .vrtl .hltr .p-start-025per, .vrtl .hltr .p-start-030per,
+.vrtl .hltr .p-start-033per, .vrtl .hltr .p-start-040per, .vrtl .hltr .p-start-050per,
+.vrtl .hltr .p-start-060per, .vrtl .hltr .p-start-067per, .vrtl .hltr .p-start-070per,
+.vrtl .hltr .p-start-075per, .vrtl .hltr .p-start-080per, .vrtl .hltr .p-start-090per,
+.vrtl .hltr .p-start-0em25, .vrtl .hltr .p-start-0em50, .vrtl .hltr .p-start-0em75,
+.vrtl .hltr .p-start-1em, .vrtl .hltr .p-start-1em25, .vrtl .hltr .p-start-1em50,
+.vrtl .hltr .p-start-1em75, .vrtl .hltr .p-start-2em, .vrtl .hltr .p-start-2em50,
+.vrtl .hltr .p-start-3em, .vrtl .hltr .p-start-4em, .vrtl .hltr .p-start-5em,
+.vrtl .hltr .p-start-5em25 {
+ padding-top: 0;
+}
+
+
+/* 行末留白：橫排用 */
+.hltr .p-end-0,
+.hltr .p-end-0em,
+.hltr .p-end-000per { padding-right: 0; }
+
+/* 以％指定 */
+.hltr .p-end-005per { padding-right: 5%; }
+.hltr .p-end-010per { padding-right: 10%; }
+.hltr .p-end-015per { padding-right: 15%; }
+.hltr .p-end-020per { padding-right: 20%; }
+.hltr .p-end-025per { padding-right: 25%; }
+.hltr .p-end-030per { padding-right: 30%; }
+.hltr .p-end-033per { padding-right: 33%; }
+.hltr .p-end-040per { padding-right: 40%; }
+.hltr .p-end-050per { padding-right: 50%; }
+.hltr .p-end-060per { padding-right: 60%; }
+.hltr .p-end-067per { padding-right: 67%; }
+.hltr .p-end-070per { padding-right: 70%; }
+.hltr .p-end-075per { padding-right: 75%; }
+.hltr .p-end-080per { padding-right: 80%; }
+.hltr .p-end-090per { padding-right: 90%; }
+
+/* 以文字數指定 */
+.hltr .p-end-0em25 { padding-right: 0.25em; }
+.hltr .p-end-0em50 { padding-right: 0.50em; }
+.hltr .p-end-0em75 { padding-right: 0.75em; }
+.hltr .p-end-1em { padding-right: 1.00em; }
+.hltr .p-end-1em25 { padding-right: 1.25em; }
+.hltr .p-end-1em50 { padding-right: 1.50em; }
+.hltr .p-end-1em75 { padding-right: 1.75em; }
+.hltr .p-end-2em { padding-right: 2.00em; }
+.hltr .p-end-2em50 { padding-right: 2.50em; }
+.hltr .p-end-3em { padding-right: 3.00em; }
+.hltr .p-end-4em { padding-right: 4.00em; }
+.hltr .p-end-5em { padding-right: 5.00em; }
+.hltr .p-end-5em25 { padding-right: 5.25em; }
+
+/* 行末留白：橫排用 */
+.vrtl .p-end-0,
+.vrtl .p-end-0em,
+.vrtl .p-end-000per { padding-bottom: 0; }
+
+/* 以％指定 */
+.vrtl .p-end-005per { padding-bottom: 5%; }
+.vrtl .p-end-010per { padding-bottom: 10%; }
+.vrtl .p-end-015per { padding-bottom: 15%; }
+.vrtl .p-end-020per { padding-bottom: 20%; }
+.vrtl .p-end-025per { padding-bottom: 25%; }
+.vrtl .p-end-030per { padding-bottom: 30%; }
+.vrtl .p-end-033per { padding-bottom: 33%; }
+.vrtl .p-end-040per { padding-bottom: 40%; }
+.vrtl .p-end-050per { padding-bottom: 50%; }
+.vrtl .p-end-060per { padding-bottom: 60%; }
+.vrtl .p-end-067per { padding-bottom: 67%; }
+.vrtl .p-end-070per { padding-bottom: 70%; }
+.vrtl .p-end-075per { padding-bottom: 75%; }
+.vrtl .p-end-080per { padding-bottom: 80%; }
+.vrtl .p-end-090per { padding-bottom: 90%; }
+
+/* 以文字數指定 */
+.vrtl .p-end-0em25 { padding-bottom: 0.25em; }
+.vrtl .p-end-0em50 { padding-bottom: 0.50em; }
+.vrtl .p-end-0em75 { padding-bottom: 0.75em; }
+.vrtl .p-end-1em { padding-bottom: 1.00em; }
+.vrtl .p-end-1em25 { padding-bottom: 1.25em; }
+.vrtl .p-end-1em50 { padding-bottom: 1.50em; }
+.vrtl .p-end-1em75 { padding-bottom: 1.75em; }
+.vrtl .p-end-2em { padding-bottom: 2.00em; }
+.vrtl .p-end-2em50 { padding-bottom: 2.50em; }
+.vrtl .p-end-3em { padding-bottom: 3.00em; }
+.vrtl .p-end-4em { padding-bottom: 4.00em; }
+.vrtl .p-end-5em { padding-bottom: 5.00em; }
+.vrtl .p-end-5em25 { padding-bottom: 5.25em; }
+
+/* 縮排：子元素排版方向改變時的對應 */
+/* .hltr .vrtl [class|="p-end"] { padding-right: 0; } */
+.hltr .vrtl .p-end-005per, .hltr .vrtl .p-end-010per, .hltr .vrtl .p-end-015per,
+.hltr .vrtl .p-end-020per, .hltr .vrtl .p-end-025per, .hltr .vrtl .p-end-030per,
+.hltr .vrtl .p-end-033per, .hltr .vrtl .p-end-040per, .hltr .vrtl .p-end-050per,
+.hltr .vrtl .p-end-060per, .hltr .vrtl .p-end-067per, .hltr .vrtl .p-end-070per,
+.hltr .vrtl .p-end-075per, .hltr .vrtl .p-end-080per, .hltr .vrtl .p-end-090per,
+.hltr .vrtl .p-end-0em25, .hltr .vrtl .p-end-0em50, .hltr .vrtl .p-end-0em75,
+.hltr .vrtl .p-end-1em, .hltr .vrtl .p-end-1em25, .hltr .vrtl .p-end-1em50,
+.hltr .vrtl .p-end-1em75, .hltr .vrtl .p-end-2em, .hltr .vrtl .p-end-2em50,
+.hltr .vrtl .p-end-3em, .hltr .vrtl .p-end-4em, .hltr .vrtl .p-end-5em,
+.hltr .vrtl .p-end-5em25 {
+ padding-right: 0;
+}
+/* .vrtl .hltr [class|="p-end"] { padding-bottom: 0; } */
+.vrtl .hltr .p-end-005per, .vrtl .hltr .p-end-010per, .vrtl .hltr .p-end-015per,
+.vrtl .hltr .p-end-020per, .vrtl .hltr .p-end-025per, .vrtl .hltr .p-end-030per,
+.vrtl .hltr .p-end-033per, .vrtl .hltr .p-end-040per, .vrtl .hltr .p-end-050per,
+.vrtl .hltr .p-end-060per, .vrtl .hltr .p-end-067per, .vrtl .hltr .p-end-070per,
+.vrtl .hltr .p-end-075per, .vrtl .hltr .p-end-080per, .vrtl .hltr .p-end-090per,
+.vrtl .hltr .p-end-0em25, .vrtl .hltr .p-end-0em50, .vrtl .hltr .p-end-0em75,
+.vrtl .hltr .p-end-1em, .vrtl .hltr .p-end-1em25, .vrtl .hltr .p-end-1em50,
+.vrtl .hltr .p-end-1em75, .vrtl .hltr .p-end-2em, .vrtl .hltr .p-end-2em50,
+.vrtl .hltr .p-end-3em, .vrtl .hltr .p-end-4em, .vrtl .hltr .p-end-5em,
+.vrtl .hltr .p-end-5em25 {
+ padding-bottom: 0;
+}
+
+
+/* 行前留白：橫排用 */
+.hltr .p-before-0,
+.hltr .p-before-0em,
+.hltr .p-before-000per { padding-top: 0; }
+
+/* 以％指定 */
+.hltr .p-before-005per { padding-top: 5%; }
+.hltr .p-before-010per { padding-top: 10%; }
+.hltr .p-before-015per { padding-top: 15%; }
+.hltr .p-before-020per { padding-top: 20%; }
+.hltr .p-before-025per { padding-top: 25%; }
+.hltr .p-before-030per { padding-top: 30%; }
+.hltr .p-before-033per { padding-top: 33%; }
+.hltr .p-before-040per { padding-top: 40%; }
+.hltr .p-before-050per { padding-top: 50%; }
+.hltr .p-before-060per { padding-top: 60%; }
+.hltr .p-before-067per { padding-top: 67%; }
+.hltr .p-before-070per { padding-top: 70%; }
+.hltr .p-before-075per { padding-top: 75%; }
+.hltr .p-before-080per { padding-top: 80%; }
+.hltr .p-before-090per { padding-top: 90%; }
+
+/* 以文字數指定 */
+.hltr .p-before-0em25 { padding-top: 0.25em; }
+.hltr .p-before-0em50 { padding-top: 0.50em; }
+.hltr .p-before-0em75 { padding-top: 0.75em; }
+.hltr .p-before-1em { padding-top: 1.00em; }
+.hltr .p-before-1em25 { padding-top: 1.25em; }
+.hltr .p-before-1em50 { padding-top: 1.50em; }
+.hltr .p-before-1em75 { padding-top: 1.75em; }
+.hltr .p-before-2em { padding-top: 2.00em; }
+.hltr .p-before-2em50 { padding-top: 2.50em; }
+.hltr .p-before-3em { padding-top: 3.00em; }
+.hltr .p-before-4em { padding-top: 4.00em; }
+.hltr .p-before-5em { padding-top: 5.00em; }
+.hltr .p-before-5em25 { padding-top: 5.25em; }
+
+/* 行前留白：直排用 */
+.vrtl .p-before-0,
+.vrtl .p-before-0em,
+.vrtl .p-before-000per { padding-right: 0; }
+
+/* 以％指定 */
+.vrtl .p-before-005per { padding-right: 5%; }
+.vrtl .p-before-010per { padding-right: 10%; }
+.vrtl .p-before-015per { padding-right: 15%; }
+.vrtl .p-before-020per { padding-right: 20%; }
+.vrtl .p-before-025per { padding-right: 25%; }
+.vrtl .p-before-030per { padding-right: 30%; }
+.vrtl .p-before-033per { padding-right: 33%; }
+.vrtl .p-before-040per { padding-right: 40%; }
+.vrtl .p-before-050per { padding-right: 50%; }
+.vrtl .p-before-060per { padding-right: 60%; }
+.vrtl .p-before-067per { padding-right: 67%; }
+.vrtl .p-before-070per { padding-right: 70%; }
+.vrtl .p-before-075per { padding-right: 75%; }
+.vrtl .p-before-080per { padding-right: 80%; }
+.vrtl .p-before-090per { padding-right: 90%; }
+
+/* 以文字數指定 */
+.vrtl .p-before-0em25 { padding-right: 0.25em; }
+.vrtl .p-before-0em50 { padding-right: 0.50em; }
+.vrtl .p-before-0em75 { padding-right: 0.75em; }
+.vrtl .p-before-1em { padding-right: 1.00em; }
+.vrtl .p-before-1em25 { padding-right: 1.25em; }
+.vrtl .p-before-1em50 { padding-right: 1.50em; }
+.vrtl .p-before-1em75 { padding-right: 1.75em; }
+.vrtl .p-before-2em { padding-right: 2.00em; }
+.vrtl .p-before-2em50 { padding-right: 2.50em; }
+.vrtl .p-before-3em { padding-right: 3.00em; }
+.vrtl .p-before-4em { padding-right: 4.00em; }
+.vrtl .p-before-5em { padding-right: 5.00em; }
+.vrtl .p-before-5em25 { padding-right: 5.25em; }
+
+/* 子元素排版方向改變時的對應 */
+/* .hltr .vrtl [class|="p-before"] { padding-top: 0; } */
+.hltr .vrtl .p-before-005per, .hltr .vrtl .p-before-010per, .hltr .vrtl .p-before-015per,
+.hltr .vrtl .p-before-020per, .hltr .vrtl .p-before-025per, .hltr .vrtl .p-before-030per,
+.hltr .vrtl .p-before-033per, .hltr .vrtl .p-before-040per, .hltr .vrtl .p-before-050per,
+.hltr .vrtl .p-before-060per, .hltr .vrtl .p-before-067per, .hltr .vrtl .p-before-070per,
+.hltr .vrtl .p-before-075per, .hltr .vrtl .p-before-080per, .hltr .vrtl .p-before-090per,
+.hltr .vrtl .p-before-0em25, .hltr .vrtl .p-before-0em50, .hltr .vrtl .p-before-0em75,
+.hltr .vrtl .p-before-1em, .hltr .vrtl .p-before-1em25, .hltr .vrtl .p-before-1em50,
+.hltr .vrtl .p-before-1em75, .hltr .vrtl .p-before-2em, .hltr .vrtl .p-before-2em50,
+.hltr .vrtl .p-before-3em, .hltr .vrtl .p-before-4em, .hltr .vrtl .p-before-5em,
+.hltr .vrtl .p-before-5em25 {
+ padding-top: 0;
+}
+/* .vrtl .hltr [class|="p-before"] { padding-right: 0; } */
+.vrtl .hltr .p-before-005per, .vrtl .hltr .p-before-010per, .vrtl .hltr .p-before-015per,
+.vrtl .hltr .p-before-020per, .vrtl .hltr .p-before-025per, .vrtl .hltr .p-before-030per,
+.vrtl .hltr .p-before-033per, .vrtl .hltr .p-before-040per, .vrtl .hltr .p-before-050per,
+.vrtl .hltr .p-before-060per, .vrtl .hltr .p-before-067per, .vrtl .hltr .p-before-070per,
+.vrtl .hltr .p-before-075per, .vrtl .hltr .p-before-080per, .vrtl .hltr .p-before-090per,
+.vrtl .hltr .p-before-0em25, .vrtl .hltr .p-before-0em50, .vrtl .hltr .p-before-0em75,
+.vrtl .hltr .p-before-1em, .vrtl .hltr .p-before-1em25, .vrtl .hltr .p-before-1em50,
+.vrtl .hltr .p-before-1em75, .vrtl .hltr .p-before-2em, .vrtl .hltr .p-before-2em50,
+.vrtl .hltr .p-before-3em, .vrtl .hltr .p-before-4em, .vrtl .hltr .p-before-5em,
+.vrtl .hltr .p-before-5em25 {
+ padding-right: 0;
+}
+
+
+/* 行後留白：橫排用 */
+.hltr .p-after-0,
+.hltr .p-after-0em,
+.hltr .p-after-000per { padding-bottom: 0; }
+
+/* 以％指定 */
+.hltr .p-after-005per { padding-bottom: 5%; }
+.hltr .p-after-010per { padding-bottom: 10%; }
+.hltr .p-after-015per { padding-bottom: 15%; }
+.hltr .p-after-020per { padding-bottom: 20%; }
+.hltr .p-after-025per { padding-bottom: 25%; }
+.hltr .p-after-030per { padding-bottom: 30%; }
+.hltr .p-after-033per { padding-bottom: 33%; }
+.hltr .p-after-040per { padding-bottom: 40%; }
+.hltr .p-after-050per { padding-bottom: 50%; }
+.hltr .p-after-060per { padding-bottom: 60%; }
+.hltr .p-after-067per { padding-bottom: 67%; }
+.hltr .p-after-070per { padding-bottom: 70%; }
+.hltr .p-after-075per { padding-bottom: 75%; }
+.hltr .p-after-080per { padding-bottom: 80%; }
+.hltr .p-after-090per { padding-bottom: 90%; }
+
+/* 以文字數指定 */
+.hltr .p-after-0em25 { padding-bottom: 0.25em; }
+.hltr .p-after-0em50 { padding-bottom: 0.50em; }
+.hltr .p-after-0em75 { padding-bottom: 0.75em; }
+.hltr .p-after-1em { padding-bottom: 1.00em; }
+.hltr .p-after-1em25 { padding-bottom: 1.25em; }
+.hltr .p-after-1em50 { padding-bottom: 1.50em; }
+.hltr .p-after-1em75 { padding-bottom: 1.75em; }
+.hltr .p-after-2em { padding-bottom: 2.00em; }
+.hltr .p-after-2em50 { padding-bottom: 2.50em; }
+.hltr .p-after-3em { padding-bottom: 3.00em; }
+.hltr .p-after-4em { padding-bottom: 4.00em; }
+.hltr .p-after-5em { padding-bottom: 5.00em; }
+.hltr .p-after-5em25 { padding-bottom: 5.25em; }
+
+/* 行後留白：橫排用 */
+.vrtl .p-after-0,
+.vrtl .p-after-0em,
+.vrtl .p-after-000per { padding-left: 0; }
+
+/* 以％指定 */
+.vrtl .p-after-005per { padding-left: 5%; }
+.vrtl .p-after-010per { padding-left: 10%; }
+.vrtl .p-after-015per { padding-left: 15%; }
+.vrtl .p-after-020per { padding-left: 20%; }
+.vrtl .p-after-025per { padding-left: 25%; }
+.vrtl .p-after-030per { padding-left: 30%; }
+.vrtl .p-after-033per { padding-left: 33%; }
+.vrtl .p-after-040per { padding-left: 40%; }
+.vrtl .p-after-050per { padding-left: 50%; }
+.vrtl .p-after-060per { padding-left: 60%; }
+.vrtl .p-after-067per { padding-left: 67%; }
+.vrtl .p-after-070per { padding-left: 70%; }
+.vrtl .p-after-075per { padding-left: 75%; }
+.vrtl .p-after-080per { padding-left: 80%; }
+.vrtl .p-after-090per { padding-left: 90%; }
+
+/* 以文字數指定 */
+.vrtl .p-after-0em25 { padding-left: 0.25em; }
+.vrtl .p-after-0em50 { padding-left: 0.50em; }
+.vrtl .p-after-0em75 { padding-left: 0.75em; }
+.vrtl .p-after-1em { padding-left: 1.00em; }
+.vrtl .p-after-1em25 { padding-left: 1.25em; }
+.vrtl .p-after-1em50 { padding-left: 1.50em; }
+.vrtl .p-after-1em75 { padding-left: 1.75em; }
+.vrtl .p-after-2em { padding-left: 2.00em; }
+.vrtl .p-after-2em50 { padding-left: 2.50em; }
+.vrtl .p-after-3em { padding-left: 3.00em; }
+.vrtl .p-after-4em { padding-left: 4.00em; }
+.vrtl .p-after-5em { padding-left: 5.00em; }
+.vrtl .p-after-5em25 { padding-left: 5.25em; }
+
+/* 子元素排版方向改變時的對應 */
+/* .hltr .vrtl [class|="p-after"] { padding-bottom: 0; } */
+.hltr .vrtl .p-after-005per, .hltr .vrtl .p-after-010per, .hltr .vrtl .p-after-015per,
+.hltr .vrtl .p-after-020per, .hltr .vrtl .p-after-025per, .hltr .vrtl .p-after-030per,
+.hltr .vrtl .p-after-033per, .hltr .vrtl .p-after-040per, .hltr .vrtl .p-after-050per,
+.hltr .vrtl .p-after-060per, .hltr .vrtl .p-after-067per, .hltr .vrtl .p-after-070per,
+.hltr .vrtl .p-after-075per, .hltr .vrtl .p-after-080per, .hltr .vrtl .p-after-090per,
+.hltr .vrtl .p-after-0em25, .hltr .vrtl .p-after-0em50, .hltr .vrtl .p-after-0em75,
+.hltr .vrtl .p-after-1em, .hltr .vrtl .p-after-1em25, .hltr .vrtl .p-after-1em50,
+.hltr .vrtl .p-after-1em75, .hltr .vrtl .p-after-2em, .hltr .vrtl .p-after-2em50,
+.hltr .vrtl .p-after-3em, .hltr .vrtl .p-after-4em, .hltr .vrtl .p-after-5em,
+.hltr .vrtl .p-after-5em25 {
+ padding-bottom: 0;
+}
+/* .vrtl .hltr [class|="p-after"] { padding-left: 0; } */
+.vrtl .hltr .p-after-005per, .vrtl .hltr .p-after-010per, .vrtl .hltr .p-after-015per,
+.vrtl .hltr .p-after-020per, .vrtl .hltr .p-after-025per, .vrtl .hltr .p-after-030per,
+.vrtl .hltr .p-after-033per, .vrtl .hltr .p-after-040per, .vrtl .hltr .p-after-050per,
+.vrtl .hltr .p-after-060per, .vrtl .hltr .p-after-067per, .vrtl .hltr .p-after-070per,
+.vrtl .hltr .p-after-075per, .vrtl .hltr .p-after-080per, .vrtl .hltr .p-after-090per,
+.vrtl .hltr .p-after-0em25, .vrtl .hltr .p-after-0em50, .vrtl .hltr .p-after-0em75,
+.vrtl .hltr .p-after-1em, .vrtl .hltr .p-after-1em25, .vrtl .hltr .p-after-1em50,
+.vrtl .hltr .p-after-1em75, .vrtl .hltr .p-after-2em, .vrtl .hltr .p-after-2em50,
+.vrtl .hltr .p-after-3em, .vrtl .hltr .p-after-4em, .vrtl .hltr .p-after-5em,
+.vrtl .hltr .p-after-5em25 {
+ padding-left: 0;
+}
+
+
+/* 【邏輯方向指定】行長方向的尺寸
+----------------------------------------------------------------
+行長方向與行寬方向的尺寸指定，固定值與最大值不能
+使用於相同元素中
+
+※但可以如下使用在子元素中
+
+
+---------------------------------------------------------------- */
+.measure-auto { height: auto; width: auto; }
+
+/* 以％指定 */
+/* 橫排用 */
+.hltr .measure-010per, .vrtl .hltr .measure-010per { height: auto; width: 10%; }
+.hltr .measure-020per, .vrtl .hltr .measure-020per { height: auto; width: 20%; }
+.hltr .measure-025per, .vrtl .hltr .measure-025per { height: auto; width: 25%; }
+.hltr .measure-030per, .vrtl .hltr .measure-030per { height: auto; width: 30%; }
+.hltr .measure-033per, .vrtl .hltr .measure-033per { height: auto; width: 33%; }
+.hltr .measure-040per, .vrtl .hltr .measure-040per { height: auto; width: 40%; }
+.hltr .measure-050per, .vrtl .hltr .measure-050per { height: auto; width: 50%; }
+.hltr .measure-060per, .vrtl .hltr .measure-060per { height: auto; width: 60%; }
+.hltr .measure-067per, .vrtl .hltr .measure-067per { height: auto; width: 67%; }
+.hltr .measure-070per, .vrtl .hltr .measure-070per { height: auto; width: 70%; }
+.hltr .measure-075per, .vrtl .hltr .measure-075per { height: auto; width: 75%; }
+.hltr .measure-080per, .vrtl .hltr .measure-080per { height: auto; width: 80%; }
+.hltr .measure-090per, .vrtl .hltr .measure-090per { height: auto; width: 90%; }
+.hltr .measure-100per, .vrtl .hltr .measure-100per { height: auto; width: 100%; }
+/* 直排用 */
+.vrtl .measure-010per, .hltr .vrtl .measure-010per { height: 10%; width: auto; }
+.vrtl .measure-020per, .hltr .vrtl .measure-020per { height: 20%; width: auto; }
+.vrtl .measure-025per, .hltr .vrtl .measure-025per { height: 25%; width: auto; }
+.vrtl .measure-030per, .hltr .vrtl .measure-030per { height: 30%; width: auto; }
+.vrtl .measure-033per, .hltr .vrtl .measure-033per { height: 33%; width: auto; }
+.vrtl .measure-040per, .hltr .vrtl .measure-040per { height: 40%; width: auto; }
+.vrtl .measure-050per, .hltr .vrtl .measure-050per { height: 50%; width: auto; }
+.vrtl .measure-060per, .hltr .vrtl .measure-060per { height: 60%; width: auto; }
+.vrtl .measure-067per, .hltr .vrtl .measure-067per { height: 67%; width: auto; }
+.vrtl .measure-070per, .hltr .vrtl .measure-070per { height: 70%; width: auto; }
+.vrtl .measure-075per, .hltr .vrtl .measure-075per { height: 75%; width: auto; }
+.vrtl .measure-080per, .hltr .vrtl .measure-080per { height: 80%; width: auto; }
+.vrtl .measure-090per, .hltr .vrtl .measure-090per { height: 90%; width: auto; }
+.vrtl .measure-100per, .hltr .vrtl .measure-100per { height: 100%; width: auto; }
+
+/* 以文字數指定 */
+/* 橫排用 */
+.hltr .measure-0em25, .vrtl .hltr .measure-0em25 { height: auto; width: 0.25em; }
+.hltr .measure-0em50, .vrtl .hltr .measure-0em50 { height: auto; width: 0.50em; }
+.hltr .measure-0em75, .vrtl .hltr .measure-0em75 { height: auto; width: 0.75em; }
+.hltr .measure-1em, .vrtl .hltr .measure-1em { height: auto; width: 1.00em; }
+.hltr .measure-1em25, .vrtl .hltr .measure-1em25 { height: auto; width: 1.25em; }
+.hltr .measure-1em50, .vrtl .hltr .measure-1em50 { height: auto; width: 1.50em; }
+.hltr .measure-1em75, .vrtl .hltr .measure-1em75 { height: auto; width: 1.75em; }
+.hltr .measure-2em, .vrtl .hltr .measure-2em { height: auto; width: 2.00em; }
+.hltr .measure-2em50, .vrtl .hltr .measure-2em50 { height: auto; width: 2.50em; }
+.hltr .measure-3em, .vrtl .hltr .measure-3em { height: auto; width: 3.00em; }
+.hltr .measure-4em, .vrtl .hltr .measure-4em { height: auto; width: 4.00em; }
+.hltr .measure-5em, .vrtl .hltr .measure-5em { height: auto; width: 5.00em; }
+.hltr .measure-5em25, .vrtl .hltr .measure-5em25 { height: auto; width: 5.25em; }
+.hltr .measure-6em, .vrtl .hltr .measure-6em { height: auto; width: 6.00em; }
+.hltr .measure-7em, .vrtl .hltr .measure-7em { height: auto; width: 7.00em; }
+.hltr .measure-8em, .vrtl .hltr .measure-8em { height: auto; width: 8.00em; }
+.hltr .measure-8em75, .vrtl .hltr .measure-8em75 { height: auto; width: 8.75em; }
+.hltr .measure-9em, .vrtl .hltr .measure-9em { height: auto; width: 9.00em; }
+.hltr .measure-10em, .vrtl .hltr .measure-10em { height: auto; width: 10.00em; }
+.hltr .measure-11em, .vrtl .hltr .measure-11em { height: auto; width: 11.00em; }
+.hltr .measure-12em, .vrtl .hltr .measure-12em { height: auto; width: 12.00em; }
+.hltr .measure-13em, .vrtl .hltr .measure-13em { height: auto; width: 13.00em; }
+.hltr .measure-14em, .vrtl .hltr .measure-14em { height: auto; width: 14.00em; }
+.hltr .measure-15em, .vrtl .hltr .measure-15em { height: auto; width: 15.00em; }
+.hltr .measure-20em, .vrtl .hltr .measure-20em { height: auto; width: 20.00em; }
+.hltr .measure-30em, .vrtl .hltr .measure-30em { height: auto; width: 30.00em; }
+.hltr .measure-40em, .vrtl .hltr .measure-40em { height: auto; width: 40.00em; }
+/* 直排用 */
+.vrtl .measure-0em25, .hltr .vrtl .measure-0em25 { height: 0.25em; width: auto; }
+.vrtl .measure-0em50, .hltr .vrtl .measure-0em50 { height: 0.50em; width: auto; }
+.vrtl .measure-0em75, .hltr .vrtl .measure-0em75 { height: 0.75em; width: auto; }
+.vrtl .measure-1em, .hltr .vrtl .measure-1em { height: 1.00em; width: auto; }
+.vrtl .measure-1em25, .hltr .vrtl .measure-1em25 { height: 1.25em; width: auto; }
+.vrtl .measure-1em50, .hltr .vrtl .measure-1em50 { height: 1.50em; width: auto; }
+.vrtl .measure-1em75, .hltr .vrtl .measure-1em75 { height: 1.75em; width: auto; }
+.vrtl .measure-2em, .hltr .vrtl .measure-2em { height: 2.00em; width: auto; }
+.vrtl .measure-2em50, .hltr .vrtl .measure-2em50 { height: 2.50em; width: auto; }
+.vrtl .measure-3em, .hltr .vrtl .measure-3em { height: 3.00em; width: auto; }
+.vrtl .measure-4em, .hltr .vrtl .measure-4em { height: 4.00em; width: auto; }
+.vrtl .measure-5em, .hltr .vrtl .measure-5em { height: 5.00em; width: auto; }
+.vrtl .measure-5em25, .hltr .vrtl .measure-5em25 { height: 5.25em; width: auto; }
+.vrtl .measure-6em, .hltr .vrtl .measure-6em { height: 6.00em; width: auto; }
+.vrtl .measure-7em, .hltr .vrtl .measure-7em { height: 7.00em; width: auto; }
+.vrtl .measure-8em, .hltr .vrtl .measure-8em { height: 8.00em; width: auto; }
+.vrtl .measure-8em75, .hltr .vrtl .measure-8em75 { height: 8.75em; width: auto; }
+.vrtl .measure-9em, .hltr .vrtl .measure-9em { height: 9.00em; width: auto; }
+.vrtl .measure-10em, .hltr .vrtl .measure-10em { height: 10.00em; width: auto; }
+.vrtl .measure-11em, .hltr .vrtl .measure-11em { height: 11.00em; width: auto; }
+.vrtl .measure-12em, .hltr .vrtl .measure-12em { height: 12.00em; width: auto; }
+.vrtl .measure-13em, .hltr .vrtl .measure-13em { height: 13.00em; width: auto; }
+.vrtl .measure-14em, .hltr .vrtl .measure-14em { height: 14.00em; width: auto; }
+.vrtl .measure-15em, .hltr .vrtl .measure-15em { height: 15.00em; width: auto; }
+.vrtl .measure-20em, .hltr .vrtl .measure-20em { height: 20.00em; width: auto; }
+.vrtl .measure-30em, .hltr .vrtl .measure-30em { height: 30.00em; width: auto; }
+.vrtl .measure-40em, .hltr .vrtl .measure-40em { height: 40.00em; width: auto; }
+
+
+/* 【邏輯方向指定】行長方向的最大尺寸
+---------------------------------------------------------------- */
+.max-measure-none { max-height: none; max-width: none; }
+
+/* 以％指定 */
+/* 橫排用 */
+.hltr .max-measure-010per, .vrtl .hltr .max-measure-010per { max-height: none; max-width: 10%; }
+.hltr .max-measure-020per, .vrtl .hltr .max-measure-020per { max-height: none; max-width: 20%; }
+.hltr .max-measure-025per, .vrtl .hltr .max-measure-025per { max-height: none; max-width: 25%; }
+.hltr .max-measure-030per, .vrtl .hltr .max-measure-030per { max-height: none; max-width: 30%; }
+.hltr .max-measure-033per, .vrtl .hltr .max-measure-033per { max-height: none; max-width: 33%; }
+.hltr .max-measure-040per, .vrtl .hltr .max-measure-040per { max-height: none; max-width: 40%; }
+.hltr .max-measure-050per, .vrtl .hltr .max-measure-050per { max-height: none; max-width: 50%; }
+.hltr .max-measure-060per, .vrtl .hltr .max-measure-060per { max-height: none; max-width: 60%; }
+.hltr .max-measure-067per, .vrtl .hltr .max-measure-067per { max-height: none; max-width: 67%; }
+.hltr .max-measure-070per, .vrtl .hltr .max-measure-070per { max-height: none; max-width: 70%; }
+.hltr .max-measure-075per, .vrtl .hltr .max-measure-075per { max-height: none; max-width: 75%; }
+.hltr .max-measure-080per, .vrtl .hltr .max-measure-080per { max-height: none; max-width: 80%; }
+.hltr .max-measure-090per, .vrtl .hltr .max-measure-090per { max-height: none; max-width: 90%; }
+.hltr .max-measure-100per, .vrtl .hltr .max-measure-100per { max-height: none; max-width: 100%; }
+/* 直排用 */
+.vrtl .max-measure-010per, .hltr .vrtl .max-measure-010per { max-height: 10%; max-width: none; }
+.vrtl .max-measure-020per, .hltr .vrtl .max-measure-020per { max-height: 20%; max-width: none; }
+.vrtl .max-measure-025per, .hltr .vrtl .max-measure-025per { max-height: 25%; max-width: none; }
+.vrtl .max-measure-030per, .hltr .vrtl .max-measure-030per { max-height: 30%; max-width: none; }
+.vrtl .max-measure-033per, .hltr .vrtl .max-measure-033per { max-height: 33%; max-width: none; }
+.vrtl .max-measure-040per, .hltr .vrtl .max-measure-040per { max-height: 40%; max-width: none; }
+.vrtl .max-measure-050per, .hltr .vrtl .max-measure-050per { max-height: 50%; max-width: none; }
+.vrtl .max-measure-060per, .hltr .vrtl .max-measure-060per { max-height: 60%; max-width: none; }
+.vrtl .max-measure-067per, .hltr .vrtl .max-measure-067per { max-height: 67%; max-width: none; }
+.vrtl .max-measure-070per, .hltr .vrtl .max-measure-070per { max-height: 70%; max-width: none; }
+.vrtl .max-measure-075per, .hltr .vrtl .max-measure-075per { max-height: 75%; max-width: none; }
+.vrtl .max-measure-080per, .hltr .vrtl .max-measure-080per { max-height: 80%; max-width: none; }
+.vrtl .max-measure-090per, .hltr .vrtl .max-measure-090per { max-height: 90%; max-width: none; }
+.vrtl .max-measure-100per, .hltr .vrtl .max-measure-100per { max-height: 100%; max-width: none; }
+
+/* 以文字數指定 */
+/* 橫排用 */
+.hltr .max-measure-0em25, .vrtl .hltr .max-measure-0em25 { max-height: none; max-width: 0.25em; }
+.hltr .max-measure-0em50, .vrtl .hltr .max-measure-0em50 { max-height: none; max-width: 0.50em; }
+.hltr .max-measure-0em75, .vrtl .hltr .max-measure-0em75 { max-height: none; max-width: 0.75em; }
+.hltr .max-measure-1em, .vrtl .hltr .max-measure-1em { max-height: none; max-width: 1.00em; }
+.hltr .max-measure-1em25, .vrtl .hltr .max-measure-1em25 { max-height: none; max-width: 1.25em; }
+.hltr .max-measure-1em50, .vrtl .hltr .max-measure-1em50 { max-height: none; max-width: 1.50em; }
+.hltr .max-measure-1em75, .vrtl .hltr .max-measure-1em75 { max-height: none; max-width: 1.75em; }
+.hltr .max-measure-2em, .vrtl .hltr .max-measure-2em { max-height: none; max-width: 2.00em; }
+.hltr .max-measure-2em50, .vrtl .hltr .max-measure-2em50 { max-height: none; max-width: 2.50em; }
+.hltr .max-measure-3em, .vrtl .hltr .max-measure-3em { max-height: none; max-width: 3.00em; }
+.hltr .max-measure-4em, .vrtl .hltr .max-measure-4em { max-height: none; max-width: 4.00em; }
+.hltr .max-measure-5em, .vrtl .hltr .max-measure-5em { max-height: none; max-width: 5.00em; }
+.hltr .max-measure-5em25, .vrtl .hltr .max-measure-5em25 { max-height: none; max-width: 5.25em; }
+.hltr .max-measure-6em, .vrtl .hltr .max-measure-6em { max-height: none; max-width: 6.00em; }
+.hltr .max-measure-7em, .vrtl .hltr .max-measure-7em { max-height: none; max-width: 7.00em; }
+.hltr .max-measure-8em, .vrtl .hltr .max-measure-8em { max-height: none; max-width: 8.00em; }
+.hltr .max-measure-8em75, .vrtl .hltr .max-measure-8em75 { max-height: none; max-width: 8.75em; }
+.hltr .max-measure-9em, .vrtl .hltr .max-measure-9em { max-height: none; max-width: 9.00em; }
+.hltr .max-measure-10em, .vrtl .hltr .max-measure-10em { max-height: none; max-width: 10.00em; }
+.hltr .max-measure-11em, .vrtl .hltr .max-measure-11em { max-height: none; max-width: 11.00em; }
+.hltr .max-measure-12em, .vrtl .hltr .max-measure-12em { max-height: none; max-width: 12.00em; }
+.hltr .max-measure-13em, .vrtl .hltr .max-measure-13em { max-height: none; max-width: 13.00em; }
+.hltr .max-measure-14em, .vrtl .hltr .max-measure-14em { max-height: none; max-width: 14.00em; }
+.hltr .max-measure-15em, .vrtl .hltr .max-measure-15em { max-height: none; max-width: 15.00em; }
+.hltr .max-measure-20em, .vrtl .hltr .max-measure-20em { max-height: none; max-width: 20.00em; }
+.hltr .max-measure-30em, .vrtl .hltr .max-measure-30em { max-height: none; max-width: 30.00em; }
+.hltr .max-measure-40em, .vrtl .hltr .max-measure-40em { max-height: none; max-width: 40.00em; }
+/* 直排用 */
+.vrtl .max-measure-0em25, .hltr .vrtl .max-measure-0em25 { max-height: 0.25em; max-width: none; }
+.vrtl .max-measure-0em50, .hltr .vrtl .max-measure-0em50 { max-height: 0.50em; max-width: none; }
+.vrtl .max-measure-0em75, .hltr .vrtl .max-measure-0em75 { max-height: 0.75em; max-width: none; }
+.vrtl .max-measure-1em, .hltr .vrtl .max-measure-1em { max-height: 1.00em; max-width: none; }
+.vrtl .max-measure-1em25, .hltr .vrtl .max-measure-1em25 { max-height: 1.25em; max-width: none; }
+.vrtl .max-measure-1em50, .hltr .vrtl .max-measure-1em50 { max-height: 1.50em; max-width: none; }
+.vrtl .max-measure-1em75, .hltr .vrtl .max-measure-1em75 { max-height: 1.75em; max-width: none; }
+.vrtl .max-measure-2em, .hltr .vrtl .max-measure-2em { max-height: 2.00em; max-width: none; }
+.vrtl .max-measure-2em50, .hltr .vrtl .max-measure-2em50 { max-height: 2.50em; max-width: none; }
+.vrtl .max-measure-3em, .hltr .vrtl .max-measure-3em { max-height: 3.00em; max-width: none; }
+.vrtl .max-measure-4em, .hltr .vrtl .max-measure-4em { max-height: 4.00em; max-width: none; }
+.vrtl .max-measure-5em, .hltr .vrtl .max-measure-5em { max-height: 5.00em; max-width: none; }
+.vrtl .max-measure-5em25, .hltr .vrtl .max-measure-5em25 { max-height: 5.25em; max-width: none; }
+.vrtl .max-measure-6em, .hltr .vrtl .max-measure-6em { max-height: 6.00em; max-width: none; }
+.vrtl .max-measure-7em, .hltr .vrtl .max-measure-7em { max-height: 7.00em; max-width: none; }
+.vrtl .max-measure-8em, .hltr .vrtl .max-measure-8em { max-height: 8.00em; max-width: none; }
+.vrtl .max-measure-8em75, .hltr .vrtl .max-measure-8em75 { max-height: 8.75em; max-width: none; }
+.vrtl .max-measure-9em, .hltr .vrtl .max-measure-9em { max-height: 9.00em; max-width: none; }
+.vrtl .max-measure-10em, .hltr .vrtl .max-measure-10em { max-height: 10.00em; max-width: none; }
+.vrtl .max-measure-11em, .hltr .vrtl .max-measure-11em { max-height: 11.00em; max-width: none; }
+.vrtl .max-measure-12em, .hltr .vrtl .max-measure-12em { max-height: 12.00em; max-width: none; }
+.vrtl .max-measure-13em, .hltr .vrtl .max-measure-13em { max-height: 13.00em; max-width: none; }
+.vrtl .max-measure-14em, .hltr .vrtl .max-measure-14em { max-height: 14.00em; max-width: none; }
+.vrtl .max-measure-15em, .hltr .vrtl .max-measure-15em { max-height: 15.00em; max-width: none; }
+.vrtl .max-measure-20em, .hltr .vrtl .max-measure-20em { max-height: 20.00em; max-width: none; }
+.vrtl .max-measure-30em, .hltr .vrtl .max-measure-30em { max-height: 30.00em; max-width: none; }
+.vrtl .max-measure-40em, .hltr .vrtl .max-measure-40em { max-height: 40.00em; max-width: none; }
+
+
+/* 【邏輯方向指定】行幅方向的尺寸
+---------------------------------------------------------------- */
+.extent-auto { height: auto; width: auto; }
+
+/* 以％指定 */
+/* 橫排用 */
+.hltr .extent-010per, .vrtl .hltr .extent-010per { height: 10%; width: auto; }
+.hltr .extent-020per, .vrtl .hltr .extent-020per { height: 20%; width: auto; }
+.hltr .extent-025per, .vrtl .hltr .extent-025per { height: 25%; width: auto; }
+.hltr .extent-030per, .vrtl .hltr .extent-030per { height: 30%; width: auto; }
+.hltr .extent-033per, .vrtl .hltr .extent-033per { height: 33%; width: auto; }
+.hltr .extent-040per, .vrtl .hltr .extent-040per { height: 40%; width: auto; }
+.hltr .extent-050per, .vrtl .hltr .extent-050per { height: 50%; width: auto; }
+.hltr .extent-060per, .vrtl .hltr .extent-060per { height: 60%; width: auto; }
+.hltr .extent-067per, .vrtl .hltr .extent-067per { height: 67%; width: auto; }
+.hltr .extent-070per, .vrtl .hltr .extent-070per { height: 70%; width: auto; }
+.hltr .extent-075per, .vrtl .hltr .extent-075per { height: 75%; width: auto; }
+.hltr .extent-080per, .vrtl .hltr .extent-080per { height: 80%; width: auto; }
+.hltr .extent-090per, .vrtl .hltr .extent-090per { height: 90%; width: auto; }
+.hltr .extent-100per, .vrtl .hltr .extent-100per { height: 100%; width: auto; }
+/* 直排用 */
+.vrtl .extent-010per, .hltr .vrtl .extent-010per { height: auto; width: 10%; }
+.vrtl .extent-020per, .hltr .vrtl .extent-020per { height: auto; width: 20%; }
+.vrtl .extent-025per, .hltr .vrtl .extent-025per { height: auto; width: 25%; }
+.vrtl .extent-030per, .hltr .vrtl .extent-030per { height: auto; width: 30%; }
+.vrtl .extent-033per, .hltr .vrtl .extent-033per { height: auto; width: 33%; }
+.vrtl .extent-040per, .hltr .vrtl .extent-040per { height: auto; width: 40%; }
+.vrtl .extent-050per, .hltr .vrtl .extent-050per { height: auto; width: 50%; }
+.vrtl .extent-060per, .hltr .vrtl .extent-060per { height: auto; width: 60%; }
+.vrtl .extent-067per, .hltr .vrtl .extent-067per { height: auto; width: 67%; }
+.vrtl .extent-070per, .hltr .vrtl .extent-070per { height: auto; width: 70%; }
+.vrtl .extent-075per, .hltr .vrtl .extent-075per { height: auto; width: 75%; }
+.vrtl .extent-080per, .hltr .vrtl .extent-080per { height: auto; width: 80%; }
+.vrtl .extent-090per, .hltr .vrtl .extent-090per { height: auto; width: 90%; }
+.vrtl .extent-100per, .hltr .vrtl .extent-100per { height: auto; width: 100%; }
+
+/* 以文字數指定 */
+/* 橫排用 */
+.hltr .extent-0em25, .vrtl .hltr .extent-0em25 { height: 0.25em; width: auto; }
+.hltr .extent-0em50, .vrtl .hltr .extent-0em50 { height: 0.50em; width: auto; }
+.hltr .extent-0em75, .vrtl .hltr .extent-0em75 { height: 0.75em; width: auto; }
+.hltr .extent-1em, .vrtl .hltr .extent-1em { height: 1.00em; width: auto; }
+.hltr .extent-1em25, .vrtl .hltr .extent-1em25 { height: 1.25em; width: auto; }
+.hltr .extent-1em50, .vrtl .hltr .extent-1em50 { height: 1.50em; width: auto; }
+.hltr .extent-1em75, .vrtl .hltr .extent-1em75 { height: 1.75em; width: auto; }
+.hltr .extent-2em, .vrtl .hltr .extent-2em { height: 2.00em; width: auto; }
+.hltr .extent-2em50, .vrtl .hltr .extent-2em50 { height: 2.50em; width: auto; }
+.hltr .extent-3em, .vrtl .hltr .extent-3em { height: 3.00em; width: auto; }
+.hltr .extent-4em, .vrtl .hltr .extent-4em { height: 4.00em; width: auto; }
+.hltr .extent-5em, .vrtl .hltr .extent-5em { height: 5.00em; width: auto; }
+.hltr .extent-5em25, .vrtl .hltr .extent-5em25 { height: 5.25em; width: auto; }
+.hltr .extent-6em, .vrtl .hltr .extent-6em { height: 6.00em; width: auto; }
+.hltr .extent-7em, .vrtl .hltr .extent-7em { height: 7.00em; width: auto; }
+.hltr .extent-8em, .vrtl .hltr .extent-8em { height: 8.00em; width: auto; }
+.hltr .extent-8em75, .vrtl .hltr .extent-8em75 { height: 8.75em; width: auto; }
+.hltr .extent-9em, .vrtl .hltr .extent-9em { height: 9.00em; width: auto; }
+.hltr .extent-10em, .vrtl .hltr .extent-10em { height: 10.00em; width: auto; }
+.hltr .extent-11em, .vrtl .hltr .extent-11em { height: 11.00em; width: auto; }
+.hltr .extent-12em, .vrtl .hltr .extent-12em { height: 12.00em; width: auto; }
+.hltr .extent-13em, .vrtl .hltr .extent-13em { height: 13.00em; width: auto; }
+.hltr .extent-14em, .vrtl .hltr .extent-14em { height: 14.00em; width: auto; }
+.hltr .extent-15em, .vrtl .hltr .extent-15em { height: 15.00em; width: auto; }
+.hltr .extent-20em, .vrtl .hltr .extent-20em { height: 20.00em; width: auto; }
+.hltr .extent-30em, .vrtl .hltr .extent-30em { height: 30.00em; width: auto; }
+.hltr .extent-40em, .vrtl .hltr .extent-40em { height: 40.00em; width: auto; }
+/* 直排用 */
+.vrtl .extent-0em25, .hltr .vrtl .extent-0em25 { height: auto; width: 0.25em; }
+.vrtl .extent-0em50, .hltr .vrtl .extent-0em50 { height: auto; width: 0.50em; }
+.vrtl .extent-0em75, .hltr .vrtl .extent-0em75 { height: auto; width: 0.75em; }
+.vrtl .extent-1em, .hltr .vrtl .extent-1em { height: auto; width: 1.00em; }
+.vrtl .extent-1em25, .hltr .vrtl .extent-1em25 { height: auto; width: 1.25em; }
+.vrtl .extent-1em50, .hltr .vrtl .extent-1em50 { height: auto; width: 1.50em; }
+.vrtl .extent-1em75, .hltr .vrtl .extent-1em75 { height: auto; width: 1.75em; }
+.vrtl .extent-2em, .hltr .vrtl .extent-2em { height: auto; width: 2.00em; }
+.vrtl .extent-2em50, .hltr .vrtl .extent-2em50 { height: auto; width: 2.50em; }
+.vrtl .extent-3em, .hltr .vrtl .extent-3em { height: auto; width: 3.00em; }
+.vrtl .extent-4em, .hltr .vrtl .extent-4em { height: auto; width: 4.00em; }
+.vrtl .extent-5em, .hltr .vrtl .extent-5em { height: auto; width: 5.00em; }
+.vrtl .extent-5em25, .hltr .vrtl .extent-5em25 { height: auto; width: 5.25em; }
+.vrtl .extent-6em, .hltr .vrtl .extent-6em { height: auto; width: 6.00em; }
+.vrtl .extent-7em, .hltr .vrtl .extent-7em { height: auto; width: 7.00em; }
+.vrtl .extent-8em, .hltr .vrtl .extent-8em { height: auto; width: 8.00em; }
+.vrtl .extent-8em75, .hltr .vrtl .extent-8em75 { height: auto; width: 8.75em; }
+.vrtl .extent-9em, .hltr .vrtl .extent-9em { height: auto; width: 9.00em; }
+.vrtl .extent-10em, .hltr .vrtl .extent-10em { height: auto; width: 10.00em; }
+.vrtl .extent-11em, .hltr .vrtl .extent-11em { height: auto; width: 11.00em; }
+.vrtl .extent-12em, .hltr .vrtl .extent-12em { height: auto; width: 12.00em; }
+.vrtl .extent-13em, .hltr .vrtl .extent-13em { height: auto; width: 13.00em; }
+.vrtl .extent-14em, .hltr .vrtl .extent-14em { height: auto; width: 14.00em; }
+.vrtl .extent-15em, .hltr .vrtl .extent-15em { height: auto; width: 15.00em; }
+.vrtl .extent-20em, .hltr .vrtl .extent-20em { height: auto; width: 20.00em; }
+.vrtl .extent-30em, .hltr .vrtl .extent-30em { height: auto; width: 30.00em; }
+.vrtl .extent-40em, .hltr .vrtl .extent-40em { height: auto; width: 40.00em; }
+
+
+/* 【邏輯方向指定】行幅方向的最大尺寸
+---------------------------------------------------------------- */
+.max-extent-none { max-height: none; max-width: none; }
+
+/* 以％指定 */
+/* 橫排用 */
+.hltr .max-extent-010per, .vrtl .hltr .max-extent-010per { max-height: 10%; max-width: none; }
+.hltr .max-extent-020per, .vrtl .hltr .max-extent-020per { max-height: 20%; max-width: none; }
+.hltr .max-extent-025per, .vrtl .hltr .max-extent-025per { max-height: 25%; max-width: none; }
+.hltr .max-extent-030per, .vrtl .hltr .max-extent-030per { max-height: 30%; max-width: none; }
+.hltr .max-extent-033per, .vrtl .hltr .max-extent-033per { max-height: 33%; max-width: none; }
+.hltr .max-extent-040per, .vrtl .hltr .max-extent-040per { max-height: 40%; max-width: none; }
+.hltr .max-extent-050per, .vrtl .hltr .max-extent-050per { max-height: 50%; max-width: none; }
+.hltr .max-extent-060per, .vrtl .hltr .max-extent-060per { max-height: 60%; max-width: none; }
+.hltr .max-extent-067per, .vrtl .hltr .max-extent-067per { max-height: 67%; max-width: none; }
+.hltr .max-extent-070per, .vrtl .hltr .max-extent-070per { max-height: 70%; max-width: none; }
+.hltr .max-extent-075per, .vrtl .hltr .max-extent-075per { max-height: 75%; max-width: none; }
+.hltr .max-extent-080per, .vrtl .hltr .max-extent-080per { max-height: 80%; max-width: none; }
+.hltr .max-extent-090per, .vrtl .hltr .max-extent-090per { max-height: 90%; max-width: none; }
+.hltr .max-extent-100per, .vrtl .hltr .max-extent-100per { max-height: 100%; max-width: none; }
+/* 直排用 */
+.vrtl .max-extent-010per, .hltr .vrtl .max-extent-010per { max-height: none; max-width: 10%; }
+.vrtl .max-extent-020per, .hltr .vrtl .max-extent-020per { max-height: none; max-width: 20%; }
+.vrtl .max-extent-025per, .hltr .vrtl .max-extent-025per { max-height: none; max-width: 25%; }
+.vrtl .max-extent-030per, .hltr .vrtl .max-extent-030per { max-height: none; max-width: 30%; }
+.vrtl .max-extent-033per, .hltr .vrtl .max-extent-033per { max-height: none; max-width: 33%; }
+.vrtl .max-extent-040per, .hltr .vrtl .max-extent-040per { max-height: none; max-width: 40%; }
+.vrtl .max-extent-050per, .hltr .vrtl .max-extent-050per { max-height: none; max-width: 50%; }
+.vrtl .max-extent-060per, .hltr .vrtl .max-extent-060per { max-height: none; max-width: 60%; }
+.vrtl .max-extent-067per, .hltr .vrtl .max-extent-067per { max-height: none; max-width: 67%; }
+.vrtl .max-extent-070per, .hltr .vrtl .max-extent-070per { max-height: none; max-width: 70%; }
+.vrtl .max-extent-075per, .hltr .vrtl .max-extent-075per { max-height: none; max-width: 75%; }
+.vrtl .max-extent-080per, .hltr .vrtl .max-extent-080per { max-height: none; max-width: 80%; }
+.vrtl .max-extent-090per, .hltr .vrtl .max-extent-090per { max-height: none; max-width: 90%; }
+.vrtl .max-extent-100per, .hltr .vrtl .max-extent-100per { max-height: none; max-width: 100%; }
+
+/* 以文字數指定 */
+/* 橫排用 */
+.hltr .max-extent-0em25, .vrtl .hltr .max-extent-0em25 { max-height: 0.25em; max-width: none; }
+.hltr .max-extent-0em50, .vrtl .hltr .max-extent-0em50 { max-height: 0.50em; max-width: none; }
+.hltr .max-extent-0em75, .vrtl .hltr .max-extent-0em75 { max-height: 0.75em; max-width: none; }
+.hltr .max-extent-1em, .vrtl .hltr .max-extent-1em { max-height: 1.00em; max-width: none; }
+.hltr .max-extent-1em25, .vrtl .hltr .max-extent-1em25 { max-height: 1.25em; max-width: none; }
+.hltr .max-extent-1em50, .vrtl .hltr .max-extent-1em50 { max-height: 1.50em; max-width: none; }
+.hltr .max-extent-1em75, .vrtl .hltr .max-extent-1em75 { max-height: 1.75em; max-width: none; }
+.hltr .max-extent-2em, .vrtl .hltr .max-extent-2em { max-height: 2.00em; max-width: none; }
+.hltr .max-extent-2em50, .vrtl .hltr .max-extent-2em50 { max-height: 2.50em; max-width: none; }
+.hltr .max-extent-3em, .vrtl .hltr .max-extent-3em { max-height: 3.00em; max-width: none; }
+.hltr .max-extent-4em, .vrtl .hltr .max-extent-4em { max-height: 4.00em; max-width: none; }
+.hltr .max-extent-5em, .vrtl .hltr .max-extent-5em { max-height: 5.00em; max-width: none; }
+.hltr .max-extent-5em25, .vrtl .hltr .max-extent-5em25 { max-height: 5.25em; max-width: none; }
+.hltr .max-extent-6em, .vrtl .hltr .max-extent-6em { max-height: 6.00em; max-width: none; }
+.hltr .max-extent-7em, .vrtl .hltr .max-extent-7em { max-height: 7.00em; max-width: none; }
+.hltr .max-extent-8em, .vrtl .hltr .max-extent-8em { max-height: 8.00em; max-width: none; }
+.hltr .max-extent-8em75, .vrtl .hltr .max-extent-8em75 { max-height: 8.75em; max-width: none; }
+.hltr .max-extent-9em, .vrtl .hltr .max-extent-9em { max-height: 9.00em; max-width: none; }
+.hltr .max-extent-10em, .vrtl .hltr .max-extent-10em { max-height: 10.00em; max-width: none; }
+.hltr .max-extent-11em, .vrtl .hltr .max-extent-11em { max-height: 11.00em; max-width: none; }
+.hltr .max-extent-12em, .vrtl .hltr .max-extent-12em { max-height: 12.00em; max-width: none; }
+.hltr .max-extent-13em, .vrtl .hltr .max-extent-13em { max-height: 13.00em; max-width: none; }
+.hltr .max-extent-14em, .vrtl .hltr .max-extent-14em { max-height: 14.00em; max-width: none; }
+.hltr .max-extent-15em, .vrtl .hltr .max-extent-15em { max-height: 15.00em; max-width: none; }
+.hltr .max-extent-20em, .vrtl .hltr .max-extent-20em { max-height: 20.00em; max-width: none; }
+.hltr .max-extent-30em, .vrtl .hltr .max-extent-30em { max-height: 30.00em; max-width: none; }
+.hltr .max-extent-40em, .vrtl .hltr .max-extent-40em { max-height: 40.00em; max-width: none; }
+/* 直排用 */
+.vrtl .max-extent-0em25, .hltr .vrtl .max-extent-0em25 { max-height: none; max-width: 0.25em; }
+.vrtl .max-extent-0em50, .hltr .vrtl .max-extent-0em50 { max-height: none; max-width: 0.50em; }
+.vrtl .max-extent-0em75, .hltr .vrtl .max-extent-0em75 { max-height: none; max-width: 0.75em; }
+.vrtl .max-extent-1em, .hltr .vrtl .max-extent-1em { max-height: none; max-width: 1.00em; }
+.vrtl .max-extent-1em25, .hltr .vrtl .max-extent-1em25 { max-height: none; max-width: 1.25em; }
+.vrtl .max-extent-1em50, .hltr .vrtl .max-extent-1em50 { max-height: none; max-width: 1.50em; }
+.vrtl .max-extent-1em75, .hltr .vrtl .max-extent-1em75 { max-height: none; max-width: 1.75em; }
+.vrtl .max-extent-2em, .hltr .vrtl .max-extent-2em { max-height: none; max-width: 2.00em; }
+.vrtl .max-extent-2em50, .hltr .vrtl .max-extent-2em50 { max-height: none; max-width: 2.50em; }
+.vrtl .max-extent-3em, .hltr .vrtl .max-extent-3em { max-height: none; max-width: 3.00em; }
+.vrtl .max-extent-4em, .hltr .vrtl .max-extent-4em { max-height: none; max-width: 4.00em; }
+.vrtl .max-extent-5em, .hltr .vrtl .max-extent-5em { max-height: none; max-width: 5.00em; }
+.vrtl .max-extent-5em25, .hltr .vrtl .max-extent-5em25 { max-height: none; max-width: 5.25em; }
+.vrtl .max-extent-6em, .hltr .vrtl .max-extent-6em { max-height: none; max-width: 6.00em; }
+.vrtl .max-extent-7em, .hltr .vrtl .max-extent-7em { max-height: none; max-width: 7.00em; }
+.vrtl .max-extent-8em, .hltr .vrtl .max-extent-8em { max-height: none; max-width: 8.00em; }
+.vrtl .max-extent-8em75, .hltr .vrtl .max-extent-8em75 { max-height: none; max-width: 8.75em; }
+.vrtl .max-extent-9em, .hltr .vrtl .max-extent-9em { max-height: none; max-width: 9.00em; }
+.vrtl .max-extent-10em, .hltr .vrtl .max-extent-10em { max-height: none; max-width: 10.00em; }
+.vrtl .max-extent-11em, .hltr .vrtl .max-extent-11em { max-height: none; max-width: 11.00em; }
+.vrtl .max-extent-12em, .hltr .vrtl .max-extent-12em { max-height: none; max-width: 12.00em; }
+.vrtl .max-extent-13em, .hltr .vrtl .max-extent-13em { max-height: none; max-width: 13.00em; }
+.vrtl .max-extent-14em, .hltr .vrtl .max-extent-14em { max-height: none; max-width: 14.00em; }
+.vrtl .max-extent-15em, .hltr .vrtl .max-extent-15em { max-height: none; max-width: 15.00em; }
+.vrtl .max-extent-20em, .hltr .vrtl .max-extent-20em { max-height: none; max-width: 20.00em; }
+.vrtl .max-extent-30em, .hltr .vrtl .max-extent-30em { max-height: none; max-width: 30.00em; }
+.vrtl .max-extent-40em, .hltr .vrtl .max-extent-40em { max-height: none; max-width: 40.00em; }
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-check.css" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-check.css"
new file mode 100644
index 0000000..63582da
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-check.css"
@@ -0,0 +1,91 @@
+@charset "UTF-8";
+
+
+/* 檔案資訊
+----------------------------------------------------------------
+【内容】
+確認用樣式表
+
+【CSS檔案版本】
+ver.1
+
+【細節】
+・指定Windows用字形
+
+【更新紀錄】
+2016/10/13 ver.1.0b
+・初版
+---------------------------------------------------------------- */
+
+
+/* -------------------------------------------------------------
+ * 指定Windows用字形
+ * ------------------------------------------------------------- */
+
+/* 指定字型
+---------------------------------------------------------------- */
+/* 横排用 */
+@font-face {
+ font-family: "serif-tw";
+ src: local("新細明體");
+}
+@font-face {
+ font-family: "sans-serif-tw";
+ src: local("微軟正黑體");
+}
+@font-face {
+ font-family: "cursive-tw";
+ src: local("標楷體");
+}
+/* 直排用 */
+@font-face {
+ font-family: "serif-tw-v";
+ src: local("@新細明體");
+}
+@font-face {
+ font-family: "sans-serif-tw-v";
+ src: local("@微軟正黑體");
+}
+@font-face {
+ font-family: "cursive-tw-v";
+ src: local("@標楷體");
+}
+
+/* 依排版方向設定預設字型
+----------------------------------------------------------------
+在不需要透過@指定字型前，
+改變排版方向時優先以明體顯示（字體不會繼承）
+---------------------------------------------------------------- */
+.hltr { font-family: serif-tw, serif; }
+.vrtl { font-family: serif-tw-v, serif-tw, serif; }
+
+/* 對應內文排版方向不同時 */
+.vrtl .hltr { font-family: serif-tw, serif; }
+.hltr .vrtl { font-family: serif-tw-v, serif-tw, serif; }
+
+
+/* 指定字型
+---------------------------------------------------------------- */
+/* 横排用 */
+.hltr .mfont { font-family: serif-tw, serif; }
+.hltr .gfont { font-family: sans-serif-tw, sans-serif;}
+.hltr .kfont { font-family: cursive-tw, cursive;}
+
+/* 直排用 */
+.vrtl .mfont { font-family: serif-tw-v, serif-tw, serif; }
+.vrtl .gfont { font-family: sans-serif-tw-v, sans-serif-tw, sans-serif; }
+.vrtl .kfont { font-family: cursive-tw-v, cursive-tw, cursive; }
+
+/* 對應內文排版方向不同時 */
+/* 直排中的橫排用 */
+.vrtl .hltr .mfont { font-family: serif-tw, serif; }
+.vrtl .hltr .gfont { font-family: sans-serif-tw, sans-serif; }
+.vrtl .hltr .kfont { font-family: cursive-tw, cursive; }
+
+/* 橫排中的直排用 */
+.hltr .vrtl .mfont { font-family: serif-tw-v, serif-tw, serif; }
+.hltr .vrtl .gfont { font-family: sans-serif-tw-v, sans-serif-tw, sans-serif; }
+.hltr .vrtl .kfont { font-family: cursive-tw-v, cursive-tw, cursive; }
+
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-reset.css" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-reset.css"
new file mode 100644
index 0000000..1bc4c4d
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-reset.css"
@@ -0,0 +1,81 @@
+@charset "UTF-8";
+
+
+/* 檔案資訊
+----------------------------------------------------------------
+【内容】
+重設CSS
+
+【CSS檔案版本】
+ver.1
+
+【細節】
+・css reset
+
+【更新紀錄】
+2016/10/13 ver.1.0b
+・初版
+---------------------------------------------------------------- */
+
+
+/* css reset
+---------------------------------------------------------------- */
+body {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ line-height: 1.75;
+ background: transparent;
+
+ word-spacing: normal;
+ letter-spacing: normal;
+ white-space: normal;
+ word-wrap: break-word;
+ text-align: justify;
+
+ -webkit-line-break: normal;
+ -webkit-word-break: normal;
+ -webkit-hyphens: auto;
+ -webkit-text-underline-position: under left;
+}
+div,p {
+ display: block;
+ width: auto;
+ height: auto;
+ margin: 0;
+ padding: 0;
+}
+body,div,p {
+ text-indent: 0;
+}
+body > p,
+div > p {
+ text-indent: inherit;
+}
+h1,h2,h3,h4,h5,h6 {
+ display: block;
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ font-weight: inherit;
+ background: transparent;
+}
+img {
+ width: auto;
+ height: auto;
+ margin: 0;
+ padding: 0;
+ border: none;
+ vertical-align: baseline;
+ background: transparent;
+}
+a {
+ font-style: inherit;
+ font-weight: inherit;
+ text-decoration: inherit;
+ color: inherit;
+ background: transparent;
+}
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-standard.css" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-standard.css"
new file mode 100644
index 0000000..e036bec
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/style/style-standard.css"
@@ -0,0 +1,1554 @@
+@charset "UTF-8";
+
+
+/* ファイル情報
+----------------------------------------------------------------
+/* 檔案資訊
+全作品共通の基本スタイル
+
+【CSS檔案版本】
+ver. 1
+
+【細節】
+・設定排版方向
+・設定html
+・Box的種類
+・設定換頁
+・行的對齊
+・Block元素的位置對齊
+・Inline元素的位置對齊
+・設定連結
+・注釋
+・缺字圖片
+・設定圖片滿版顯示
+・縱中橫排
+・文字轉向
+・上標字・下標字
+・行距
+・文字間隔
+・指定字型
+・粗體字
+・斜體字
+・文字色彩
+・背景色彩
+・文字色彩白黒反轉
+・分隔線
+・刪除線
+・側線與底線
+・外框線
+・框線
+・框線色
+・行頭縮排
+・行頭凸排
+・段落縮排、提排
+・外圍邊界（Margin）
+・內圍留白（Padding）
+・高度
+・高度的最大値
+・寬度
+・寬度的最大値
+・最大尺寸
+・避頭點規則
+・自動換行規則
+・長單字的換行規則
+・【参考】文繞圖
+
+【更新紀錄】
+2016/10/13 ver.1.0b
+・初版
+---------------------------------------------------------------- */
+
+
+
+/* 設定排版方向
+---------------------------------------------------------------- */
+/* 橫排用 */
+html,
+.hltr {
+ -webkit-writing-mode: horizontal-tb;
+}
+/* 直排用 */
+.vrtl {
+ -webkit-writing-mode: vertical-rl;
+}
+
+
+
+/* 設定html
+----------------------------------------------------------------
+僅設定預設字體
+---------------------------------------------------------------- */
+html {
+ font-family: serif-tw, serif;
+}
+
+
+/* Box的種類
+---------------------------------------------------------------- */
+.display-none {
+ display: none;
+}
+.display-inline {
+ display: inline;
+}
+.display-inline-block {
+ display: inline-block;
+}
+.display-block {
+ display: block;
+}
+
+
+/* 設定換頁
+----------------------------------------------------------------
+考量到各裝置的支援程度
+若要換頁，原則上請切為兩個檔案
+
+但在每一章頁數少時，為了增加檔案數量
+則可能會使用到以下語法來強制換頁
+---------------------------------------------------------------- */
+/* 在指定區塊後換頁 */
+.pagebreak {
+ page-break-after: always;
+}
+/* 在指定區塊前換頁 */
+.pagebreak-before {
+ page-break-before: always;
+}
+/* 於指定區塊前後換頁 */
+.pagebreak-both {
+ page-break-before: always;
+ page-break-after: always;
+}
+
+
+/* 行的對齊
+----------------------------------------------------------------
+內文原則上使用「text-align: justify;」
+但若是不喜歡強制兩端對齊的話，請手動設定為以下的「align-start」
+本檔案裡不包括最後一行也強制對齊排列的語法
+---------------------------------------------------------------- */
+/* 對齊行頭 */
+.align-left,
+.align-start {
+ text-align: left;
+}
+/* 置中排列 */
+.align-center {
+ text-align: center;
+}
+/* 對齊行末 */
+.align-right,
+.align-end {
+ text-align: right;
+}
+/* 對齊兩端（最後一行對齊行頭） */
+.align-justify {
+ text-align: justify;
+}
+
+
+
+/* Block元素的位置對齊
+---------------------------------------------------------------- */
+/* 絕對方向（橫排只能用於左右、直排只能用於上下方向） */
+.block-align-left { margin: 0 auto 0 0; }
+.block-align-center { margin: 0 auto; }
+.block-align-right { margin: 0 0 0 auto; }
+.block-align-top { margin: 0 0 auto 0; }
+.block-align-middle { margin: auto 0; }
+.block-align-bottom { margin: auto 0 0 0; }
+
+/* 邏輯方向（行頭-置中-行末） */
+/* 橫排用 */
+.hltr .block-align-start { margin: 0 auto 0 0; }
+.hltr .block-align-center { margin: 0 auto; }
+.hltr .block-align-end { margin: 0 0 0 auto; }
+
+/* 直排用 */
+.vrtl .block-align-start { margin: 0 0 auto 0; }
+.vrtl .block-align-center { margin: auto 0; }
+.vrtl .block-align-end { margin: auto 0 0 0; }
+
+
+/* Inline元素的位置對齊
+---------------------------------------------------------------- */
+.valign-inherit { vertical-align: inherit; }
+.valign-baseline { vertical-align: baseline; }
+.valign-sub { vertical-align: sub; }
+.valign-super { vertical-align: super; }
+.valign-top { vertical-align: top; }
+.valign-text-top { vertical-align: text-top; }
+.valign-middle { vertical-align: middle; }
+.valign-bottom { vertical-align: bottom; }
+.valign-text-bottom { vertical-align: text-bottom; }
+
+
+/* 設定連結
+---------------------------------------------------------------- */
+/* 基本設定 */
+/* 橫排：底線 直排：左線 */
+.hltr a {
+ text-decoration: underline;
+}
+.vrtl a {
+ text-decoration: underline;
+}
+/* 連結文字色彩（預設值為藍色） */
+a:link,
+a:visited,
+a:hover,
+a:focus,
+a:active {
+ color: #0000ff;
+}
+
+
+/* 注釋
+---------------------------------------------------------------- */
+/* 注釋符號的文字尺寸 */
+.key,
+.ref {
+ font-size: smaller;
+ vertical-align: super;
+}
+
+
+/* 缺字圖片
+---------------------------------------------------------------- */
+img.gaiji,
+img.gaiji-line,
+img.gaiji-wide {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ background: transparent;
+}
+img.gaiji {
+ width: 1em;
+ height: 1em;
+}
+img.gaiji-line {
+ width: 1em;
+ height: auto;
+}
+img.gaiji-wide {
+ width: auto;
+ height: 1em;
+}
+/* 缺字圖片的基準線 */
+.hltr img.gaiji,
+.hltr img.gaiji-line,
+.hltr img.gaiji-wide {
+ vertical-align: text-bottom;
+}
+.vrtl img.gaiji,
+.vrtl img.gaiji-line,
+.vrtl img.gaiji-wide {
+ vertical-align: baseline;
+}
+
+
+/* 設定圖片滿版顯示
+----------------------------------------------------------------
+使用「img.fit」
+為了能夠配合指定尺寸，所以於CSS檔案上不以img.fit記載
+
+例：
+---------------------------------------------------------------- */
+.fit {
+ display: inline-block;
+ page-break-inside: avoid;
+ max-height: 100%;
+ max-width: 100%;
+}
+
+/* 圖片的基準線 */
+.hltr .fit {
+ vertical-align: top;
+}
+.vrtl .fit {
+ vertical-align: baseline;
+}
+
+
+/* 縱中橫排
+---------------------------------------------------------------- */
+.tcy {
+ -webkit-text-combine: horizontal;
+ -webkit-text-combine-upright: all;
+ text-combine-upright: all;
+}
+
+
+/* 文字轉向
+----------------------------------------------------------------
+【支援WebKit】半形一個字直立時不會位於正中央，所以使用縱中橫排語法
+---------------------------------------------------------------- */
+.upright-1 {
+ -webkit-text-combine: horizontal;
+ -webkit-text-combine-upright: all;
+ text-combine-upright: all;
+}
+.upright {
+ -webkit-text-orientation: upright;
+}
+.sideways {
+ -webkit-text-orientation: sideways;
+}
+
+
+/* 上標字・下標字
+---------------------------------------------------------------- */
+/* 上標字 */
+.super {
+ font-size: smaller;
+ vertical-align: super;
+}
+/* 下標字 */
+.sub {
+ font-size: smaller;
+ vertical-align: sub;
+}
+
+
+
+/* 行距
+---------------------------------------------------------------- */
+.line-height-normal { line-height: normal; }
+.line-height-1em { line-height: 1.00; }
+.line-height-1em50 { line-height: 1.50; }
+.line-height-1em75 { line-height: 1.75; }
+.line-height-2em { line-height: 2.00; }
+.line-height-2em50 { line-height: 2.50; }
+.line-height-3em { line-height: 3.00; }
+.line-height-3em50 { line-height: 3.50; }
+.line-height-4em { line-height: 4.00; }
+.line-height-4em50 { line-height: 4.50; }
+.line-height-5em { line-height: 5.00; }
+
+
+/* 文字間隔
+----------------------------------------------------------------
+盡量不要使用於內文
+---------------------------------------------------------------- */
+/* 標準 */
+.lspacing-normal { letter-spacing: normal; }
+
+/* 不加間隔 */
+.lspacing-0,
+.lspacing-0em { letter-spacing: 0; }
+
+/* 以文字數指定 */
+.lspacing-0em10 { letter-spacing: 0.10em; }
+.lspacing-0em20 { letter-spacing: 0.20em; }
+.lspacing-0em25 { letter-spacing: 0.25em; }
+.lspacing-0em30 { letter-spacing: 0.30em; }
+.lspacing-0em33 { letter-spacing: 0.33em; }
+.lspacing-0em40 { letter-spacing: 0.40em; }
+.lspacing-0em50 { letter-spacing: 0.50em; }
+.lspacing-0em60 { letter-spacing: 0.60em; }
+.lspacing-0em67 { letter-spacing: 0.67em; }
+.lspacing-0em70 { letter-spacing: 0.70em; }
+.lspacing-0em75 { letter-spacing: 0.75em; }
+.lspacing-0em80 { letter-spacing: 0.80em; }
+.lspacing-0em90 { letter-spacing: 0.90em; }
+.lspacing-1em { letter-spacing: 1.00em; }
+.lspacing-1em25 { letter-spacing: 1.25em; }
+.lspacing-1em50 { letter-spacing: 1.50em; }
+.lspacing-1em75 { letter-spacing: 1.75em; }
+.lspacing-2em { letter-spacing: 2.00em; }
+.lspacing-2em25 { letter-spacing: 2.25em; }
+.lspacing-2em50 { letter-spacing: 2.50em; }
+.lspacing-2em75 { letter-spacing: 2.75em; }
+.lspacing-3em { letter-spacing: 3.00em; }
+.lspacing-3em25 { letter-spacing: 3.25em; }
+.lspacing-3em50 { letter-spacing: 3.50em; }
+.lspacing-3em75 { letter-spacing: 3.75em; }
+.lspacing-4em { letter-spacing: 4.00em; }
+.lspacing-4em25 { letter-spacing: 4.25em; }
+.lspacing-4em50 { letter-spacing: 4.50em; }
+.lspacing-4em75 { letter-spacing: 4.75em; }
+.lspacing-5em { letter-spacing: 5.00em; }
+
+
+/* 指定字型
+---------------------------------------------------------------- */
+/* 明體 */
+.hltr .mfont,
+.vrtl .mfont {
+ font-family: serif-tw, serif;
+}
+
+/* 黑體 */
+.hltr .gfont,
+.vrtl .gfont {
+ font-family: sans-serif-tw, sans-serif;
+}
+
+/* 楷體 */
+.hltr .kfont,
+.vrtl .kfont {
+ font-family: cursive-tw, cursive;
+}
+
+/* 文字尺寸（以％指定） */
+.font-050per { font-size: 50%; }
+.font-060per { font-size: 60%; }
+.font-070per { font-size: 70%; }
+.font-075per { font-size: 75%; }
+.font-080per { font-size: 80%; }
+.font-085per { font-size: 85%; }
+.font-090per { font-size: 90%; }
+.font-100per { font-size: 100%; }
+.font-110per { font-size: 110%; }
+.font-115per { font-size: 115%; }
+.font-120per { font-size: 120%; }
+.font-130per { font-size: 130%; }
+.font-140per { font-size: 140%; }
+.font-150per { font-size: 150%; }
+.font-160per { font-size: 160%; }
+.font-170per { font-size: 170%; }
+.font-180per { font-size: 180%; }
+.font-190per { font-size: 190%; }
+.font-200per { font-size: 200%; }
+.font-250per { font-size: 250%; }
+.font-300per { font-size: 300%; }
+
+
+/* 文字尺寸（以文字數量指定） */
+.font-0em50 { font-size: 0.50em; }
+.font-0em60 { font-size: 0.60em; }
+.font-0em70 { font-size: 0.70em; }
+.font-0em75 { font-size: 0.75em; }
+.font-0em80 { font-size: 0.80em; }
+.font-0em85 { font-size: 0.85em; }
+.font-0em90 { font-size: 0.90em; }
+.font-1em { font-size: 1.00em; }
+.font-1em10 { font-size: 1.10em; }
+.font-1em15 { font-size: 1.15em; }
+.font-1em20 { font-size: 1.20em; }
+.font-1em30 { font-size: 1.30em; }
+.font-1em40 { font-size: 1.40em; }
+.font-1em50 { font-size: 1.50em; }
+.font-1em60 { font-size: 1.60em; }
+.font-1em70 { font-size: 1.70em; }
+.font-1em80 { font-size: 1.80em; }
+.font-1em90 { font-size: 1.90em; }
+.font-2em { font-size: 2.00em; }
+.font-2em50 { font-size: 2.50em; }
+.font-3em { font-size: 3.00em; }
+
+
+/* 粗體字
+----------------------------------------------------------------
+也可使用
或
+---------------------------------------------------------------- */
+/* 粗體字 */
+b,strong,.bold {
+ font-weight: bold;
+}
+/* 解除粗體字 */
+.font-weight-normal {
+ font-weight: normal;
+}
+
+
+/* 斜體字
+----------------------------------------------------------------
+也可使用，但盡量不要使用在漢字上
+---------------------------------------------------------------- */
+/* 斜體 */
+.italic {
+ font-style: italic;
+}
+/* 解除斜體字 */
+.font-style-normal {
+ font-style: normal;
+}
+
+
+/* 文字色彩
+---------------------------------------------------------------- */
+/* 文字色 */
+.color-black { color: #000000; }
+.color-dimgray { color: #696969; }
+.color-gray { color: #808080; }
+.color-darkgray { color: #a9a9a9; }
+.color-silver { color: #c0c0c0; }
+.color-gainsboro { color: #dcdcdc; }
+.color-white { color: #ffffff; }
+.color-transparent { color: transparent; }
+
+/* 基本色 */
+.color-red { color: #ff0000; }
+.color-blue { color: #0000ff; }
+.color-cyan { color: #00ffff; }
+.color-magenta { color: #ff00ff; }
+.color-orangered { color: #ff4500; }
+
+
+/* 背景色彩
+---------------------------------------------------------------- */
+/* 背景色 */
+.bg-black { background-color: #000000; }
+.bg-dimgray { background-color: #696969; }
+.bg-gray { background-color: #808080; }
+.bg-darkgray { background-color: #a9a9a9; }
+.bg-silver { background-color: #c0c0c0; }
+.bg-gainsboro { background-color: #dcdcdc; }
+.bg-white { background-color: #ffffff; }
+.bg-transparent { background-color: transparent; }
+
+/* 基本色 */
+.bg-red { background-color: #ff0000; }
+.bg-blue { background-color: #0000ff; }
+.bg-cyan { background-color: #00ffff; }
+.bg-magenta { background-color: #ff00ff; }
+.bg-orangered { background-color: #ff4500; }
+
+
+/* 文字色彩白黒反轉
+---------------------------------------------------------------- */
+.inverse {
+ color: #ffffff;
+ background: #000000;
+}
+
+
+
+/* 分隔線
+---------------------------------------------------------------- */
+hr {
+ border-width: 1px;
+ border-color: #000000;
+}
+/* 【橫排】水平線 */
+.hltr hr {
+ margin: 0.5em 0;
+ border-style: solid none none none;
+}
+/* 【直排】垂直線 */
+.vrtl hr {
+ margin: 0 0.5em;
+ border-style: none solid none none;
+}
+
+
+/* 刪除線
+---------------------------------------------------------------- */
+.line-through {
+ text-decoration: line-through;
+}
+
+
+/* 側線與底線
+---------------------------------------------------------------- */
+/* 【橫排】底線 【直排】右線 */
+.hltr .em-line {
+ text-decoration: underline;
+}
+.vrtl .em-line {
+ text-decoration: underline;
+}
+
+/* 【橫排】底線 【直排】左線 */
+.hltr .em-line-outside {
+ text-decoration: overline;
+}
+.vrtl .em-line-outside {
+ text-decoration: overline;
+}
+
+
+/* 外框線
+----------------------------------------------------------------
+寬度與框線使用相同的語法
+---------------------------------------------------------------- */
+/* 由上而下為：實心線，點線，雙重線，虛線 */
+.k-solid { border-style: solid solid solid solid; border-width: 1px; border-color: #000000; }
+.k-dotted { border-style: dotted dotted dotted dotted; border-width: 2px; border-color: #000000; }
+.k-double { border-style: double double double double; border-width: 4px; border-color: #000000; }
+.k-dashed { border-style: dashed dashed dashed dashed; border-width: 1px; border-color: #000000; }
+
+/* 有顏色的框線（用於圖片的框等） */
+.k-solid-black { border-style: solid solid solid solid; border-width: 1px; border-color: #000000; }
+.k-solid-gray { border-style: solid solid solid solid; border-width: 1px; border-color: #808080; }
+.k-solid-silver { border-style: solid solid solid solid; border-width: 1px; border-color: #c0c0c0; }
+.k-solid-white { border-style: solid solid solid solid; border-width: 1px; border-color: #ffffff; }
+
+
+/* 框線
+----------------------------------------------------------------
+若要對線種以及線寬進行細微的調整時
+可以不需要使用既有的Class，自行加入新的Class
+---------------------------------------------------------------- */
+/* 線種【實線】 */
+.k-solid-top,
+.k-solid-right,
+.k-solid-bottom,
+.k-solid-left,
+.k-solid-topbottom,
+.k-solid-rightleft {
+ border-width: 1px;
+ border-color: #000000;
+}
+/* 線位置【實線】 */
+.k-solid-top { border-style: solid none none none; }
+.k-solid-right { border-style: none solid none none; }
+.k-solid-bottom { border-style: none none solid none; }
+.k-solid-left { border-style: none none none solid; }
+.k-solid-topbottom { border-style: solid none solid none; }
+.k-solid-rightleft { border-style: none solid none solid; }
+
+/* 線種【點線】 */
+.k-dotted-top,
+.k-dotted-right,
+.k-dotted-bottom,
+.k-dotted-left,
+.k-dotted-topbottom,
+.k-dotted-rightleft {
+ border-width: 2px;
+ border-color: #000000;
+}
+/* 線位置【點線】 */
+.k-dotted-top { border-style: dotted none none none; }
+.k-dotted-right { border-style: none dotted none none; }
+.k-dotted-bottom { border-style: none none dotted none; }
+.k-dotted-left { border-style: none none none dotted; }
+.k-dotted-topbottom { border-style: dotted none dotted none; }
+.k-dotted-rightleft { border-style: none dotted none dotted; }
+
+/* 線種【雙重線】 */
+.k-double-top,
+.k-double-right,
+.k-double-bottom,
+.k-double-left,
+.k-double-topbottom,
+.k-double-rightleft {
+ border-width: 4px;
+ border-color: #000000;
+}
+/* 線位置【雙重線】 */
+.k-double-top { border-style: double none none none; }
+.k-double-right { border-style: none double none none; }
+.k-double-bottom { border-style: none none double none; }
+.k-double-left { border-style: none none none double; }
+.k-double-topbottom { border-style: double none double none; }
+.k-double-rightleft { border-style: none double none double; }
+
+/* 線種【虛線】 */
+.k-dashed-top,
+.k-dashed-right,
+.k-dashed-bottom,
+.k-dashed-left,
+.k-dashed-topbottom,
+.k-dashed-rightleft {
+ border-width: 1px;
+ border-color: #000000;
+}
+/* 線位置【虛線】 */
+.k-dashed-top { border-style: dashed none none none; }
+.k-dashed-right { border-style: none dashed none none; }
+.k-dashed-bottom { border-style: none none dashed none; }
+.k-dashed-left { border-style: none none none dashed; }
+.k-dashed-topbottom { border-style: dashed none dashed none; }
+.k-dashed-rightleft { border-style: none dashed none dashed; }
+
+/* 線寬 */
+.k-0px { border-width: 0; }
+.k-1px { border-width: 1px; }
+.k-2px { border-width: 2px; }
+.k-3px { border-width: 3px; }
+.k-4px { border-width: 4px; }
+.k-5px { border-width: 5px; }
+.k-6px { border-width: 6px; }
+.k-7px { border-width: 7px; }
+.k-8px { border-width: 8px; }
+.k-thin { border-width: thin; }
+.k-medium { border-width: medium; }
+.k-thick { border-width: thick; }
+
+/* 線色 */
+.k-black { border-color: #000000; }
+.k-dimgray { border-color: #696969; }
+.k-gray { border-color: #808080; }
+.k-darkgray { border-color: #a9a9a9; }
+.k-silver { border-color: #c0c0c0; }
+.k-gainsboro { border-color: #dcdcdc; }
+.k-white { border-color: #ffffff; }
+
+/* 基本色 */
+.k-red { border-color: #ff0000; }
+.k-blue { border-color: #0000ff; }
+.k-cyan { border-color: #00ffff; }
+.k-magenta { border-color: #ff00ff; }
+.k-orangered { border-color: #ff4500; }
+
+
+/* 行頭縮排
+---------------------------------------------------------------- */
+.indent-0,
+.indent-0em { text-indent: 0; }
+.indent-1em { text-indent: 1em; }
+.indent-2em { text-indent: 2em; }
+.indent-3em { text-indent: 3em; }
+.indent-4em { text-indent: 4em; }
+.indent-5em { text-indent: 5em; }
+.indent-6em { text-indent: 6em; }
+.indent-7em { text-indent: 7em; }
+.indent-8em { text-indent: 8em; }
+.indent-9em { text-indent: 9em; }
+.indent-10em { text-indent: 10em; }
+
+
+/* 行頭凸排
+----------------------------------------------------------------
+「h-」為「hanging」的縮寫
+---------------------------------------------------------------- */
+/* 橫排用 */
+.hltr .h-indent-0,
+.hltr .h-indent-0em { text-indent: 0; padding-left: 0; }
+.hltr .h-indent-1em { text-indent: -1em; padding-left: 1em; }
+.hltr .h-indent-2em { text-indent: -2em; padding-left: 2em; }
+.hltr .h-indent-3em { text-indent: -3em; padding-left: 3em; }
+.hltr .h-indent-4em { text-indent: -4em; padding-left: 4em; }
+.hltr .h-indent-5em { text-indent: -5em; padding-left: 5em; }
+.hltr .h-indent-6em { text-indent: -6em; padding-left: 6em; }
+.hltr .h-indent-7em { text-indent: -7em; padding-left: 7em; }
+.hltr .h-indent-8em { text-indent: -8em; padding-left: 8em; }
+.hltr .h-indent-9em { text-indent: -9em; padding-left: 9em; }
+.hltr .h-indent-10em { text-indent: -10em; padding-left: 10em; }
+
+/* 直排用 */
+.vrtl .h-indent-0,
+.vrtl .h-indent-0em { text-indent: 0; padding-top: 0; }
+.vrtl .h-indent-1em { text-indent: -1em; padding-top: 1em; }
+.vrtl .h-indent-2em { text-indent: -2em; padding-top: 2em; }
+.vrtl .h-indent-3em { text-indent: -3em; padding-top: 3em; }
+.vrtl .h-indent-4em { text-indent: -4em; padding-top: 4em; }
+.vrtl .h-indent-5em { text-indent: -5em; padding-top: 5em; }
+.vrtl .h-indent-6em { text-indent: -6em; padding-top: 6em; }
+.vrtl .h-indent-7em { text-indent: -7em; padding-top: 7em; }
+.vrtl .h-indent-8em { text-indent: -8em; padding-top: 8em; }
+.vrtl .h-indent-9em { text-indent: -9em; padding-top: 9em; }
+.vrtl .h-indent-10em { text-indent: -10em; padding-top: 10em; }
+
+
+/* 段落縮排、提排
+---------------------------------------------------------------- */
+/* 縮排：橫排用 */
+.hltr .start-0,
+.hltr .start-0em { margin-left: 0; }
+.hltr .start-0em25 { margin-left: 0.25em; }
+.hltr .start-0em50 { margin-left: 0.50em; }
+.hltr .start-0em75 { margin-left: 0.75em; }
+.hltr .start-1em { margin-left: 1.00em; }
+.hltr .start-1em25 { margin-left: 1.25em; }
+.hltr .start-1em50 { margin-left: 1.50em; }
+.hltr .start-1em75 { margin-left: 1.75em; }
+.hltr .start-2em { margin-left: 2.00em; }
+.hltr .start-2em50 { margin-left: 2.50em; }
+.hltr .start-3em { margin-left: 3.00em; }
+.hltr .start-4em { margin-left: 4.00em; }
+.hltr .start-5em { margin-left: 5.00em; }
+.hltr .start-6em { margin-left: 6.00em; }
+.hltr .start-7em { margin-left: 7.00em; }
+.hltr .start-8em { margin-left: 8.00em; }
+.hltr .start-9em { margin-left: 9.00em; }
+.hltr .start-10em { margin-left: 10.00em; }
+
+/* 縮排：直排用 */
+.vrtl .start-0,
+.vrtl .start-0em { margin-top: 0; }
+.vrtl .start-0em25 { margin-top: 0.25em; }
+.vrtl .start-0em50 { margin-top: 0.50em; }
+.vrtl .start-0em75 { margin-top: 0.75em; }
+.vrtl .start-1em { margin-top: 1.00em; }
+.vrtl .start-1em25 { margin-top: 1.25em; }
+.vrtl .start-1em50 { margin-top: 1.50em; }
+.vrtl .start-1em75 { margin-top: 1.75em; }
+.vrtl .start-2em { margin-top: 2.00em; }
+.vrtl .start-2em50 { margin-top: 2.50em; }
+.vrtl .start-3em { margin-top: 3.00em; }
+.vrtl .start-4em { margin-top: 4.00em; }
+.vrtl .start-5em { margin-top: 5.00em; }
+.vrtl .start-6em { margin-top: 6.00em; }
+.vrtl .start-7em { margin-top: 7.00em; }
+.vrtl .start-8em { margin-top: 8.00em; }
+.vrtl .start-9em { margin-top: 9.00em; }
+.vrtl .start-10em { margin-top: 10.00em; }
+
+/* 凸排：橫排用 */
+.hltr .end-0,
+.hltr .end-0em { margin-right: 0; }
+.hltr .end-0em25 { margin-right: 0.25em; }
+.hltr .end-0em50 { margin-right: 0.50em; }
+.hltr .end-0em75 { margin-right: 0.75em; }
+.hltr .end-1em { margin-right: 1.00em; }
+.hltr .end-1em25 { margin-right: 1.25em; }
+.hltr .end-1em50 { margin-right: 1.50em; }
+.hltr .end-1em75 { margin-right: 1.75em; }
+.hltr .end-2em { margin-right: 2.00em; }
+.hltr .end-2em50 { margin-right: 2.50em; }
+.hltr .end-3em { margin-right: 3.00em; }
+.hltr .end-4em { margin-right: 4.00em; }
+.hltr .end-5em { margin-right: 5.00em; }
+.hltr .end-6em { margin-right: 6.00em; }
+.hltr .end-7em { margin-right: 7.00em; }
+.hltr .end-8em { margin-right: 8.00em; }
+.hltr .end-9em { margin-right: 9.00em; }
+.hltr .end-10em { margin-right: 10.00em; }
+
+/* 凸排：直排用 */
+.vrtl .end-0,
+.vrtl .end-0em { margin-bottom: 0; }
+.vrtl .end-0em25 { margin-bottom: 0.25em; }
+.vrtl .end-0em50 { margin-bottom: 0.50em; }
+.vrtl .end-0em75 { margin-bottom: 0.75em; }
+.vrtl .end-1em { margin-bottom: 1.00em; }
+.vrtl .end-1em25 { margin-bottom: 1.25em; }
+.vrtl .end-1em50 { margin-bottom: 1.50em; }
+.vrtl .end-1em75 { margin-bottom: 1.75em; }
+.vrtl .end-2em { margin-bottom: 2.00em; }
+.vrtl .end-2em50 { margin-bottom: 2.50em; }
+.vrtl .end-3em { margin-bottom: 3.00em; }
+.vrtl .end-4em { margin-bottom: 4.00em; }
+.vrtl .end-5em { margin-bottom: 5.00em; }
+.vrtl .end-6em { margin-bottom: 6.00em; }
+.vrtl .end-7em { margin-bottom: 7.00em; }
+.vrtl .end-8em { margin-bottom: 8.00em; }
+.vrtl .end-9em { margin-bottom: 9.00em; }
+.vrtl .end-10em { margin-bottom: 10.00em; }
+
+
+/* 外圍邊界（Margin）
+----------------------------------------------------------------
+無法同時與縮排及凸排用在同樣的元素上，請注意
+【錯誤案例】
+---------------------------------------------------------------- */
+/* 四邊 */
+.m-auto { margin: auto; }
+.m-0,
+.m-0em,
+.m-000per { margin: 0; }
+
+/* 以％指定 */
+.m-005per { margin: 5%; }
+.m-010per { margin: 10%; }
+.m-015per { margin: 15%; }
+.m-020per { margin: 20%; }
+.m-025per { margin: 25%; }
+.m-030per { margin: 30%; }
+.m-033per { margin: 33%; }
+.m-040per { margin: 40%; }
+.m-050per { margin: 50%; }
+.m-060per { margin: 60%; }
+.m-067per { margin: 67%; }
+.m-070per { margin: 70%; }
+.m-075per { margin: 75%; }
+.m-080per { margin: 80%; }
+.m-090per { margin: 90%; }
+
+/* 以文字數指定 */
+.m-0em10 { margin: 0.10em; }
+.m-0em20 { margin: 0.20em; }
+.m-0em25 { margin: 0.25em; }
+.m-0em30 { margin: 0.30em; }
+.m-0em40 { margin: 0.40em; }
+.m-0em50 { margin: 0.50em; }
+.m-0em60 { margin: 0.60em; }
+.m-0em70 { margin: 0.70em; }
+.m-0em75 { margin: 0.75em; }
+.m-0em80 { margin: 0.80em; }
+.m-0em90 { margin: 0.90em; }
+.m-1em { margin: 1.00em; }
+.m-1em25 { margin: 1.25em; }
+.m-1em50 { margin: 1.50em; }
+.m-1em75 { margin: 1.75em; }
+.m-2em { margin: 2.00em; }
+.m-2em50 { margin: 2.50em; }
+.m-3em { margin: 3.00em; }
+.m-4em { margin: 4.00em; }
+.m-5em { margin: 5.00em; }
+
+
+/* 螢幕上方（直排：行頭／橫排：行前方） */
+.m-top-auto { margin-top: auto; }
+.m-top-0,
+.m-top-0em,
+.m-top-000per { margin-top: 0; }
+
+/* 以％指定 */
+.m-top-005per { margin-top: 5%; }
+.m-top-010per { margin-top: 10%; }
+.m-top-015per { margin-top: 15%; }
+.m-top-020per { margin-top: 20%; }
+.m-top-025per { margin-top: 25%; }
+.m-top-030per { margin-top: 30%; }
+.m-top-033per { margin-top: 33%; }
+.m-top-040per { margin-top: 40%; }
+.m-top-050per { margin-top: 50%; }
+.m-top-060per { margin-top: 60%; }
+.m-top-067per { margin-top: 67%; }
+.m-top-070per { margin-top: 70%; }
+.m-top-075per { margin-top: 75%; }
+.m-top-080per { margin-top: 80%; }
+.m-top-090per { margin-top: 90%; }
+
+/* 以文字數指定 */
+.m-top-0em25 { margin-top: 0.25em; }
+.m-top-0em50 { margin-top: 0.50em; }
+.m-top-0em75 { margin-top: 0.75em; }
+.m-top-1em { margin-top: 1.00em; }
+.m-top-1em25 { margin-top: 1.25em; }
+.m-top-1em50 { margin-top: 1.50em; }
+.m-top-1em75 { margin-top: 1.75em; }
+.m-top-2em { margin-top: 2.00em; }
+.m-top-2em50 { margin-top: 2.50em; }
+.m-top-3em { margin-top: 3.00em; }
+.m-top-4em { margin-top: 4.00em; }
+.m-top-5em { margin-top: 5.00em; }
+.m-top-5em25 { margin-top: 5.25em; }
+
+
+/* 螢幕左側（直排：行後方／橫排：行頭） */
+.m-left-auto { margin-left: auto; }
+.m-left-0,
+.m-left-0em,
+.m-left-000per { margin-left: 0; }
+
+/* 以％指定 */
+.m-left-005per { margin-left: 5%; }
+.m-left-010per { margin-left: 10%; }
+.m-left-015per { margin-left: 15%; }
+.m-left-020per { margin-left: 20%; }
+.m-left-025per { margin-left: 25%; }
+.m-left-030per { margin-left: 30%; }
+.m-left-033per { margin-left: 33%; }
+.m-left-040per { margin-left: 40%; }
+.m-left-050per { margin-left: 50%; }
+.m-left-060per { margin-left: 60%; }
+.m-left-067per { margin-left: 67%; }
+.m-left-070per { margin-left: 70%; }
+.m-left-075per { margin-left: 75%; }
+.m-left-080per { margin-left: 80%; }
+.m-left-090per { margin-left: 90%; }
+
+/* 以文字數指定 */
+.m-left-0em25 { margin-left: 0.25em; }
+.m-left-0em50 { margin-left: 0.50em; }
+.m-left-0em75 { margin-left: 0.75em; }
+.m-left-1em { margin-left: 1.00em; }
+.m-left-1em25 { margin-left: 1.25em; }
+.m-left-1em50 { margin-left: 1.50em; }
+.m-left-1em75 { margin-left: 1.75em; }
+.m-left-2em { margin-left: 2.00em; }
+.m-left-2em50 { margin-left: 2.50em; }
+.m-left-3em { margin-left: 3.00em; }
+.m-left-4em { margin-left: 4.00em; }
+.m-left-5em { margin-left: 5.00em; }
+.m-left-5em25 { margin-left: 5.25em; }
+
+
+/* 螢幕右側（直排：行前方／橫排：行末） */
+.m-right-auto { margin-right: auto; }
+.m-right-0
+.m-right-0em
+.m-right-000per { margin-right: 0; }
+
+/* 以％指定 */
+.m-right-005per { margin-right: 5%; }
+.m-right-010per { margin-right: 10%; }
+.m-right-015per { margin-right: 15%; }
+.m-right-020per { margin-right: 20%; }
+.m-right-025per { margin-right: 25%; }
+.m-right-030per { margin-right: 30%; }
+.m-right-033per { margin-right: 33%; }
+.m-right-040per { margin-right: 40%; }
+.m-right-050per { margin-right: 50%; }
+.m-right-060per { margin-right: 60%; }
+.m-right-067per { margin-right: 67%; }
+.m-right-070per { margin-right: 70%; }
+.m-right-075per { margin-right: 75%; }
+.m-right-080per { margin-right: 80%; }
+.m-right-090per { margin-right: 90%; }
+
+/* 以文字數指定 */
+.m-right-0em25 { margin-right: 0.25em; }
+.m-right-0em50 { margin-right: 0.50em; }
+.m-right-0em75 { margin-right: 0.75em; }
+.m-right-1em { margin-right: 1.00em; }
+.m-right-1em25 { margin-right: 1.25em; }
+.m-right-1em50 { margin-right: 1.50em; }
+.m-right-1em75 { margin-right: 1.75em; }
+.m-right-2em { margin-right: 2.00em; }
+.m-right-2em50 { margin-right: 2.50em; }
+.m-right-3em { margin-right: 3.00em; }
+.m-right-4em { margin-right: 4.00em; }
+.m-right-5em { margin-right: 5.00em; }
+.m-right-5em25 { margin-right: 5.25em; }
+
+
+/* 螢幕下側（直排：行末／橫排：行後方） */
+.m-bottom-auto { margin-bottom: auto; }
+.m-bottom-0,
+.m-bottom-0em,
+.m-bottom-000per { margin-bottom: 0; }
+
+/* 以％指定 */
+.m-bottom-005per { margin-bottom: 5%; }
+.m-bottom-010per { margin-bottom: 10%; }
+.m-bottom-015per { margin-bottom: 15%; }
+.m-bottom-020per { margin-bottom: 20%; }
+.m-bottom-025per { margin-bottom: 25%; }
+.m-bottom-030per { margin-bottom: 30%; }
+.m-bottom-033per { margin-bottom: 33%; }
+.m-bottom-040per { margin-bottom: 40%; }
+.m-bottom-050per { margin-bottom: 50%; }
+.m-bottom-060per { margin-bottom: 60%; }
+.m-bottom-067per { margin-bottom: 67%; }
+.m-bottom-070per { margin-bottom: 70%; }
+.m-bottom-075per { margin-bottom: 75%; }
+.m-bottom-080per { margin-bottom: 80%; }
+.m-bottom-090per { margin-bottom: 90%; }
+
+/* 以文字數指定 */
+.m-bottom-0em25 { margin-bottom: 0.25em; }
+.m-bottom-0em50 { margin-bottom: 0.50em; }
+.m-bottom-0em75 { margin-bottom: 0.75em; }
+.m-bottom-1em { margin-bottom: 1.00em; }
+.m-bottom-1em25 { margin-bottom: 1.25em; }
+.m-bottom-1em50 { margin-bottom: 1.50em; }
+.m-bottom-1em75 { margin-bottom: 1.75em; }
+.m-bottom-2em { margin-bottom: 2.00em; }
+.m-bottom-2em50 { margin-bottom: 2.50em; }
+.m-bottom-3em { margin-bottom: 3.00em; }
+.m-bottom-4em { margin-bottom: 4.00em; }
+.m-bottom-5em { margin-bottom: 5.00em; }
+.m-bottom-5em25 { margin-bottom: 5.25em; }
+
+
+/* 內圍留白（Padding）
+---------------------------------------------------------------- */
+/* 四邊 */
+.p-0,
+.p-0em,
+.p-000per { padding: 0; }
+
+/* 以％指定 */
+.p-005per { padding: 5%; }
+.p-010per { padding: 10%; }
+.p-015per { padding: 15%; }
+.p-020per { padding: 20%; }
+.p-025per { padding: 25%; }
+.p-030per { padding: 30%; }
+.p-033per { padding: 33%; }
+.p-040per { padding: 40%; }
+.p-050per { padding: 50%; }
+.p-060per { padding: 60%; }
+.p-067per { padding: 67%; }
+.p-070per { padding: 70%; }
+.p-075per { padding: 75%; }
+.p-080per { padding: 80%; }
+.p-090per { padding: 90%; }
+
+/* 以文字數指定 */
+.p-0em10 { padding: 0.10em; }
+.p-0em20 { padding: 0.20em; }
+.p-0em25 { padding: 0.25em; }
+.p-0em30 { padding: 0.30em; }
+.p-0em40 { padding: 0.40em; }
+.p-0em50 { padding: 0.50em; }
+.p-0em60 { padding: 0.60em; }
+.p-0em70 { padding: 0.70em; }
+.p-0em75 { padding: 0.75em; }
+.p-0em80 { padding: 0.80em; }
+.p-0em90 { padding: 0.90em; }
+.p-1em { padding: 1.00em; }
+.p-1em25 { padding: 1.25em; }
+.p-1em50 { padding: 1.50em; }
+.p-1em75 { padding: 1.75em; }
+.p-2em { padding: 2.00em; }
+.p-2em50 { padding: 2.50em; }
+.p-3em { padding: 3.00em; }
+.p-4em { padding: 4.00em; }
+.p-5em { padding: 5.00em; }
+
+
+/* 螢幕上側（直排：行頭／橫排：行前方） */
+.p-top-0,
+.p-top-0em,
+.p-top-000per { padding-top: 0; }
+
+/* 以％指定 */
+.p-top-005per { padding-top: 5%; }
+.p-top-010per { padding-top: 10%; }
+.p-top-015per { padding-top: 15%; }
+.p-top-020per { padding-top: 20%; }
+.p-top-025per { padding-top: 25%; }
+.p-top-030per { padding-top: 30%; }
+.p-top-033per { padding-top: 33%; }
+.p-top-040per { padding-top: 40%; }
+.p-top-050per { padding-top: 50%; }
+.p-top-060per { padding-top: 60%; }
+.p-top-067per { padding-top: 67%; }
+.p-top-070per { padding-top: 70%; }
+.p-top-075per { padding-top: 75%; }
+.p-top-080per { padding-top: 80%; }
+.p-top-090per { padding-top: 90%; }
+
+/* 以文字數指定 */
+.p-top-0em25 { padding-top: 0.25em; }
+.p-top-0em50 { padding-top: 0.50em; }
+.p-top-0em75 { padding-top: 0.75em; }
+.p-top-1em { padding-top: 1.00em; }
+.p-top-1em25 { padding-top: 1.25em; }
+.p-top-1em50 { padding-top: 1.50em; }
+.p-top-1em75 { padding-top: 1.75em; }
+.p-top-2em { padding-top: 2.00em; }
+.p-top-2em50 { padding-top: 2.50em; }
+.p-top-3em { padding-top: 3.00em; }
+.p-top-4em { padding-top: 4.00em; }
+.p-top-5em { padding-top: 5.00em; }
+.p-top-5em25 { padding-top: 5.25em; }
+
+
+/* 螢幕左側（直排：行後方／橫排：行頭） */
+.p-left-0,
+.p-left-0em,
+.p-left-000per { padding-left: 0; }
+
+/* 以％指定 */
+.p-left-005per { padding-left: 5%; }
+.p-left-010per { padding-left: 10%; }
+.p-left-015per { padding-left: 15%; }
+.p-left-020per { padding-left: 20%; }
+.p-left-025per { padding-left: 25%; }
+.p-left-030per { padding-left: 30%; }
+.p-left-033per { padding-left: 33%; }
+.p-left-040per { padding-left: 40%; }
+.p-left-050per { padding-left: 50%; }
+.p-left-060per { padding-left: 60%; }
+.p-left-067per { padding-left: 67%; }
+.p-left-070per { padding-left: 70%; }
+.p-left-075per { padding-left: 75%; }
+.p-left-080per { padding-left: 80%; }
+.p-left-090per { padding-left: 90%; }
+
+/* 以文字數指定 */
+.p-left-0em25 { padding-left: 0.25em; }
+.p-left-0em50 { padding-left: 0.50em; }
+.p-left-0em75 { padding-left: 0.75em; }
+.p-left-1em { padding-left: 1.00em; }
+.p-left-1em25 { padding-left: 1.25em; }
+.p-left-1em50 { padding-left: 1.50em; }
+.p-left-1em75 { padding-left: 1.75em; }
+.p-left-2em { padding-left: 2.00em; }
+.p-left-2em50 { padding-left: 2.50em; }
+.p-left-3em { padding-left: 3.00em; }
+.p-left-4em { padding-left: 4.00em; }
+.p-left-5em { padding-left: 5.00em; }
+.p-left-5em25 { padding-left: 5.25em; }
+
+
+/* 螢幕右側（直排：行前方／橫排：行末） */
+.p-right-0
+.p-right-0em
+.p-right-000per { padding-right: 0; }
+
+/* 以％指定 */
+.p-right-005per { padding-right: 5%; }
+.p-right-010per { padding-right: 10%; }
+.p-right-015per { padding-right: 15%; }
+.p-right-020per { padding-right: 20%; }
+.p-right-025per { padding-right: 25%; }
+.p-right-030per { padding-right: 30%; }
+.p-right-033per { padding-right: 33%; }
+.p-right-040per { padding-right: 40%; }
+.p-right-050per { padding-right: 50%; }
+.p-right-060per { padding-right: 60%; }
+.p-right-067per { padding-right: 67%; }
+.p-right-070per { padding-right: 70%; }
+.p-right-075per { padding-right: 75%; }
+.p-right-080per { padding-right: 80%; }
+.p-right-090per { padding-right: 90%; }
+
+/* 以文字數指定 */
+.p-right-0em25 { padding-right: 0.25em; }
+.p-right-0em50 { padding-right: 0.50em; }
+.p-right-0em75 { padding-right: 0.75em; }
+.p-right-1em { padding-right: 1.00em; }
+.p-right-1em25 { padding-right: 1.25em; }
+.p-right-1em50 { padding-right: 1.50em; }
+.p-right-1em75 { padding-right: 1.75em; }
+.p-right-2em { padding-right: 2.00em; }
+.p-right-2em50 { padding-right: 2.50em; }
+.p-right-3em { padding-right: 3.00em; }
+.p-right-4em { padding-right: 4.00em; }
+.p-right-5em { padding-right: 5.00em; }
+.p-right-5em25 { padding-right: 5.25em; }
+
+
+/* 螢幕下側（直排：行末／橫排：行後方） */
+.p-bottom-0,
+.p-bottom-0em,
+.p-bottom-000per { padding-bottom: 0; }
+
+/* 以％指定 */
+.p-bottom-005per { padding-bottom: 5%; }
+.p-bottom-010per { padding-bottom: 10%; }
+.p-bottom-015per { padding-bottom: 15%; }
+.p-bottom-020per { padding-bottom: 20%; }
+.p-bottom-025per { padding-bottom: 25%; }
+.p-bottom-030per { padding-bottom: 30%; }
+.p-bottom-033per { padding-bottom: 33%; }
+.p-bottom-040per { padding-bottom: 40%; }
+.p-bottom-050per { padding-bottom: 50%; }
+.p-bottom-060per { padding-bottom: 60%; }
+.p-bottom-067per { padding-bottom: 67%; }
+.p-bottom-070per { padding-bottom: 70%; }
+.p-bottom-075per { padding-bottom: 75%; }
+.p-bottom-080per { padding-bottom: 80%; }
+.p-bottom-090per { padding-bottom: 90%; }
+
+/* 以文字數指定 */
+.p-bottom-0em25 { padding-bottom: 0.25em; }
+.p-bottom-0em50 { padding-bottom: 0.50em; }
+.p-bottom-0em75 { padding-bottom: 0.75em; }
+.p-bottom-1em { padding-bottom: 1.00em; }
+.p-bottom-1em25 { padding-bottom: 1.25em; }
+.p-bottom-1em50 { padding-bottom: 1.50em; }
+.p-bottom-1em75 { padding-bottom: 1.75em; }
+.p-bottom-2em { padding-bottom: 2.00em; }
+.p-bottom-2em50 { padding-bottom: 2.50em; }
+.p-bottom-3em { padding-bottom: 3.00em; }
+.p-bottom-4em { padding-bottom: 4.00em; }
+.p-bottom-5em { padding-bottom: 5.00em; }
+.p-bottom-5em25 { padding-bottom: 5.25em; }
+
+
+/* 高度
+---------------------------------------------------------------- */
+.height-auto { height: auto; }
+
+/* 以％指定 */
+.height-010per { height: 10%; }
+.height-020per { height: 20%; }
+.height-025per { height: 25%; }
+.height-030per { height: 30%; }
+.height-033per { height: 33%; }
+.height-040per { height: 40%; }
+.height-050per { height: 50%; }
+.height-060per { height: 60%; }
+.height-067per { height: 67%; }
+.height-070per { height: 70%; }
+.height-075per { height: 75%; }
+.height-080per { height: 80%; }
+.height-090per { height: 90%; }
+.height-100per { height: 100%; }
+
+/* 以文字數指定 */
+.height-0em25 { height: 0.25em; }
+.height-0em50 { height: 0.50em; }
+.height-0em75 { height: 0.75em; }
+.height-1em { height: 1.00em; }
+.height-1em25 { height: 1.25em; }
+.height-1em50 { height: 1.50em; }
+.height-1em75 { height: 1.75em; }
+.height-2em { height: 2.00em; }
+.height-2em50 { height: 2.50em; }
+.height-3em { height: 3.00em; }
+.height-4em { height: 4.00em; }
+.height-5em { height: 5.00em; }
+.height-5em25 { height: 5.25em; }
+.height-6em { height: 6.00em; }
+.height-7em { height: 7.00em; }
+.height-8em { height: 8.00em; }
+.height-8em75 { height: 8.75em; }
+.height-9em { height: 9.00em; }
+.height-10em { height: 10.00em; }
+.height-11em { height: 11.00em; }
+.height-12em { height: 12.00em; }
+.height-13em { height: 13.00em; }
+.height-14em { height: 14.00em; }
+.height-15em { height: 15.00em; }
+.height-20em { height: 20.00em; }
+.height-30em { height: 30.00em; }
+.height-40em { height: 40.00em; }
+
+
+/* 高度的最大値
+---------------------------------------------------------------- */
+.max-height-none { max-height: none; }
+
+/* 以％指定 */
+.max-height-010per { max-height: 10%; }
+.max-height-020per { max-height: 20%; }
+.max-height-025per { max-height: 25%; }
+.max-height-030per { max-height: 30%; }
+.max-height-033per { max-height: 33%; }
+.max-height-040per { max-height: 40%; }
+.max-height-050per { max-height: 50%; }
+.max-height-060per { max-height: 60%; }
+.max-height-067per { max-height: 67%; }
+.max-height-070per { max-height: 70%; }
+.max-height-075per { max-height: 75%; }
+.max-height-080per { max-height: 80%; }
+.max-height-090per { max-height: 90%; }
+.max-height-100per { max-height: 100%; }
+
+/* 以文字數指定 */
+.max-height-0em25 { max-height: 0.25em; }
+.max-height-0em50 { max-height: 0.50em; }
+.max-height-0em75 { max-height: 0.75em; }
+.max-height-1em { max-height: 1.00em; }
+.max-height-1em25 { max-height: 1.25em; }
+.max-height-1em50 { max-height: 1.50em; }
+.max-height-1em75 { max-height: 1.75em; }
+.max-height-2em { max-height: 2.00em; }
+.max-height-2em50 { max-height: 2.50em; }
+.max-height-3em { max-height: 3.00em; }
+.max-height-4em { max-height: 4.00em; }
+.max-height-5em { max-height: 5.00em; }
+.max-height-5em25 { max-height: 5.25em; }
+.max-height-6em { max-height: 6.00em; }
+.max-height-7em { max-height: 7.00em; }
+.max-height-8em { max-height: 8.00em; }
+.max-height-8em75 { max-height: 8.75em; }
+.max-height-9em { max-height: 9.00em; }
+.max-height-10em { max-height: 10.00em; }
+.max-height-11em { max-height: 11.00em; }
+.max-height-12em { max-height: 12.00em; }
+.max-height-13em { max-height: 13.00em; }
+.max-height-14em { max-height: 14.00em; }
+.max-height-15em { max-height: 15.00em; }
+.max-height-20em { max-height: 20.00em; }
+.max-height-30em { max-height: 30.00em; }
+.max-height-40em { max-height: 40.00em; }
+
+
+/* 寬度
+---------------------------------------------------------------- */
+.width-auto { width: auto; }
+
+/* 以％指定 */
+.width-010per { width: 10%; }
+.width-020per { width: 20%; }
+.width-025per { width: 25%; }
+.width-030per { width: 30%; }
+.width-033per { width: 33%; }
+.width-040per { width: 40%; }
+.width-050per { width: 50%; }
+.width-060per { width: 60%; }
+.width-067per { width: 67%; }
+.width-070per { width: 70%; }
+.width-075per { width: 75%; }
+.width-080per { width: 80%; }
+.width-090per { width: 90%; }
+.width-100per { width: 100%; }
+
+/* 以文字數指定 */
+.width-0em25 { width: 0.25em; }
+.width-0em50 { width: 0.50em; }
+.width-0em75 { width: 0.75em; }
+.width-1em { width: 1.00em; }
+.width-1em25 { width: 1.25em; }
+.width-1em50 { width: 1.50em; }
+.width-1em75 { width: 1.75em; }
+.width-2em { width: 2.00em; }
+.width-2em50 { width: 2.50em; }
+.width-3em { width: 3.00em; }
+.width-4em { width: 4.00em; }
+.width-5em { width: 5.00em; }
+.width-5em25 { width: 5.25em; }
+.width-6em { width: 6.00em; }
+.width-7em { width: 7.00em; }
+.width-8em { width: 8.00em; }
+.width-8em75 { width: 8.75em; }
+.width-9em { width: 9.00em; }
+.width-10em { width: 10.00em; }
+.width-11em { width: 11.00em; }
+.width-12em { width: 12.00em; }
+.width-13em { width: 13.00em; }
+.width-14em { width: 14.00em; }
+.width-15em { width: 15.00em; }
+.width-20em { width: 20.00em; }
+.width-30em { width: 30.00em; }
+.width-40em { width: 40.00em; }
+
+
+/* 寬度的最大値
+---------------------------------------------------------------- */
+.max-width-none { max-width: none; }
+
+/* 以％指定 */
+.max-width-010per { max-width: 10%; }
+.max-width-020per { max-width: 20%; }
+.max-width-025per { max-width: 25%; }
+.max-width-030per { max-width: 30%; }
+.max-width-033per { max-width: 33%; }
+.max-width-040per { max-width: 40%; }
+.max-width-050per { max-width: 50%; }
+.max-width-060per { max-width: 60%; }
+.max-width-067per { max-width: 67%; }
+.max-width-070per { max-width: 70%; }
+.max-width-075per { max-width: 75%; }
+.max-width-080per { max-width: 80%; }
+.max-width-090per { max-width: 90%; }
+.max-width-100per { max-width: 100%; }
+
+/* 以文字數指定 */
+.max-width-0em25 { max-width: 0.25em; }
+.max-width-0em50 { max-width: 0.50em; }
+.max-width-0em75 { max-width: 0.75em; }
+.max-width-1em { max-width: 1.00em; }
+.max-width-1em25 { max-width: 1.25em; }
+.max-width-1em50 { max-width: 1.50em; }
+.max-width-1em75 { max-width: 1.75em; }
+.max-width-2em { max-width: 2.00em; }
+.max-width-2em50 { max-width: 2.50em; }
+.max-width-3em { max-width: 3.00em; }
+.max-width-4em { max-width: 4.00em; }
+.max-width-5em { max-width: 5.00em; }
+.max-width-5em25 { max-width: 5.25em; }
+.max-width-6em { max-width: 6.00em; }
+.max-width-7em { max-width: 7.00em; }
+.max-width-8em { max-width: 8.00em; }
+.max-width-8em75 { max-width: 8.75em; }
+.max-width-9em { max-width: 9.00em; }
+.max-width-10em { max-width: 10.00em; }
+.max-width-11em { max-width: 11.00em; }
+.max-width-12em { max-width: 12.00em; }
+.max-width-13em { max-width: 13.00em; }
+.max-width-14em { max-width: 14.00em; }
+.max-width-15em { max-width: 15.00em; }
+.max-width-20em { max-width: 20.00em; }
+.max-width-30em { max-width: 30.00em; }
+.max-width-40em { max-width: 40.00em; }
+
+
+/* 最大尺寸
+---------------------------------------------------------------- */
+.max-size-none { max-height: none; max-width: none; }
+
+/* 以％指定 */
+.max-size-005per { max-height: 5%; max-width: 5%; }
+.max-size-010per { max-height: 10%; max-width: 10%; }
+.max-size-020per { max-height: 20%; max-width: 20%; }
+.max-size-025per { max-height: 25%; max-width: 25%; }
+.max-size-030per { max-height: 30%; max-width: 30%; }
+.max-size-033per { max-height: 33%; max-width: 33%; }
+.max-size-040per { max-height: 40%; max-width: 40%; }
+.max-size-050per { max-height: 50%; max-width: 50%; }
+.max-size-060per { max-height: 60%; max-width: 60%; }
+.max-size-067per { max-height: 67%; max-width: 67%; }
+.max-size-070per { max-height: 70%; max-width: 70%; }
+.max-size-075per { max-height: 75%; max-width: 75%; }
+.max-size-080per { max-height: 80%; max-width: 80%; }
+.max-size-090per { max-height: 90%; max-width: 90%; }
+.max-size-100per { max-height: 100%; max-width: 100%; }
+
+/* 以文字數指定 */
+.max-size-0em25 { max-height: 0.25em; max-width: 0.25em; }
+.max-size-0em50 { max-height: 0.50em; max-width: 0.50em; }
+.max-size-0em75 { max-height: 0.75em; max-width: 0.75em; }
+.max-size-1em { max-height: 1.00em; max-width: 1.00em; }
+.max-size-1em25 { max-height: 1.25em; max-width: 1.25em; }
+.max-size-1em50 { max-height: 1.50em; max-width: 1.50em; }
+.max-size-1em75 { max-height: 1.75em; max-width: 1.75em; }
+.max-size-2em { max-height: 2.00em; max-width: 2.00em; }
+.max-size-2em50 { max-height: 2.50em; max-width: 2.50em; }
+.max-size-3em { max-height: 3.00em; max-width: 3.00em; }
+.max-size-4em { max-height: 4.00em; max-width: 4.00em; }
+.max-size-5em { max-height: 5.00em; max-width: 5.00em; }
+.max-size-5em25 { max-height: 5.25em; max-width: 5.25em; }
+.max-size-6em { max-height: 6.00em; max-width: 6.00em; }
+.max-size-7em { max-height: 7.00em; max-width: 7.00em; }
+.max-size-8em { max-height: 8.00em; max-width: 8.00em; }
+.max-size-8em75 { max-height: 8.75em; max-width: 8.75em; }
+.max-size-9em { max-height: 9.00em; max-width: 9.00em; }
+.max-size-10em { max-height: 10.00em; max-width: 10.00em; }
+.max-size-11em { max-height: 11.00em; max-width: 11.00em; }
+.max-size-12em { max-height: 12.00em; max-width: 12.00em; }
+.max-size-13em { max-height: 13.00em; max-width: 13.00em; }
+.max-size-14em { max-height: 14.00em; max-width: 14.00em; }
+.max-size-15em { max-height: 15.00em; max-width: 15.00em; }
+.max-size-20em { max-height: 20.00em; max-width: 20.00em; }
+.max-size-30em { max-height: 30.00em; max-width: 30.00em; }
+.max-size-40em { max-height: 40.00em; max-width: 40.00em; }
+
+
+/* 避頭點規則
+---------------------------------------------------------------- */
+.line-break-auto {
+ -webkit-line-break: auto;
+}
+.line-break-loose {
+ -webkit-line-break: loose;
+}
+.line-break-normal {
+ -webkit-line-break: normal;
+}
+.line-break-strict {
+ -webkit-line-break: strict;
+}
+
+
+/* 自動換行規則
+---------------------------------------------------------------- */
+.word-break-normal {
+ -webkit-word-break: normal;
+}
+.word-break-break-all {
+ -webkit-word-break: break-all;
+ word-break: break-all;
+}
+.word-break-keep-all {
+ -webkit-word-break: keep-all;
+}
+
+
+/* 長單字的換行規則
+---------------------------------------------------------------- */
+.word-wrap-normal {
+ word-wrap: normal;
+}
+.word-wrap-break-word {
+ word-wrap: break-word;
+}
+
+
+/* 【参考】文繞圖
+---------------------------------------------------------------- */
+/* 圖置於行頭方向 */
+.float-left,
+.float-start {
+ float: left;
+}
+/* 圖置於行尾方向 */
+.float-right,
+.float-end {
+ float: right;
+}
+/* 不要文繞圖 */
+.float-none {
+ float: none;
+}
+/* 解除文繞圖 */
+.float-clear {
+ clear: both;
+}
+/* 解除圖置於行頭方向 */
+.float-clear-left,
+.float-clear-start {
+ clear: left;
+}
+/* 解除圖置於行尾方向 */
+.float-clear-right,
+.float-clear-end {
+ clear: right;
+}
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-001.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-001.xhtml"
new file mode 100644
index 0000000..4068df6
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-001.xhtml"
@@ -0,0 +1,69 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
關於本文件
+
+
+
+
目的
+
+
本規格書（以下稱本文件）主要提供給出版社在製作一般EPUB格式電子書時作為參考使用。
+
+
由於EPUB 3格式有著相當多元的製作方式與表現手法。結果在製作時難以決定該使用何種方法，也不容易掌握其表現程度。以此，本文件作為一份中介規格書，提供出版社製作時參考使用，以解決這些問題。
+
+
同時本文件不僅用於EPUB 3格式電子書製作使用，也提供販售平台製作EPUB 3閱讀程式時須考量支援的技術規格，以求出版社所製作出的電子書得以在不同閱讀程式上有近乎一致的表現，達到一源多用的目的。
+
+
概要
+
+
本文件適用的書籍種類為：小說等文字書，以及漫畫、雜誌等圖文書。
+
+
文字書僅提供簡單體裁，不包含如文字方向混合（直排與橫排混合）以及多欄排版、文繞圖等具有特殊設計表現。部分進階的表現會在本文件中標註為「選擇性」，閱讀程式開發商可嘗試實作，出版社使用這些表現時需注意可能無法正常顯示。
+
+
圖文書僅限於漫畫，或者難以重置的雜誌，使用一頁一圖包裝成EPUB 3固定版面格式。使用HTML排版，或者加入MediaOverlay語音朗讀功能的複雜固定版面不是本文件的對象。
+
+
EPUB 3內使用HTML5與CSS3等網頁技術，各作業系統與瀏覽器組版引擎對於基本元素的解釋有相當的差異，這是發生在網頁上的既有現象，且電子書閱讀程式多半不會提供規格說明；也不一定提出測試方法讓出版社得以確認表現。為求單一檔案在不同閱讀器上能夠顯示一致，也是本文件的目的。
+
+
本文件以日本電子書出版社協會（電書協）公佈之EPUB 3 Authoring Guide 為底本，該範本在日本已經成為出版社與販售平台溝通的良好範例，並且具備文字直排等細節，且基於IDPF下Readium Foundation所公布的Readium程式作為基礎，提供範本與樣式表，為電子書表現的最大公約數。足以供中文電子書所使用。
+
+
我們也希望本文件提供的範本能夠適用至各種電子書製作軟體，令產製出的EPUB 3文件能夠具備通用性。令電子書的生產到販賣過程能夠更加順暢。
+
+
最終希望海內外各販售平台在提供閱讀程式時，能夠滿足本文件中的各項需求，以能夠完整呈現出版社所製作出的EPUB 3電子書，減少針對不同平台修改、調整的麻煩，降低書檔流通的障礙，讓電子書流通更為穩定確實。
+
+
本文件依照IDPF所公布的EPUB 3.01規範為基礎，並且參考制定中的EPUB 3.1規範，規範中未普遍實作，但為出版社重要需求的部分以附件提出，希望能取得海內外閱讀程式開發商的共識，作為添補修正。
+
+
需求層級
+
+
本文件之規格需求層級依照RFC 2119 的定義如下：
+
+
+必需（Must） ：必需支援。需要（Should） ：若無特別原因必需支援。不需（Should Not） ：若無特別原因不得支援。不得（Must Not） ：不得支援。推薦（Recommend） ：建議實做，但不予以保證。
+
+
範本檔案
+
+
依照本文件所製作的EPUB範本提供如下：
+
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-002.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-002.xhtml"
new file mode 100644
index 0000000..0109788
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-002.xhtml"
@@ -0,0 +1,50 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
對閱讀程式的需求
+
+
+
+
本章節針對閱讀程式（Reading System, 以下稱為RS）的技術面進行說明。
+
+
EPUB 3內的各種內容，包括包裝文件、導覽文件、內容文件、樣式表等通稱為「文件檔案」。
+
+
文件檔案的基礎
+
+
文字編碼
+
+
文件檔案使用UTF-8編碼
+
+
不管是否有BOM（Byte Order Mark）都需要 能夠解譯。
+
+
但本文件建議 儲存為沒有BOM的文件。
+
+
換行符號
+
+
文件檔案中的換行代碼為CR+LF、CR與LF，無論使用哪一種都需要 能夠正確解譯。
+
+
同一份文件檔案混用換行代碼時不在此限。
+
+
本文件建議 同一份文件中不要混用不同的換行代碼。
+
+
原始碼中的空白、換行與註解處理
+
+
文件檔案中記述規則與及解譯以XHTML規則為依據。
+
+
適當忽略原始碼中的註解行、可任意配置元素中屬性的順序，各屬性間如果有一個以上的空白、換行或Tab等，請適當解譯，與支援Web標準的現代瀏覽器具備相同的嚴謹度與自由性。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-003.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-003.xhtml"
new file mode 100644
index 0000000..550459f
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-003.xhtml"
@@ -0,0 +1,56 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
包裝文件（Package Document/OPF檔案）
+
+
遵守翻頁方向
+
+
書的翻頁方向必需 依從包裝文件中Spine元素的page-progresson-direction屬性，不管內容文件或者樣式表中使用哪一種writing-mode。
+
+
而XHTML內容文件中的文字排列方向，則依照各XHTML中Body元素所指定的writing-mode屬性。當writing-mode指定於html元素時，必需 繼承於body元素。
+
+
例如page-progression-direction指定為rtl（由右向左）時，而xhtml的writing-mode指定為horizontal-tb（橫排）時，期待文字於螢幕內「由左向右」顯示，而新的頁面則是「由右向左」增加。
+
+
遵守Spine元素指定規則
+
+
必需 正確依照spine元素內的順序顯示內容。
+
+
也必需 反應itemref元素內linear屬性的yes與no。當為no時則不應 顯示，當為yes時，則不應 隱藏。
+
+
也必需 反應itemref元素中「properties」屬性所指定的page-spread-right與page-spread-left。
+
+
未記載於spine元素中的內容，就不應 作為書的內頁所顯示。
+
+
不使用已廢止的元素
+
+
guide元素已經廢止，故不應 使用該語法。
+
+
處理Metadata等
+
+
當RS支援<dc:title>資訊時，會將所記載內容的書名使用於RS中顯示。
+
+
當RS支援<dc:creator>資訊時，會將所記載內容的作者名使用於RS中顯示。顯示多數作者時的顯示方式及其角色，則由各RS自行判斷處理。
+
+
當有多數作者時，出版社可自行決定要在一個<dc:creator>中記載全員，或者分開記載。當分開記載時，出版社必需 給予該作者role的值，以及顯示順序。
+
+
作者名為中文時，不另外加入file-as，而以<dc:creator>中文姓氏首字筆順排列。
+
+
檔案id（unique-identifier）基本上必需 使用urn:isbn:xxxxxxxxxxxxx（x為數字）標記，不需加入連字號；若無isbn，則使用uuidurn:uuid:xxxxxxxx:xxxx:xxxx:xxxx:xxxxxxxxxxxx（x為16進位）。
+
+
更新日期若沒特別指示，設定為製作預計的出版日；這項日期RS不應 顯示。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-004.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-004.xhtml"
new file mode 100644
index 0000000..3e65f2a
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-004.xhtml"
@@ -0,0 +1,28 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
導覽文件（EPUB Navigation Document）
+
+
處理導覽文件
+
+
當導覽文件與ncx檔案同時存在時，必需 優先處理導覽文件；按照EPUB 3.1規格，製作時可不加入ncx檔案。
+
+
顯示導覽文件
+
+
導覽文件的顯示方式由RS自行決定，但至少需 顯示三層級目錄。本規格預設導覽文件不會包含連結以外的元素。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-005.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-005.xhtml"
new file mode 100644
index 0000000..25de13b
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-005.xhtml"
@@ -0,0 +1,65 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
基本樣式表
+
+
CSS值的限制與實作基準
+
+
依照現時點各瀏覽器引擎的CSS支援狀況，本文件提供製作時可通用的最底限CSS屬性。當遇到排版相關基礎屬性在不同RS上顯示不同時，主要以Readium為基準。當使用其他CSS屬性時，出版社理解支援的不一致，需自付責任。
+
+
使用預設樣式表集
+
+
本文件提供了基本樣式表集，主要希望在製作時能直接使用之中的各項Class。但也可以調整各CSS檔案，新增Class或者修改既有的Class名稱，或者在既有的Class中追加新的屬性。所以RS不可以直接使用樣式表集中的Class，而是透過這份樣式表了解所該支援的排版表現。
+
+
不使用替代樣式表
+
+
RS可以自行決定是否讓使用者自行切換直排或者橫排。
+
+
但RS實作時，建議考量到以下兩點：
+
+
+預設使用作品檔案中，預先指定的排列方向顯示；
+當切換到非作品檔案預先指定的排列方向顯示時，希望能在功能介紹或者常見問題中寫出可能會與作者以及製作者預設的表現形式有所不同。
+
+
+
現狀大多數RS不讓使用者自行切換排版方向，主要是實作切換替代樣式表的環境不多，也缺少檢查用的工具與指標。同時不依存排版方向設計的邏輯方向指定CSS（如margin-start）還尚未完善。使得要切換排版方向非常困難，依照狀況不同會花上相當的時間調整。
+
+
盡量不使用-epub-Prefix的CSS屬性
+
+
雖然在EPUB 3.0規範中為了解決相容性問題，而有制定許多以-epub-Prefix來額外處理的CSS屬性，但由於在EPUB 3.2版規範中捨棄了這些屬性，所以本文件不推薦使用-epub-Prefix的CSS數值。
+
+
而因為多數行動裝置作業系統使用Webkit作為核心，所以在不具Prefix的CSS屬性無法使用時，可以追加-webkit-以求相容。為求後續逐步調整變化，建議並列而非取代。
+
+
使用@import規則
+
+
為求讓各XHTML內連結CSS檔案的記載方式簡單一致，並且讓CSS能夠被客制化調整。本文件範本在XHTML內使用link元素讀取主要CSS，並且使用@import規則，在主要CSS檔案內部讀入所需的各CSS檔案。也就是RS需要實作讓XHTML讀入複數CSS的功能。
+
+
但不推薦在以@import讀入的CSS檔案中，再使用@import功能。
+
+
需支援嵌入字體
+
+
RS需支援嵌入字體。本文件建議將嵌入字體應用於中文、日文以外的語言，如韓文、泰文、越南文等常與中文混合排列的語言；若要使用中文、日文為嵌入字體，則需預先按照使用的文字製作成字體子集（subset）。
+
+
指定html元素
+
+
html元素內原則上除了排版方向（writing-mode）與全體字體指定（font-family）外，不指定其他值。以上兩者都應該繼承至body元素中。
+
+
覆蓋RS的預設樣式表
+
+
書籍檔案中的CSS應該覆蓋RS中原有的預設樣式表。若RS內已經有預設樣式表，推薦對出版社公開其規格。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-006.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-006.xhtml"
new file mode 100644
index 0000000..c61fe5d
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-006.xhtml"
@@ -0,0 +1,90 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
文字與字體
+
+
需包含的文字數量
+
+
所使用的字型必需 包含Unicode 1.0中日韓共同表意漢字共20,914字，推薦 支援到Unicode 3.0包含Ext-A在內共27,496字。若RS需要在香港地區提供服務，則必需 包含香港增補字符集HKSCS-2008的5,009字元。
+
+
英文與數字則必需 包含Basic Latin與Latin-1 Supplement共256字元，其餘語言文字不需編碼，顯示其他文字時，RS需要使用其他語系的字型退回（Fallback）顯示。
+
+
字體
+
+
閱讀程式必需 提供字型，以支援以下兩種字體
+
+
+
+
推薦 閱讀程式支援以下字體，以提供最佳排版表現
+
+
+
+
同時以上字型必需 如下指定為「Generic font family」供書檔顯示對應
+
+
.mfont Serif ：明體
+.gfont Sans-Serif ：黑體
+.kfont Cursive ：楷體
+
+
+
+ 說明：每款RS所採用的字型不同，為避免出版社製作時需以窮舉方式指定個別字型名稱，RS需要預先做好CSS Generic family與使用字型的對應。EPUB中指定為serif的段落，會直接套用RS所提供的明體字。
+
+
+
當字型尺寸一致時，以上三字體的em尺寸必需 相同。
+
+
當使用樣式表如text-orientation改變文字方向時，em尺寸必需 保持不變。
+
+
三字體顯示上的寬度需要一致，不得有大幅度的差別，且中心線必需 對齊。
+
+
當RS不提供楷體字型時，則必需 將Cursive指定為黑體作為替代字型。
+
+
直排時的文字方向
+
+
字型規格上，必需 依照Unicode Consortium所提供的文件UTR#50，將特定字碼於直排時轉向。
+
+
Unicode® Technical Report #50 UNICODE VERTICAL TEXT LAYOUT
+http://unicode.org/reports/tr50/
+
+
+
+ 說明：當出版社製作EPUB檔案時，標點符號會使用字型轉向功能自動轉向，所以不得 使用直排字符，如﹁︽等。UTR#50涵蓋字元過多，故必需 支援的符號如附件。
+
+
+
符合UTR#50定義的文字，在直排時須自動轉向，若需要手動轉向，RS必須支援以下兩種語法：
+
+
直立： text-orientation: upright;
+向右旋轉90度： text-orientation: sideways;
+
+
+
+ 說明：半形英文與數字採用upright轉正時，許多RS無法置放於文字中線上，這時可以採用-text-combine作為替代方案，但本CSS屬性主要是供英文數字組合轉正排列使用，請盡量避免。
+
+
+
直排時的對齊
+
+
圖片與直立文字，請依循CSS Writing Modes Level 3中4.2 Text Baselines的central排列，也就是置於文字的中線上。
+
+
CSS Writing Modes Level 3
+http://www.w3.org/TR/2014/CR-css-writing-modes-3-20140320/#central-baseline
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-007.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-007.xhtml"
new file mode 100644
index 0000000..7831137
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-007.xhtml"
@@ -0,0 +1,77 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
圖片
+
+
圖片的種類
+
+
必需 能使用JPEG與PNG格式的圖片，選擇 性支持GIF格式。
+
+
必需 支援PNG的Alpha圖層，即能顯示透明色，若支援GIF，需比照支援。
+
+
圖片色彩須使用RGB，不得 使用CMYK，推薦色域為sRGB。
+
+
造字圖片
+
+
透過本文件的圖片縮小語法，讓圖片顯示為內文一字尺寸。用於填補生罕字等內建字體不支援的漢字。不特別指定圖片尺寸極限，但提供推薦值：
+
+
圖片尺寸：128x128 px
+圖片格式：8bit的白底PNG
+反鋸齒：無
+
+
+
+ 說明：為對應各種閱讀程式的預設底色，以透明底色PNG較佳。但考量到現在多數閱讀程式有對應黑底白字的「夜間模式」，透明底色會讓圖片內容無法辨識，故推薦較為通用的白色底色）
+
+
+
指定圖片與Block元素的尺寸以及最大尺寸
+
+
目前各瀏覽器上max-height與max-width的動作有所不同。於RS上實作時，這兩個值應該以RS內內容可顯示範圍為基礎，顯示上請以Readium作為基準。
+
+
若內容檔案中指定的圖片尺寸大於可顯示範圍，RS應以最大顯示範圍為主，忽略所指定的圖片尺寸。內容檔案也盡量不要以絕對值來指定圖片尺寸。
+
+
圖片或block元素以及inline-block元素，是否需要換頁
+
+
文字行內元素要是大於行內預設要讓元素可顯示的空間時，RS需要將元素送到下一行或者下一頁。
+
+
不管是Block或者inline-block元素，在RS頁面內，讓元素顯示的空間比要顯示的元素小時，RS需要將元素送到下一頁。
+
+
與頁面進行方向寬度相等或者小於寬度
+
+
若元素無法放進顯示空間時，則於下一頁顯示該元素。當元素指定為與頁面等寬時，送到下一頁也需要與頁面等寬。
+
+
這時元素在非頁面進行方向那一端（直排時為高），在與頁面等寬的狀況下，超過螢幕內空間的話，則無法顯示。
+
+
+ 說明：當在可顯示區域為高800x寬600px的RS中，一張寬600px的圖片設定寬度為width: 100%。而置放頁面已經有數行文字佔用顯示空間時，RS需要將該圖片送到下一頁，以寬度600px顯示。
+
+ 但若該圖片高度為1000px時，則會有200px的空間受到切割而無法顯示。製作方應該不指定寬度為Width: 100%，改為height: 100%，讓寬度依比例自動調整。
+
+
+
大於頁面進行方向時
+
+
RS應縮放為與頁面等寬，即圖片不可跨頁切割顯示。
+
+
+ 說明：當在可顯示區域為高800x寬600px的RS中，一張寬1000px的圖片設定寬度為width: 100%。RS則不可於單頁中顯示600PX，將剩餘400PX移到下一頁顯示。而應該調整寬度為600PX，高度自動依比例調整。
+
+
+
縮小圖片，讓使用者操作放大
+
+
透過指定圖片尺寸或者RS自動處理，使得圖片顯示比原來尺寸還要小時，推薦RS實作縮放功能，讓使用者能夠點擊圖片將圖片放大到原來尺寸。讓螢幕較小時，也能閱讀圖片中的文字。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-008.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-008.xhtml"
new file mode 100644
index 0000000..4d346a0
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-008.xhtml"
@@ -0,0 +1,28 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
封面圖片
+
+
替代圖片
+
+
書籍檔案中有時可能無法提供封面圖片，RS在沒有封面圖片的狀況下，需要提供於書櫃顯示用的替代圖片，使其能正常運作。
+
+
檔案名稱
+
+
封面圖片的檔案名，在出版社沒有特別指示的狀況下，為了讓RS能夠快速辨識，推薦使用共同名稱（cover.jpg/cover.png）。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-009.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-009.xhtml"
new file mode 100644
index 0000000..e8b496d
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-009.xhtml"
@@ -0,0 +1,30 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
頁面邊界
+
+
Body元素的留白
+
+
現狀多數RS都會自行加入無法調整的邊界留白。所以本文件範本的Body元素內，預設將margin與padding設定為0。也不推薦出版社進行調整。
+
+
內文顯示區域內的邊界
+
+
RS不應在body元素內部內容顯示空間加入自有的邊界。同時書籍檔案中所指定的margin與padding，空白行等，RS不應該自行調整處理。
+
+
例如在章節開頭加上無法刪除的邊界，或將指定的縮排與空白行等任意壓縮，都會影響到作者與製作者的設計，不應發生。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-010.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-010.xhtml"
new file mode 100644
index 0000000..d793f9a
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-010.xhtml"
@@ -0,0 +1,65 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
其他HTML元素
+
+
空白行所使用的<br/>
+
+
書籍中為了區分章節段落，會在段落之間加入空白行，可以使用<br/>處理為空白行。RS遇到<br/>或者<br />都須正確處理。請注意不得使用<br>，會不符合XHTML規則發生錯誤。
+
+
當用於段落間時，為求行距一致，推薦使用<p><br/></p>來確保空完整一行。
+
+
注音符號使用的<ruby>
+
+
目前注音符號的顯示還不能以Web技術完整達成。當注音出現在內文時，建議使用缺字圖片的方式製作。注於側旁的注音目前尚不能完美顯示。
+
+
頁面內連結（錨點連結）
+
+
點擊<a href="檔名#錨點名">文字</a>中指定的連結（若在同一檔案中，檔名可省略）時，需要跳到<元素名 id="錨點名">所在的元素位置。檔案名與錨點名於實際運用時，不應該使用全形文字與空白。
+
+
此外，跳到該元素時，該元素要顯示在第一行，或者預先演算出的頁面裡該元素所在頁，由各RS決定。
+
+
註釋連結
+
+
當頁面內連結用於註解時，則需按照EPUB的推薦語法製作，如：
+
+
<a epub:type="noteref” class="noteref" href="#註解編號" rel="footnote" >1</a>
+
+ <div epub:type="footnote" class="footnote" id="註解編號">
+ <p>注釋內容中的一個段落。</p>
+ </div>
+
+
+
若需讓讀者閱讀註解後回到內文定點，則可雙向設定錨點：
+
+
<a epub:type="noteref" class="noteref" id="位置編號" href="#註解編號" rel="footnote" >1</a>
+
+ <div epub:type="footnote" class="footnote" id="註解編號">
+ <p>注釋內容中的一個段落。</p>
+ <a href="#位置編號">返回符號</a>
+ <div>
+
+
+
RS可以利用以上標準語法製作不同顯示方式，如跳出式註解，但應注意不得讓註解內元素無法顯示或受到裁切。但由於各RS支援程度不同，在製作時依然要保留以上語法。
+
+
nav與列表元素
+
+
列表雖然應該依循語意，使用ol, ul, li等元素標註，但由於需要透過樣式表調整位置，所以建議使用<p>元素取代。
+
+
導覽文件如EPUB Content Documents 3.0.1所記載，列表元素不應該顯示其編號。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-011.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-011.xhtml"
new file mode 100644
index 0000000..ee83f98
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-011.xhtml"
@@ -0,0 +1,28 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
表格
+
+
目前RS在處理HTML <table> 時，表現性尚未最佳化；在分頁與小尺寸螢幕上表現更不理想。若希望表格呈現與原書近似，建議將表格處理為白色底色PNG圖片（原因同缺字圖片）插入頁面中。
+
+
若要使用 <table> 來製作表格，請自行測試顯示效果。各RS間顯示結果不一定一致。
+
+
數學等計算公式
+
+
EPUB規範中雖推薦使用MathML來顯示計算公式，但現在各瀏覽器引擎對MathML顯示的支援狀況還過低，以至於許多使用瀏覽器進行電子書顯示的服務無法提供完善的資源。建議將計算公式處理為白色底色PNG圖片插入頁面中，並且按照所佔行數來指定高/寬度。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-012.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-012.xhtml"
new file mode 100644
index 0000000..e5f62f3
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-012.xhtml"
@@ -0,0 +1,38 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
其他CSS的解釋方法
+
+
書名號與私名號
+
+
當要在內容加上私名號時，請使用CSS的text-decoration語法，橫排時值為underline，直排時值為overline，而標注書名號時，則應該加上text-decoration: wavy（目前需-webkit- prefix）。
+
+
目前瀏覽器處理連續出現的私名號與書名號時，線段不會分開。建議RS自行開發切割線段的功能。
+
+
縱中橫排
+
+
使用CSS屬性text-combine: horizontal;與text-combine-horizontal: all;可以將直排文字中的半型英文與數字與符號轉橫。
+
+
縱中橫排的文字列必需壓縮視為一個文字，必要時可以突出一文字的寬度，延伸到行距間。
+
+
不顯示
+
+
必需正確處理display: none。
+
+
不想顯示給讀者看的內容最好不要包含在書籍檔案中，或者使用HTML註解方式予以隱藏。也推薦支援visibility: hidden，但本文件預設不使用JavaScript功能來切換CSS改變顯示狀態，所以應該不會使用到visibility，所以在範本中不使用該屬性。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-013.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-013.xhtml"
new file mode 100644
index 0000000..39c70c9
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-013.xhtml"
@@ -0,0 +1,184 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
標點符號
+
+
中文標點符號目前尚未有指定標準Unicode字碼的對應文件，這裡列舉出推薦使用的字碼，期許出版社與製作者在製作書籍檔案時使用。RS端必須保證以下字碼的正確顯示，同時也列出高頻率使用，須於直排中向右轉90度（透過字型功能達到）的標點符號。
+
+
+
+
+ 標點名稱
+ Unicode
+ 直排時轉90度
+
+
+
+
+ 逗號（，）
+ U+FF0C
+ 否
+
+
+ 句號（。）
+ U+3002
+ 否
+
+
+ 頓號（、）
+ U+3001
+ 否
+
+
+ 冒號（：）
+ U+FF1A
+ 否
+
+
+ 分號（；）
+ U+FF1B
+ 否
+
+
+ 驚嘆號（！）
+ U+FF01
+ 否
+
+
+ 問號（？）
+ U+FF1F
+ 否
+
+
+ 間隔號（・）
+ U+00B7
+ 否
+
+
+ 刪節號（……）
+ U+2026
+ 是
+
+
+ 破折號（—）
+ U+2014
+ 是
+
+
+ 分隔號（／）
+ U+FF0F
+ 否
+
+
+ 連接號（～）
+ U+FF5E
+ 是
+
+
+ 前引號（「）
+ U+300C
+ 是
+
+
+ 後引號（」）
+ U+300D
+ 是
+
+
+ 前雙引號（『）
+ U+300E
+ 是
+
+
+ 後雙引號（』）
+ U+300F
+ 是
+
+
+ 前括號（（）
+ U+FF08
+ 是
+
+
+ 後括號（））
+ U+FF09
+ 是
+
+
+ 前書名號（《）
+ U+300A
+ 是
+
+
+ 後書名號（》）
+ U+300B
+ 是
+
+
+ 前篇名號（〈）
+ U+3008
+ 是
+
+
+ 後篇名號（〉）
+ U+3009
+ 是
+
+
+
+
+
破折號由兩個EM DASH（U+2014）構成，RS使用字體需要使用字體功能使其連結。若出版社希望在任何狀況下都讓破折號連結時，可以使用─ U+2500 BOX DRAWINGS LIGHT HORIZONTAL代替，RS也必需讓此符號於直排時向右轉90度。
+
+
刪節號U+2026在中文顯示時，無論橫排或直排，都應該為置於中央的三點符號，RS內建字體必需符合此規則。Unicode中近似的符號⋯ U+22EF MIDLINE HORIZONTAL ELLIPSIS由於在Android舊版系統上無法顯示，故不建議出版社使用。
+
+
間隔號U+00B7並非所有的字體都為全形符號，RS採用字體需要將其造為全形。間隔號也可使用・ U+30FB KATAKANA MIDDLE DOT，RS採用字體必需包含此字元。
+
+
此外，也推薦使用以下西文標點：
+
+
+
+
+ 標點名稱
+ Unicode
+ 直排時轉90度
+
+
+
+
+ ' 省略符號（Apostrophe）
+ U+0027
+ 否
+
+
+ " 引號（Quotation Mark）
+ U+0022
+ 否
+
+
+ “ 左引號（LEFT DOUBLE QUOTATION MARK）
+ U+201C
+ 否
+
+
+ ” 右引號（RIGHT DOUBLE QUOTATION MARK）
+ U+201D
+ 否
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-014.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-014.xhtml"
new file mode 100644
index 0000000..3b25ae3
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-014.xhtml"
@@ -0,0 +1,28 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
固定版面EPUB
+
+
EPUB 3.0的固定版面分為兩種，一種為圖片為主，一種則是利用HTML、CSS與JavaScript等技術達到動態表現。由於能夠完整支援後者的RS數量不多，本文件僅止於使用圖片的前者。
+
+
使用圖片構成的固定版面，使用SVG Wrapping語法處理。將SVG語法直接記載於XHTML中，所能使用的圖片格式與文字重排（reflow）格式相同。頁面上的連結與目錄也使用SVG格式，在圖片經縮放後也能對應到對的位置。
+
+
除封面頁外，製作檔案時頁數必須成對。
+
+
只有封面頁（書籍檔案中第一頁）按照EPUB Fixed Layout語法，在spine中的itemref元素中指定為properties="rendition:page-spread-center"，以單頁呈現。封面只要不會影響到後續頁面的顯示順序，可以不需要置放於畫面的正中央。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-015.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-015.xhtml"
new file mode 100644
index 0000000..e663195
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-015.xhtml"
@@ -0,0 +1,24 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
其他
+
+
Script
+
+
書籍預設不使用JavaScript，但推薦 RS能夠支援，出版社使用該功能時需要預先測試各RS的支援程度。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-016.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-016.xhtml"
new file mode 100644
index 0000000..18c003b
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-016.xhtml"
@@ -0,0 +1,214 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
RS需支援的HTML元素以及CSS屬性
+
+
【HTML】
+
+
根元素
+
+
html
+
+html
+
+
+
文件的metadata
+
+
html
+
+head / title / link / meta / style
+
+
+
區塊元素
+
+
html
+
+body / h1~h6 / nav（預設僅使用在導覽文件中）
+
+
+
內容群組化
+
+
html
+
+div / p / hr / ol與ul（預設僅使用在導覽文件中）/ li（預設僅使用在導覽文件中）
+
+
+
為文字加入意義
+
+
html
+
+a / br / ruby / rt / span
+
+
+
插入元素
+
+
html
+
+img / SVG（僅用於固定版面SVG Wrapping與ImageMap）
+
+
+
【CSS】
+
+
値
+
+
css
+
+% / px / em / inherit / #RRGGBB / #RGB / rgb(R,G,B) / 色彩名（17色） / transparent
+
+
+
選擇器
+
+
css
+
+Type Selector: ELEMENT
+
+Universal Selector: *
+
+Class Selector: .class
+
+同時指定複数Class: class="class class class ..."
+
+組合指定複数Class: .class.class
+
+ID Selector: #id
+
+
+
屬性選擇器
+
+
css
+
+[att] / [att="val"] / [att~="val"] / [att|="val"]
+
+
+
關聯組合
+
+
css
+
+子孫Selector「A B」 / 子Selector「A > B」 / 兄弟Selector（隣接Selector）「A + B」 / 群組化「A, B」
+
+
+
虛擬元素
+
+
css
+
+:link / :visited / :active / :hover（※僅用於能用滑鼠操作的RS）
+
+!important 宣告
+
+@規則
+
+@charset / @font-face / @import / @media
+
+
+
色彩、背景
+
+
css
+
+color / background（僅限色彩） / background-color
+
+
+
Margin
+
+
css
+
+margin / margin-top / margin-right / margin-bottom / margin-left
+
+
+
Padding
+
+
css
+
+padding / padding-top / padding-right / padding-bottom / padding-left
+
+
+
Border
+
+
css
+
+border / border-top / border-right / border-bottom / border-left
+
+border-width / border-top-width / border-right-width / border-bottom-width / border-left-width
+
+border-style / border-top-style / border-right-style / border-bottom-style / border-left-style
+
+border-color / border-top-color / border-right-color / border-bottom-color / border-left-color
+
+
+
Font
+
+
css
+
+font / font-family / font-size / font-style / font-weight / line-height
+
+
+
Text
+
+
css
+
+text-align / text-decoration / text-indent / letter-spacing / vertical-align / word-wrap
+
+
+
寬與高
+
+
css
+
+width / height / max-width / max-height
+
+
+
顯示
+
+
css
+
+display (display: block; / display: inline-block; / display: inline; / display: none;)
+
+
+
Paged Media
+
+
css
+
+page-break-before / page-break-after / page-break-inside
+
+
+
CSS Text Level 3
+
+
css
+
+line-break / word-break / text-align-last
+
+
+
CSS Writing Modes Module Level 3
+
+
css
+
+writing-mode / text-orientation / text-combine / text-combine-horizontal
+
+
+
CSS Fonts Level 3
+
+
css
+
+@font-face (font-family / font-style / font-weight / src / unicode-range)
+
+
+
CSS Text Decoration Level 3
+
+
css
+
+text-emphasis / text-emphasis-color / text-emphasis-style / text-underline-position / text-decoration-style
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-017.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-017.xhtml"
new file mode 100644
index 0000000..f5ef94c
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-017.xhtml"
@@ -0,0 +1,181 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
RS不需支援的HTML元素與CSS屬性
+
+
【HTML】
+
+
文件的Metadata
+
+
base
+
+
+
Scripting
+
+
script / noscript
+
+
+
區塊元素
+
+
section / article / aside / header / footer / address
+
+
+
內容群組化
+
+
blockquote / ul / dl / dt / dd / figure / figcaption
+
+
+
為文字加入意義
+
+
em / strong / pre / subとsup / i / b / u / s / small / cite / q / dfn / abbr / time / code / var / samp / kbd / mark / bdi / bdo / wbr / rb / rtc / rp
+
+
+
修正
+
+
ins / del
+
+
+
插入內容
+
+
map / area / iframe / embed / object / param / video / audio / source / track / canvas / MathML / SVG（固定版面以外）
+
+
+
表格檔案
+
+
table / caption / colgroup / col / tbody / thead / tfoot / tr / td / th
+
+
+
表單
+
+
form / fieldset / legend / label / input / button / select / datalist / optgroup / option / textarea / keygen / output / progress / meter
+
+
+
互動元素
+
+
details / summary / command / menu
+
+
+
【CSS】
+
+
値
+
+
ex / in / cm / mm / pt / pc
+
+
+
選擇器
+
+
E:focus / E:lang(c) / E:first-child / E:first-line / E::first-line / E:first-letter / E::first-letter / E:before / E::before / E:after / E::after / E[foo^="bar"] / E[foo$="bar"] / E[foo*="bar"] / E:root / E:nth-child(n) / E:nth-last-child(n) / E:nth-of-type(n) / E:nth-last-of-type(n) / E:last-child / E:first-of-type / E:last-of-type / E:only-child / E:only-of-type / E:empty / E:target / E:enabled / E:disabled / E:checked / E:not(s) / E ~ F
+
+
+
@規則
+
+
@page / @page:left / @page:right / @page:first
+
+
+
色彩、背景
+
+
background-attachment / background-image / background-position / background-repeat
+
+
+
字體
+
+
font-size-adjust / font-stretch / font-variant
+
+
+
文字
+
+
text-shadow / text-transform / white-space / word-spacing
+
+
+
寬高
+
+
min-width / min-height
+
+
+
顯示
+
+
direction / visibility / clip / overflow / unicode-bidi / z-index / display: list-item; / display: table; / display: inline-table / display: table-row-group / display: table-header-group / display: table-footer-group / display: table-row / display: table-column-group / display: table-column / display: table-cell / display: table-caption
+
+
+
Paged Media
+
+
page / size / marks / orphans / widows
+
+
+
列表
+
+
list-style / list-style-type / list-style-position / list-style-image / marker-offset
+
+
+
文繞圖
+
+
float / clear
+
+
+
位置
+
+
position / top / right / bottom / left
+
+
+
表格
+
+
border-collapse / border-spacing / caption-side / empty-cells / table-layout
+
+
+
挿入
+
+
content / quotes / counter-reset / counter-increment
+
+
+
Outline
+
+
outline / outline-color / outline-style / outline-width
+
+
+
CSS 3.0 Speech
+
+
-epub-cue / -epub-pause / -epub-rest / -epub-speak / -epub-speak-as / -epub-voice-family
+
+
+
CSS Text Level 3
+
+
-epub-hyphens / text-transform: -epub-fullwidth / text-transform: -epub-fullsize-kana
+
+
+
CSS Writing Modes Module Level 3
+
+
caption-side: before / caption-side: after
+
+
+
CSS3 Multi Column
+
+
column-width / column-count / columns / column-gap / column-rule-color
+
+
+
CSS 2.0
+
+
list-style-type: cjk-ideographic / list-style-type: hebrew / list-style-type: hiragana / list-style-type: hiragana-iroha / list-style-type: katakana / list-style-type: katakana-iroha
+
+
+
EPUB 3
+
+
ex / in / cm / mm / pt / pc
+
+-epub-ruby-position / display: oeb-page-head / display: oeb-page-foot
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-018.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-018.xhtml"
new file mode 100644
index 0000000..81ec5d2
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-018.xhtml"
@@ -0,0 +1,65 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
出版社須提供的資料
+
+
本文件僅提供了製作電子書的基本格式。
+
+
出版社若有任何不同的製作細節與要求，需要自行準備並且提供。這裡列出一些範例。
+
+
圖片與內容文件與推薦、限制尺寸及容量不同的對應方式
+
+
目前各RS考量到硬體性能，會對XHTML的內容文件的檔案大小及圖片尺寸設定上限。例如XHTML檔案不得過大，如超過1MB等；圖片檔案總像素不得超過350萬像素等。同時也會提供推薦尺寸，例如雜誌、漫畫單頁圖片建議長邊為2048像素等。
+
+
出版社需要提供檔案大於限制時的處理方式，如切割、縮放；以及小於推薦尺寸時的處理方式，如放大，保持原尺寸等。
+
+
出版社特有頁面的範本與樣式表
+
+
出版社如果要提供版權頁、書名頁、章節頁的話，建議使用本文件預設的HTML元素與CSS值來製作，並且提供給製作者套用。
+
+
體裁的簡化規則
+
+
當紙本版面複雜，在電子書上難以顯示時，出版社需提供簡化規則。例如：部分RS無法提供楷體字，可以粗的黑體替代之；多張文繞圖無法顯示時，該將圖片與文字如何配置等。
+
+
常會出問題的要素
+
+
+圖片插入的位置
+標題尺寸，以及置換字體時如何簡化體裁
+標題層級的設定規則（如<h1>為書名，<h2>為章名，<h3>為中標等……）
+設計性強的章名頁與標題目錄該如何處理（以文字呈現還是做成圖片等）
+目錄頁與註解頁個項目的頁數要保留或者刪除
+字型（人名與書名等專有名詞）
+跨頁該如何處理
+折頁該如何處理
+寬字體、長字體的處理
+同一行中的上下對齊
+直排無法對其頁面正中時的處理
+是否要呈現空白頁面
+標題是否要換行的處理方式
+分隔線圖片要換成文字記號還是以圖片插入
+分欄該如何處理
+背景圖該如何處理
+版權頁的內容（例如是否要刪除印刷、經銷等資訊）
+廣告頁的處理（雜誌）
+「請參考第xx頁」的連結處理
+索引該如何處理
+
+
+
其中標題與內文等區塊文字尺寸的相對關係，建議個別提供給製作者。可以由桌上排版軟體提供設定的字型大小與數值提供表單。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-019.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-019.xhtml"
new file mode 100644
index 0000000..fb5ba09
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-019.xhtml"
@@ -0,0 +1,149 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
基本製作方式
+
+
+
+
製作電子書時請依照以下規則製作檔案。
+
+
關於檔案、資料夾名稱以及原始碼的命名規則，依照製作者不同會有不同的做法，但考量到未來修正時會造成麻煩，所以推進盡可能使用範本中提供的方法進行。
+
+
使用最新版的EPUBCHECK，檔案不能有任何錯誤（Error）
+
+
IDPF/epubcheck @ GitHub
+https://github.com/IDPF/epubcheck/
+
+若需要圖形介面版本，可使用：Pagina EPUB-CHECKER
+http://www.pagina-online.de/produkte/epub-checker/
+
+
+
請注意，像iBooks等閱讀程式，在讀入EPUB後會加入專用的檔案，造成EPUBCHECK檢查時出現錯誤。請注意這種會改變原有檔案的RS。檢查時請使用製作好的原始檔案，不要放進RS後再取出進行檢查。
+
+
基本的資料夾構成與檔案名
+
+
root 資料夾
+├ mimetype
+├ META-INF 資料夾
+│ └ container.xml
+└ item 資料夾
+ ├ standard.opf
+ ├ navigation-documents.xhtml
+ ├ image 資料夾
+ ├ style 資料夾
+ └ xhtml 資料夾
+
+
+
+root資料夾名稱可自行指定
+檔案與資料夾名稱基本上為小寫英文（META-INF以及其他有明確規定者除外）
+置放素材用的資料夾配合OPF裡的<item>元素，命名為「item」（規範上可自行更改）。
+素材請放進item資料夾中的指定資料夾，請不要另外製作。
+
+
+
圖片檔案 ：「image」資料夾
+CSS檔案 ：「style」資料夾
+xhtml檔案 ：「xhtml」資料夾
+
+
+以下檔案請不要修改（直接使用範本中的檔案）
+
+
+root資料夾裡的「mimetype」
+「META-INF」資料夾裡的「container.xml」
+
+各檔案的特別頁面，如書名與章名頁，建議與內文檔案以檔名做出區別。
+
+
+
+ 說明：RS在處理EPUB內部資料夾的實作上，必須要能夠讀取item資料夾中子資料夾內的內容，也就是需要支援第二層路徑。
+
+
+
檔案規格
+
+
+底本為跨頁的圖片或照片，請將左右頁結合成一張圖片，以對齊頁寬的方式插入。
+請於底本換頁處，將內容切割成不同的XHTML檔案
+
+沒有換頁的作品，請將單一檔案控制在256KB上下。附近有標題時，於標題前分割；沒有標題時，於空行位置分割。
+
+檔案的title全部填入書名
+XHTML文件中的<title>~</title>間請輸入書名，建議可以輸入該章節的章名。
+RS可以讀取各XHTML中的<title>來顯示在畫面之上，例如作為頁眉顯示。所以製作時請輸入正確的資訊。
+
+epub-type僅用於封面、導覽文件與註解
+EPUB規範中epub:type語法可用來標注各頁與各區塊的功能。
+但若完全按照規範進行，會使得製作變得相當複雜，這裡僅推薦使用三項功能：
+封面頁面：<body epub:type="cover" class="p-cover">
+導覽文件：<nav epub:type="toc" id="toc">
+註解：請參考前面的記述語法。
+
+
+
+
+
簡單的編碼規則
+
+
+文字編碼推薦使用UTF-8（無BOM）。
+換行代碼：CR/LF於單一文件中不要混用。
+不推薦使用本文件中未提及的HTML與CSS元素。
+不加入出版社指定外的註解（Comment）
+Class名稱使用邏輯方式記載
+Class與CSS在直排與橫排中，方向會有變化，現在Class使用邏輯方向，待未來CSS成熟後，可以直接對應。
+
+
+
行頭 ：start （直：top 横：left）
+行末 ：end （直：bottom 横：right）
+行的前方 ：before （直：right 横：top）
+行的後方 ：after （直：left 横：bottom）
+
+
+
+但在頁面整體設定上，當頁面只有圖片時為橫排，使用top/right/bottom/left也沒關係。
+此外，在CSS中，行的頭尾正中方向為center，並且作為class名稱。
+為了方便起見，頁面方向（行的前後方向）正中視為middle。
+本文內元素內各屬性的記載順序為epub:type → class → id → src/href → alt → 其他
+為了避免過於複雜，<p>盡量不要指定class。
+本文XHTML文件中HTML各元素的記述是否要換行。
+
+
+<div>等區塊元素，必需於開始與結束標籤前後換行。但<p>與標題用的<h1>~<h6>開始標籤之後與關閉標籤之前，請不要換行。
+行內元素（<span>等），原則上不換行。
+<a>的狀況。當<a>不是包覆區塊元素（包括<p>在內）時，請不要換行。
+
+
+
html
+× <h1>
+ 文字
+ </h1>
+
+ <div><p>文字</p></div>
+
+○ <h1>文字</h1>
+
+ <div>
+ <p>文字</p>
+ </div>
+
+
+
此外，當元素內的變化太多，而不曉得層級對應關係時，請不要繼續使用既有的class，而使用專用的class。
+
+
像是「想要讓特定角色的台詞使用特別字體」、「信件內文想要加上框線」遇到這些可能會進行樣式修正的部分。與提在元素內加入多數class達到效果，不如新增定義專用的class。
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-020.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-020.xhtml"
new file mode 100644
index 0000000..3956e44
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-020.xhtml"
@@ -0,0 +1,212 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
範本：流式版型
+
+
必要的設定檔案
+
+
關於範本內的顏色標注
+
+
灰色 ：全作品共通部分（原則上不進行更動）
+
+
藍色 ：全作品共通部分中，依照作品不同而須變更的部分
+
+
紅色 ：使用範本時特別需要注意的部分
+
+
黑色 ：非固定部分（依照作品與出版社而可有所差異）
+
+
mimetype
+
+
[檔名：mimetype]
+
+
application/epub+zip
+
+
+
META-INF中的container.xml
+
+
[檔名：container.xml]
+
+
<?xml version="1.0"?>
+<container
+ version="1.0"
+ xmlns="urn:oasis:names:tc:opendocument:xmlns:container"
+>
+<rootfiles>
+ <rootfile
+ full-path="item/standard.opf"
+ media-type="application/oebps-package+xml"
+ />
+</rootfiles>
+</container>
+
+
+
導覽文件
+
+
[檔名：navigation-documents.xhtml]
+
+
備註：
+
+
+連結項目與列表層級依照作品內容修改。
+若出版社沒有特別指示，僅提供封面頁、目錄頁、版權頁的連結即可。
+本規格不支援在導覽文件中加入沒有連結的項目。
+導覽文件的顯示方式，由RS自行決定。
+若要讓導覽文件作為本文內的目錄頁顯示時，請參考後面本文頁面的範例，加入樣式表。
+
+
+
html
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+>
+<head>
+<meta charset="UTF-8"/>
+<title>Navigation </title>
+</head>
+<body>
+<nav epub:type="toc" id="toc">
+ <h1>目錄 </h1>
+ <ol>
+ <li><a href="xhtml/p-cover.xhtml">封面</a></li>
+ <li><a href="xhtml/p-toc.xhtml">目錄</a></li>
+ <li><a href="xhtml/p-colophon.xhtml">版權頁</a></li>
+ </ol>
+ </nav>
+ </body>
+ </html>
+
+
+
OPF檔案
+
+
[檔名：standard.opf]
+
+
備註：
+
+
+當RS具備顯示<dc:title>資訊功能時，預設會在RS內某一處顯示全部的記載內容。
+當RS具備顯示<dc:creator>資訊功能時，預設會將複數<dc:creator>於RS內某一處顯示全部的記載內容。（連結複數作者的符號與角色，由RS自行決定之）
+作者名要一一分開，還是於單一<dc:creator>中記載全部作者，由出版社自行決定。若分別顯示，必須按照出版社給與各作者的「role」值，以及作者的顯示順序顯示。
+檔案id（unique-identifier）原則上使用urn:isbn:xxxxxxxxxxxx，ISBN間不加連字號。沒有ISBN時，輸入UUID。
+更新日期沒有特別指定時，輸入製作日期。
+更新日期不應該對讀者顯示。
+封面圖片在沒有特別指示下，為了便於辨識，請使用相同檔案名（cover.jpg)。
+書為橫排時，將<spine>中的page-progression-direction的rtl改為ltr，或者刪除，即沒有指定page-progression-direction時，預設為橫排書。
+
+
+
xml
+
+<?xml version="1.0" encoding="UTF-8"?>
+<package
+ xmlns="http://www.idpf.org/2007/opf"
+ version="3.0"
+ xml:lang="zh-TW"
+ unique-identifier="unique-id "
+ prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/ rendition: http://www.idpf.org/vocab/rendition/#"
+>
+
+<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
+
+ <!-- 書名 -->
+ <dc:title id="title">書名 </dc:title>
+
+ <!-- 作者名 -->
+ <dc:creator id="creator01">作者名１ </dc:creator>
+ <meta refines="#creator01" property="role" scheme="marc:relators">aut </meta>
+ <meta refines="#creator01" property="display-seq">1 </meta>
+ <dc:creator id="creator02">作者名２ </dc:creator>
+ <meta refines="#creator02" property="role" scheme="marc:relators">aut </meta>
+ <meta refines="#creator02" property="display-seq">2 </meta>
+
+ <!-- 出版社名 -->
+ <dc:publisher id="publisher">出版社名 </dc:publisher>
+
+ <!-- 語言 -->
+ <dc:language>zh-TW</dc:language>
+
+ <!-- 檔案id -->
+ <dc:identifier id="unique-id ">urn:uuid:d7a8d311-7cd0-40df-9443-65847561decf </dc:identifier>
+
+ <!-- 更新日期 -->
+ <meta property="dcterms:modified">2014-01-01T00:00:00Z </meta>
+
+ <!-- iBook指定字體 -->
+ <meta property="ibooks:specified-fonts">true</meta>
+
+</metadata>
+
+<manifest>
+
+ <!-- navigation —>
+ <item media-type="application/xhtml+xml" id="toc " href="navigation-documents.xhtml " properties="nav" />
+
+ <!-- style -->
+ <item media-type="text/css" id="book-style" href="style/book-style.css"/>
+ <item media-type="text/css" id="style-reset" href="style/style-reset.css"/>
+ <item media-type="text/css" id="style-standard" href="style/style-standard.css"/>
+ <item media-type="text/css" id="style-advance" href="style/style-advance.css"/>
+ <item media-type="text/css" id="style-check" href="style/style-check.css"/>
+ <item media-type="text/css" id="font" href="style/font.css"/>
+
+ <!-- image -->
+ <item media-type="image/jpeg " id="cover" href="image/cover.jpg " properties="cover-image" />
+ <item media-type="image/png" id="logo-bunko" href="image/logo-bunko.png"/>
+ <item media-type="image/jpeg" id="kuchie-001" href="image/kuchie-001.jpg"/>
+ <item media-type="image/jpeg" id="img-001" href="image/img-001.jpg"/>
+ <item media-type="image/jpeg" id="ad-001" href="image/ad-001.jpg"/>
+
+ <!-- xhtml -->
+ <item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" properties="svg" />
+ <item media-type="application/xhtml+xml" id="p-fmatter-001" href="xhtml/p-fmatter-001.xhtml" properties="svg" />
+ <item media-type="application/xhtml+xml" id="p-titlepage" href="xhtml/p-titlepage.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-caution" href="xhtml/p-caution.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-toc" href="xhtml/p-toc.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-001.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-002" href="xhtml/p-002.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-003" href="xhtml/p-003.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-004" href="xhtml/p-004.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-005" href="xhtml/p-005.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-colophon" href="xhtml/p-colophon.xhtml"/>
+ <item media-type="application/xhtml+xml" id="p-ad-001" href="xhtml/p-ad-001.xhtml"/>
+
+</manifest>
+
+<spine page-progression-direction="rtl ">
+
+ <itemref linear="yes" idref="p-cover" properties="rendition:layout-pre-paginated rendition:spread-none rendition:page-spread-center" />
+ <itemref linear="yes" idref="p-fmatter-001" properties="rendition:layout-pre-paginated rendition:spread-auto page-spread-left" />
+ <itemref linear="yes" idref="p-titlepage" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-caution" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-toc" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-001" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-002" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-003" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-004"/>
+ <itemref linear="yes" idref="p-005"/>
+ <itemref linear="yes" idref="p-colophon" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-ad-001"/>
+
+</spine>
+
+</package>
+
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-021.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-021.xhtml"
new file mode 100644
index 0000000..9992dfb
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-021.xhtml"
@@ -0,0 +1,153 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
XHTML文件檔案
+
+
關於範本內的顏色標注
+
+
灰色 ：全作品共通部分（原則上不進行更動）
+
+
藍色 ：全作品共通部分中，依照作品不同而須變更的部分
+
+
紅色 ：使用範本時特別需要注意的部分
+
+
黑色 ：非固定部分（依照作品與出版社而可有所差異）
+
+
淺藍色的□ ：代表全形空白
+
+
關於排版方向
+
+
排版方向於各頁的<html>中依以下記載方式指定
+
+
class="hltr"：横排 排版方向 h（Horizontal） 行方向 ltr（Left To Right）
+class="vrtl"：直排 排版方向 v（Vertical） 行方向 rtl（Right To Left）
+
+
+
+目前CSS3尚不支援「直排的ltr」。
+只有圖片的頁面，為將圖片放在正中央，採用橫排。
+
+
+
封面頁
+
+
[檔名：p-cover.xhtml]
+
+
備註：
+
+
+預設為置放為正中央
+除圖片以外，不加入任何內容
+沒有封面圖片時，RS需要加入代替圖片
+
+
+
OPF
+
+<manifest>
+ <item media-type="application/xhtml+xml" href="p-cover.xhtml" id="p=cover.xhtml" properties="svg" />
+</manifest>
+
+<spine>
+ <itemref linear="yes" idref="p-cover" properties="rendition:layout-pre-paginated rendition:spread-none rendition:page-spread-center" />
+</spine>
+
+
+
<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr"
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <meta name="viewport" content="width=圖寬 ,height=圖高 " />
+ <style type="text/css">
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
+ </style>
+ <title>書名 </title>
+ </head>
+ <body epub:type="cover" class="p-cover" >
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 圖寬 圖高 ">
+ <image width="圖寬 " height="圖高 " xlink:href="../image/cover.jpg（封面圖檔名） "/>
+ </svg>
+ </body>
+</html>
+
+
+
正文前（本例為插畫）
+
+
[檔名：p-fmatter-***.xhtml]（本例為「p-fmatter-001.xhtml」
+
+
備註：
+
+
+封面頁到書名頁之間的頁面，方便上全稱為正文前
+圖片頁使用SVG Wrapping，必需 於OPF檔案的<manifest>項目加入properties="svg"，且於<spine>項目加入properties="rendition:layout-pre-paginated rendition:spread-none rendition:page-spread-x"
+圖片頁於<head>內不帶入預設的CSS，而以以下CSS取代：
+
+
+
<style type="text/css">
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
+</style>
+
+
+
+RS需要支援圖片頁rendition:page-spread-x指定的左頁（left）與右頁（right），推薦支援置中（center）
+不限使用圖片頁
+
+
+
+<manifest>
+ <item media-type="application/xhtml+xml" href="p-fmatter-001.xhtml" id="p-fmatter-001.xhtml" properties="svg" />
+</manifest>
+
+<spine>
+ <itemref linear="yes" idref="p-fmatter-001" properties="rendition:layout-pre-paginated rendition:spread-none rendition:page-spread-left" />
+</spine>
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr"
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <meta name="viewport" content="width=圖寬 ,height=圖高 " />
+ <style type="text/css">
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
+ </style>
+ <title>書名 </title>
+ </head>
+ <body class="p-image">
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 圖寬 圖高 ">
+ <image width="圖寬 " height="圖高 " xlink:href="../image/kuchie-001.jpg（圖檔名） "/>
+ </svg>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-022.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-022.xhtml"
new file mode 100644
index 0000000..6cf7c50
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-022.xhtml"
@@ -0,0 +1,64 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
書名頁
+
+
[檔名：p-titlepage.xhtml]
+
+
備註：內容與排版方向，依照出版社與作品而不同。（下面內容與Class名為參考用）
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-titlepage ">
+ <div class="main">
+ <div class="book-title">
+ <div class="book-title-before">
+ <p>副標・前</p>
+ </div>
+ <div class="book-title-main">
+ <p>主標</p>
+ </div>
+ <div class="book-title-after">
+ <p>副標・後</p>
+ </div>
+ </div>
+ <div class="author">
+ <p>作者名１</p>
+ <p>作者名２</p>
+ </div>
+ <div class="label">
+ <p class="label-logo"><img src="../image/logo-bunko.png" alt=""/></p>
+ <p class="label-name">●●文庫</p>
+ </div>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-023.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-023.xhtml"
new file mode 100644
index 0000000..c02e2d1
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-023.xhtml"
@@ -0,0 +1,51 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
電子版用的說明頁面
+
+
[檔名：p-caution.xhtml]
+
+
備註：
+
+
+內容與排版方向，依照出版社與作品而不同。
+本頁預設適用於所有書籍，說明「版面與文字尺寸與印刷書有所不同」，可以追加各作品特別需要注意之處。若沒有特別指示，可以刪除。
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="vrtl "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-caution" >
+ <div class="main">
+ <p>說明與印刷書的差異，禁止複製轉載等等。</p>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-024.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-024.xhtml"
new file mode 100644
index 0000000..f1a5f75
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-024.xhtml"
@@ -0,0 +1,59 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
目錄頁
+
+
[檔名：p-toc.xhtml]
+
+
備註：
+
+
+若使用導覽文件作為書內目錄的話，不需要加入此頁
+內容與排版方向，依照作品而有所不同
+沒有特別指示的狀況下，連結的頁面需要加入id定位
+沒有特別指示的狀況下，跳轉後頁面不需要設定返回目錄頁的連結
+標題元素等使用的class不是固定，可自行變更（可如<h1 class="gfont font-1em30">這樣，直接在Class裡指定尺寸與字體等）
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="vrtl "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-toc" >
+ <div class="main">
+ <h1>□ 目錄標題</h1>
+ <p><br/></p>
+ <p><br/></p>
+ <p><a href="p-001.xhtml#toc-001">目錄項目１</a></p>
+ <p>□ <a href="p-002.xhtml#toc-002"><span class="font-0em80">目錄項目２</span></a></p>
+ <p>□ <a href="p-002.xhtml#toc-003"><span class="font-0em80">目錄項目３</span></a></p>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-025.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-025.xhtml"
new file mode 100644
index 0000000..86a93f4
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-025.xhtml"
@@ -0,0 +1,57 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
章名頁
+
+
[檔名：p-xxx.xhtml] (本例為p-001.xhtml)
+
+
備註：
+
+
+內容與排版方向，依照作品而有所不同
+關於由目錄連結連入的id指定位置（本文頁面相同）
+
+沒有特別指示下，若有與目錄項目相同的標題元素，將id指定於該處
+若沒有標題元素（例如只有圖片等）或者在標題前有需要顯示的內容的話，請在連結內容前最接近的<p>或<div>等於CSS中指定為{display: block;}等元素（區塊層級元素）加上id
+
+檔案名使用如「p-001」三位連續編號時，若超過三位數時，請自行挑整檔案名稱
+標題元素等使用的class不是固定，可自行變更（可如<h1 class="gfont font-1em30">這樣，直接在Class裡指定尺寸與字體等）
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="vrtl "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-tobira" >
+ <div class="main">
+ <p class="tobira-midashi" id="toc-001">第一章□ 天地玄黃宇宙洪荒</p>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-026.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-026.xhtml"
new file mode 100644
index 0000000..7af43d6
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-026.xhtml"
@@ -0,0 +1,62 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
內文頁面（直排）
+
+
[檔名：p-***.xhtml] (本例為p-002.xhtml)
+
+
備註：
+
+
+內容與排版方向，依照作品而有所不同
+標題元素等使用的class不是固定，可自行變更（可如<h1 class="gfont font-1em30">這樣，直接在Class裡指定尺寸與字體等）
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="vrtl "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-text ">
+ <div class="main">
+ <h1 id="toc-002">第一節□天地玄黃宇宙洪荒</h1>
+ <p><br/></p>
+ <p><br/></p>
+ <p>□□ 本文為範例。</p>
+ <p>□□ 「本文為範例」</p>
+ <p><br/></p>
+ <h2 id="toc-003">□□□□ 第一項</h2>
+ <p><br/></p>
+ <p>□□ 本文為範例。</p>
+ <p>□□ 本文為範例。</p>
+ <p><img class="fit" src="../image/img-001.jpg" alt=""/></p>
+ <p>□□ 本文為範例。</p>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-027.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-027.xhtml"
new file mode 100644
index 0000000..95d8dd1
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-027.xhtml"
@@ -0,0 +1,62 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
內文頁面（橫排）
+
+
[檔名：p-***.xhtml] (本例為p-003.xhtml)
+
+
備註：
+
+
+只改變<html>內的class，基本上與橫排相同
+內容與排版方向，依照作品而有所不同
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-text" >
+ <div class="main">
+ <h1 class="oo-midashi" id="toc-002">第一節□天地玄黃宇宙洪荒</h1>
+ <p><br/></p>
+ <p><br/></p>
+ <p>□□ 本文為範例。</p>
+ <p>□□ 「本文為範例」</p>
+ <p><br/></p>
+ <h2 class="ko-midashi" id="toc-003">□□□□ 第一項</h2>
+ <p><br/></p>
+ <p>□□ 本文為範例。</p>
+ <p>□□ 本文為範例。</p>
+ <p><img class="fit" src="../image/img-001.jpg" alt=""/></p>
+ <p>□□ 本文為範例。</p>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-028.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-028.xhtml"
new file mode 100644
index 0000000..e523275
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-028.xhtml"
@@ -0,0 +1,53 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
內文頁面（只有圖片）
+
+
[檔名：p-***.xhtml] (本例為p-004.xhtml)
+
+
備註：
+
+
+內容與排版方向，依照作品而有所不同
+預設為置放為正中央
+如果靠右對齊也可以的話，<html>的class指定為直排也沒關係
+除圖片以外，不加入任何內容
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-image ">
+ <div class="main">
+ <p><img class="fit" src="../image/img-001.jpg" alt=""/></p>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-029.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-029.xhtml"
new file mode 100644
index 0000000..ae0c293
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-029.xhtml"
@@ -0,0 +1,63 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
指定頁面整體的對齊位置
+
+
[檔名：p-***.html] (本例為p-005.xhtml)
+
+
備註：
+
+
+以文字為主和以圖片為主的頁面都相同
+頁面整體的對齊方向，於<div class="main">裡，指定class="align-***"
+
+
+
align-justify ： 對齊兩端（只有最後一行對齊行頭、文字內容內文以此為預設值）
+align-start ： 對齊行首（只有圖片的頁面若為橫排的話，請注意start=對左靠齊）
+align-left ： 對齊行首
+align-center ： 對齊行中（橫排時為天地的中央，直排時為左右中央，圖片頁面的預設值）
+align-end ： 對齊行尾
+align-right ： 對齊行尾
+
+
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-image" >
+ <div class="main align-left" >
+ <p><img class="fit" src="../image/img-001.jpg" alt=""/></p>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-030.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-030.xhtml"
new file mode 100644
index 0000000..4906f0b
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-030.xhtml"
@@ -0,0 +1,84 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
版權頁
+
+
[檔名：p-colophon.xhtml]
+
+
備註：內容與排版方向，依照作品而有所不同（以下內容包含class名全為參考用）
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-colophon" >
+ <div class="main">
+ <div class="book-title">
+ <div class="book-title-before">
+ <p>副標題・前</p>
+ </div>
+ <div class="book-title-main">
+ <p>主標題</p>
+ </div>
+ <div class="book-title-after">
+ <p>副標題・後</p>
+ </div>
+ </div>
+ <div class="author">
+ <p>作者名１</p>
+ <p>作者名２</p>
+ </div>
+ <div class="label">
+ <p class="label-logo"><img src="../image/logo-bunko.png" alt=""/></p>
+ </div>
+ <div class="release-date">
+ <p>民國xx年xx月xx日□ 發行</p>
+ </div>
+ <div class="publisher-data">
+ <p class="publish-person">發行人□ ●●●</p>
+ <p class="publish-company">出版社□ ●●出版</p>
+ <p class="publish-address">台北市●●●●</p>
+ <p class="publish-url">http://www.***.com.tw/</p>
+ </div>
+ <div class="copyright">
+ <p>(C) author01 20xx</p>
+ <p>(C) author02 20xx</p>
+ </div>
+ <div class="kotowarigaki">
+ <p>（版權警告）</p>
+ </div>
+ <div class="original-books">
+ <p>本電子書基於以下書籍製作</p>
+ <p class="original-first-edition">《底本名》民國xx年xx月xx日初版</p>
+ <p class="original-used-edition">民國xx年xx月xx日第xx版</p>
+ </div>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-031.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-031.xhtml"
new file mode 100644
index 0000000..ac64b72
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-031.xhtml"
@@ -0,0 +1,52 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
廣告頁
+
+
[檔名：p-ad-***.xhtml] (本例為p-ad-001.xhtml)
+
+
備註：
+
+
+內容與排版方向，依照作品而有所不同
+不限使用圖片頁
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-image" >
+ <div class="main">
+ <p><img class="fit" src="../image/ad-001.jpg" alt=""/></p>
+ </div>
+ </body>
+</html>
+
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-032.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-032.xhtml"
new file mode 100644
index 0000000..6482317
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-032.xhtml"
@@ -0,0 +1,92 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
【參考資訊】本文件不推薦的項目
+
+
直排文字居中頁面
+
+
備註：
+
+
+混合排版方向支援狀況不一，需要確認是否每一款RS都能支援
+內容會溢出頁面而有部分受到裁切，需要確認顯示的螢幕尺寸
+橫排中直排區塊為子項目，更改排版方向時需要注意不會變更的Class的值（特別為邊界）
+由於天地的邊界為0，必要時需要在<div class="main">的內部再加上一層<div>並且設定margin與padding。（使用本方法時，<body>以及<div class="main">等不可以追加margin與padding。.p-text等於<body>指定的class，追加margin等可能不會如預期一般顯示
+文字頁面若將vrtl block-align-center指定於<div class="main">，而不是<body>時，必須將<body>的margin與padding指定為0
+想要向左對齊時，請將下記的block-align-center更改為block-align-left (or start)（橫排頁面的end=right，請多加注意
+章名頁（.p-tobira）等使用方法相同
+橫排想要指定為頁面正中央時，請將以下的hltr更換成vrtl，這時，main若不指定為width-100per，就會向右對齊（基本上為直排，所以會由右向左排列元素）。
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-text ">
+ <div class="main vrtl block-align-center ">
+ <div class="start-2em"> // ←頁面整體的縮排，指定於更裡面的<div>
+ <p>天地玄黃，宇宙洪荒</p>
+ </div>
+ </div>
+ </body>
+</html>
+
+
+
以下為將圖片置放於左下角的範例
+
+
備註：
+
+
+想要對齊頁底時，若<body>下面一層的<div class="main">的高不指定為100%的話，Webkit系的排版引擎位置可能會錯開（橫排時，請將寬度設定為100%）
+以下案例為了方便確認效果，圖片設定為整頁高度的50%（<img class="fit max-height-050per"/>）
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+ class="hltr "
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
+ </head>
+ <body class="p-text ">
+ <div class="main vrtl block-align-left height-100per ">
+ <div class="align-end"> // ←位於頁面全體下方，請設定於內側的<div>
+ <p><img class="fit max-height-050per" src="../image/img-001.jpg" alt=""/></p>
+ </div>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-033.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-033.xhtml"
new file mode 100644
index 0000000..c2ec9a5
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-033.xhtml"
@@ -0,0 +1,72 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
範本：固定版面型
+
+
固定版面型範本，RS在實作上需要注意兩點：
+
+
一是內頁圖片使用SVG Wrapping，透過SVG語法來包覆圖片，放大到整頁滿版顯示。二是透過ImageMap功能，做到應用於目錄等內頁連結。
+
+
必要的設定檔案
+
+
+ TODO: markdown 不易標示顏色，此處需改寫
+
+
+
關於範本內的顏色標注
+
+
灰色：全作品共通部分（原則上不進行更動）
+
+
藍色：全作品共通部分中，依照作品不同而須變更的部分
+
+
紅色：使用範本時特別需要注意的部分
+
+
黑色：非固定部分（依照作品與出版社而可有所差異）
+
+
mimetype
+
+
[檔名：mimetype]
+
+
備註：與文字重排型相同
+
+
+application/epub+zip
+
+
+
+
META-INF中的container.xml
+
+
[檔名：container.xml]
+
+
備註：與文字重排型相同
+
+
+<?xml version="1.0"?>
+<container
+ version="1.0"
+ xmlns="urn:oasis:names:tc:opendocument:xmlns:container"
+>
+ <rootfiles>
+ <rootfile
+ full-path="item/standard.opf"
+ media-type="application/oebps-package+xml"
+ />
+ </rootfiles>
+</container>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-034.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-034.xhtml"
new file mode 100644
index 0000000..0373313
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-034.xhtml"
@@ -0,0 +1,51 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
導覽文件
+
+
[檔名：navigation-documents.xhtml]
+
+
備註：基本與文字重排型相同
+
+
檔名為連續編號時，可以適當調整（以下案例中目錄為p-001.xhtml)
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>目錄 </title>
+ </head>
+ <body>
+ <nav epub:type="toc" id="toc" >
+ <h1>目錄 </h1>
+ <ol>
+ <li><a href="xhtml/p-cover.xhtml">封面</a></li>
+ <li><a href="xhtml/p-001.xhtml">目錄</a></li>
+ <li><a href="xhtml/p-colophon.xhtml">版權頁</a></li>
+ </ol>
+ </nav>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-035.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-035.xhtml"
new file mode 100644
index 0000000..c8cb60d
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-035.xhtml"
@@ -0,0 +1,126 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
OPF檔案
+
+
[檔名：standard.opf]
+
+
備註：
+
+
+與文字重排型的差異為以下各點：
+
+於<package>元素中追加prefix
+於<!--Fixed-Layout Document指定-->部份追加兩個<meta>元素
+樣式表僅使用fixed-layout.cc
+封面頁的<spine>元素中的<itemref>追加properties="rendition:page-spread-center
+封面頁以外的各頁面，<spine>元素中的<itemref>左右頁必須成對
+其他與文字重排相同
+
+<spine>元素中的<itemref>，若idref重複的話會出現問題，如無法顯示，頁面迴圈，當想讓相同圖片出現兩次以上時，推薦使用不同的xhtml（如第二次顯示空白頁時，使用white2.xhtml等）
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<package
+ xmlns="http://www.idpf.org/2007/opf"
+ version="3.0"
+ xml:lang="zh-TW"
+ unique-identifier="unique-id "
+ prefix="rendition: http://www.idpf.org/vocab/rendition/#
+>
+
+ <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
+
+ <!-- 書名 -->
+ <dc:title id="title">書名１ </dc:title>
+
+ <!-- 作者名 -->
+ <dc:creator id="creator01">作者名１ </dc:creator>
+ <meta refines="#creator01" property="role" scheme="marc:relators">aut </meta>
+ <meta refines="#creator01" property="display-seq">1 </meta>
+ <dc:creator id="creator02">作者名２ </dc:creator>
+ <meta refines="#creator02" property="role" scheme="marc:relators">aut </meta>
+ <meta refines="#creator02" property="display-seq">2 </meta>
+
+ <!-- 出版社名 -->
+ <dc:publisher id="publisher">出版社名 </dc:publisher>
+
+ <!-- 語言 -->
+ <dc:language>zh-TW</dc:language>
+
+ <!-- 書籍id -->
+ <dc:identifier id="unique-id ">urn:uuid:860ddf31-55a4-449a-8cc9-3c1837657a15 </dc:identifier>
+
+ <!-- 更新日期 -->
+ <meta property="dcterms:modified">2014-01-01T00:00:00Z </meta>
+
+ <!-- Fixed-Layout Documents指定 -->
+ <meta property="rendition:layout">pre-paginated</meta>
+ <meta property="rendition:spread">landscape</meta>
+
+ </metadata>
+
+ <manifest>
+
+ <!-- navigation -->
+ <item media-type="application/xhtml+xml" id="toc " href="navigation-documents.xhtml " properties="nav" />
+
+ <!-- style -->
+ <item media-type="text/css" id="fixed-layout " href="style/fixed-layout.css "/>
+
+ <!-- image -->
+ <item media-type="image/jpeg " id="cover" href="image/cover.jpg " properties="cover-image" />
+ <item media-type="image/jpeg" id="i-white" href="image/i-white.jpg"/>
+ <item media-type="image/jpeg" id="i-001" href="image/i-001.jpg"/>
+ <item media-type="image/jpeg" id="i-002" href="image/i-002.jpg"/>
+ <item media-type="image/jpeg" id="i-003" href="image/i-003.jpg"/>
+ <item media-type="image/jpeg" id="i-004" href="image/i-004.jpg"/>
+ <item media-type="image/jpeg" id="i-005" href="image/i-005.jpg"/>
+ <item media-type="image/jpeg" id="i-colophon" href="image/i-colophon.jpg"/>
+
+ <!-- xhtml -->
+ <item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" properties="svg"/>
+ <item media-type="application/xhtml+xml" id="p-white" href="xhtml/p-white.xhtml" properties="svg"/>
+ <item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-001.xhtml" properties="svg"/>
+ <item media-type="application/xhtml+xml" id="p-002" href="xhtml/p-002.xhtml" properties="svg"/>
+ <item media-type="application/xhtml+xml" id="p-003" href="xhtml/p-003.xhtml" properties="svg"/>
+ <item media-type="application/xhtml+xml" id="p-004" href="xhtml/p-004.xhtml" properties="svg"/>
+ <item media-type="application/xhtml+xml" id="p-005" href="xhtml/p-005.xhtml" properties="svg"/>
+ <item media-type="application/xhtml+xml" id="p-colophon" href="xhtml/p-colophon.xhtml" properties="svg"/>
+ <item media-type="application/xhtml+xml" id="p-white2" href="xhtml/p-white2.xhtml" properties="svg"/>
+
+ </manifest>
+
+ <spine page-progression-direction="rtl ">
+
+ <itemref linear="yes" idref="p-cover" properties="rendition:page-spread-center" />
+ <itemref linear="yes" idref="p-white" properties="page-spread-right"/>
+ <itemref linear="yes" idref="p-001" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-002" properties="page-spread-right"/>
+ <itemref linear="yes" idref="p-003" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-004" properties="page-spread-right"/>
+ <itemref linear="yes" idref="p-005" properties="page-spread-left"/>
+ <itemref linear="yes" idref="p-colophon" properties="page-spread-right"/>
+ <itemref linear="yes" idref="p-white2" properties="page-spread-left"/>
+
+ </spine>
+
+</package>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-036.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-036.xhtml"
new file mode 100644
index 0000000..38f03f5
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-036.xhtml"
@@ -0,0 +1,66 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
XHTML文件檔案
+
+
關於範本內的顏色標注
+
+
灰色：全作品共通部分（原則上不進行更動）
+
+
藍色：全作品共通部分中，依照作品不同而須變更的部分
+
+
紅色：使用範本時特別需要注意的部分
+
+
黑色：非固定部分（依照作品與出版社而可有所差異）
+
+
封面頁
+
+
[檔名：p-cover.xhtml]
+
+
備註：
+
+
+下記三處藍色記載圖片原來尺寸
+圖片尺寸於書內請統一
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/fixed-layout.css "/>
+ <meta name="viewport" content="width=848 , height=1200 "/>
+ </head>
+ <body epub:type="cover" >
+ <div class="main">
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 848 1200 ">
+ <image width="848 " height="1200 " xlink:href="../image/cover.jpg "/>
+ </svg>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-037.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-037.xhtml"
new file mode 100644
index 0000000..53f0e26
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-037.xhtml"
@@ -0,0 +1,91 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
內文頁
+
+
[檔名：p-***.xhtml（範例為p-002.xhtml）]
+
+
備註：除了沒有epub:type="cover"以外，和封面頁相同
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/fixed-layout.css "/>
+ <meta name="viewport" content="width=848 , height=1200 "/>
+ </head>
+ <body>
+ <div class="main">
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 848 1200 ">
+ <image width="848 " height="1200 " xlink:href="../image/i-002.jpg "/>
+ </svg>
+ </div>
+ </body>
+</html>
+
+
+
內文ImageMap（Clickable Map）頁面
+
+
[檔名：p-***.xhtml（範例為p-001.xhtml）]
+
+
備註：
+
+
+a元素的xlink:href屬性，請記載要連結的檔案名稱
+rect元素的x與y屬性，請記載點擊範圍開始位置（左上）的座標
+rect元素的width與height屬性，請記載點擊範圍的尺寸
+
+
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:epub="http://www.idpf.org/2007/ops"
+ xml:lang="zh-TW" lang="zh-TW"
+>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>書名 </title>
+ <link rel="stylesheet" type="text/css" href="../style/fixed-layout.css "/>
+ <meta name="viewport" content="width=848 , height=1200 "/>
+ </head>
+ <body>
+ <div class="main">
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 848 1200 ">
+ <image width="848 " height="1200 " xlink:href="../image/i-001.jp g"/>
+ <a xlink:href="p-002.xhtml" target="_top"><rect fill-opacity="0.0" x="476" y="1000" width="300" height="60"/></a>
+ <a xlink:href="p-colophon.xhtml" target="_top"><rect fill-opacity="0.0" x="476" y="1075" width="300" height="60"/></a>
+ </svg>
+ </div>
+ </body>
+</html>
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-038.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-038.xhtml"
new file mode 100644
index 0000000..ea09134
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-038.xhtml"
@@ -0,0 +1,27 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
+
+
+ 說明：關於本節中提及之樣式表範本以及使用本樣式表製作之文字書範例，可由此處下載：
+ 樣式表範本
+ Reflow 文字書 直排
+Reflow 文字書 橫排
+
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-039.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-039.xhtml"
new file mode 100644
index 0000000..c86017a
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-039.xhtml"
@@ -0,0 +1,217 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
CSS檔案的使用規則
+
+
支援@import讀入CSS
+
+
範本為了讓XHTML檔案的內容能夠統一，XHTML側僅會讀入主要CSS，然後將其他CSS透過主要CSS以@import規則讀入。
+
+
但根據頁面不同，想要調整CSS時（例如要使用全客製化的CSS），則不在此限。
+
+
原則上不調整預設CSS
+
+
原則上不修改範本中的CSS。
+
+
當要變更數值時，請於book-style.css末的客製化空間，或者出版社自行準備樣式表予以覆蓋。
+
+
修改、新增請自行負責
+
+
本文件不使用複雜排版會用到的CSS，如果要進行以下調整，請自行進行檢查確認。
+
+
+修改Class所設定的值
+於Class中新增語法
+未調整優先順序，修改記載位置
+修改與其他Class連動的Class名稱
+新增Class
+新增出版社自己的樣式表
+
+
+
可以將不需要的Class刪除讓檔案縮小，註解行使用自動化刪除也不會影響動作，但請注意不要將使用到的Class等刪除。
+
+
避免id重複
+
+
id只要在各XHTML檔案中不重複的話就沒問題，但考量到EPUB中有多數XHTML檔案，建議使用不重複的id。
+
+
製作或追加固定Class
+
+
概要：
+
+
縮排或者尺寸指定等一部份樣式表，可能會遇到預設值不足的狀況，畢竟無法窮舉，在預設表中僅使用到常用的值而已。
+
+
例如調整字體尺寸，最大僅到300%，若要使用400%等不在預設值的數值，則需要自己新增逾樣式表中。
+
+
當新增數量不多時，請使用book-style.css裡的「作品特有客製化空間」。
+
+
當使用固定Class時，請使用既有的Class與語法，修改數值即可。未來在修改調整時，對方也可以一目了然知道該怎麼調整。
+
+
當新增數量多，或者想要使用於多數作品時，請準備自有的樣式表，於book-style.css中透過@import讀入。
+
+
例如版權頁、系列頁等會固定使用頁面專用的Class，建議使用獨立的CSS檔案進行管理。
+
+
固定Class的種類
+
+
Ａ・不分直橫排，內容不需要修改的項目
+
+
如字型大小與色彩指定等，無論直排與橫排都使用相同的語法。例如在style-standard.css中的字型尺寸語法為：
+
+
+
+
像是1.25em等，需要用到不在範本中的尺寸時，可以如下面僅修改class名與值為尺寸數，建立新的Class來使用。
+
+
/* -------------------------------------------------------------
+ * 作品專屬客製化區塊
+ * ------------------------------------------------------------- */
+
+.font-1em25 { font-size: 1.25em; }
+
+
+
+
小數點以下的值，請如上記一般到小數點後二位即可。由於Class名不能使用點號，所以整數值放在單位前，小數值放在單位後，沒有小數值時，請如下僅採用整數值作為Class名。
+
+
+
+
當Class使用百分比時，請如下以三位數字並列來命名
+
+
+
+
Ｂ・隨直橫排而需要調整語法的項目
+
+
例如首行凸排語法，直排時會使用到上方的padding，橫排時會使用到左方的padding，但可以透過相同的Class名稱通用於直橫排。以下為實際在style-standard.css裡的凸排語法。
+
+
+
+
針對橫排的語法請在Class前加上.hltr和半型空白，針對直排則是加上.vltr和半型空白。
+
+
參考資料（本文件不推薦使用）
+
+
Ｃ・直排與橫排混排時的對應方法
+
+
當直排與橫排混合顯示時，Ｂ的CSS會造成顯示結果不正確。
+
+
例如在橫排頁面裡頭加入直排的區塊時，使用上記凸排語法時，就會套用橫排用左邊的Padding與直排用的上方Padding。
+
+
為了解決這狀況，就需要刪除橫排用的左邊Padding。以下是當在橫排中有直排時，將左邊Padding指定為0；直排中有橫排時，將上方Padding指定為0的語法。
+
+
+
+
但這種方法也有缺點。當想要在凸排以外指定左邊Padding時就會有問題。像這種狀況實際處理上，可以如下記一般，將凸排與Padding處理分在不同元素裡。
+
+
+
+
此外，如下記處理，一看不需要兩層<div>結構，但實際上橫排中的直排沒有問題，卻會造成直排中的橫排出現問題。
+
+
+
+
若改變上下行記載，就會變成橫排中的直排出問題。因為後面的樣式優先於前面的樣式，是CSS的基本規則。
+
+
同樣的理由，使用本文件預設CSS，就算使用兩層<div>，也會出現問題。
+
+
無論如何都要使用直橫混排時，請進行充分的檢查。
+
+
除了凸排案例以外，縮排與行尾縮排，邊界、內部邊界、框線等具邏輯方向的class和線條等，在切換直橫混排時，都可能出現問題。
+
+
客製化
+
+
在.book-style.css中，已經準備好幾個可以修改的class和空Class。
+
+
以下案例為想要刪除連結旁線段的語法。
+
+
+
+
+
+
當對應直橫混合時，請在註解中追記處理方式。
+
+
當使用空Class時，請務必要在各RS上進行測試。若希望在大多數的RS上能夠安全顯示，請使用本文件預設的CSS進行組合，也建議不要設定得太過於複雜。
+
+
此外於測試時，可能如以下案例般，讓預設的CSS蓋過在book-style.css客製化區塊中定義的好字體與文字尺寸的Class，造成無法如預期般顯示。當使用客製化的Class時，請盡量不要使用其他的Class。
+
+
+
+
製作自有的CSS
+
+
基本上應存為UTF-8（無BOM）編碼，檔案開頭請務必要加入@Charset "UTF-8”;
+
+
+
\ No newline at end of file
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-colophon.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-colophon.xhtml"
new file mode 100644
index 0000000..4cca987
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-colophon.xhtml"
@@ -0,0 +1,27 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
版權頁
+
+
+
+
台灣EPUB 3製作指引
+
+
2018年11月製作
+
+
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-cover.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-cover.xhtml"
new file mode 100644
index 0000000..dbb5cd2
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-cover.xhtml"
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-titlepage.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-titlepage.xhtml"
new file mode 100644
index 0000000..c189525
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-titlepage.xhtml"
@@ -0,0 +1,23 @@
+
+
+
+
+
+
台灣EPUB 3製作指引
+
+
+
+
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-toc.xhtml" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-toc.xhtml"
new file mode 100644
index 0000000..b28edf8
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/item/xhtml/p-toc.xhtml"
@@ -0,0 +1,286 @@
+
+
+
+
+
+
台灣EPUB 3製作指引EPUB 3流式版面範本
+
+
+
+
+
+
diff --git "a/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/mimetype" "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/mimetype"
new file mode 100644
index 0000000..57ef03f
--- /dev/null
+++ "b/samples/\345\217\260\347\201\243EPUB 3\350\243\275\344\275\234\346\214\207\345\274\225/mimetype"
@@ -0,0 +1 @@
+application/epub+zip
\ No newline at end of file
這樣的文字。
+
+