日本中國亞洲風格式網頁_表單文字垂直方式輸入(縦書)

 

以往我們在大部分網站上看到的表單輸入框都是水平橫向的

很少看到垂直輸入方式

在某些

日本中國亞洲風格式網頁

習慣會設計成直立式輸入風格的網頁

來自日本這位網頁設計師設計的網頁

https://bcrikko.github.io/web-design-practices/japanese-style/

最近剛好遇到User一個跟寺廟網站有疏文想在網頁輸入(E化)

提問有這需求才研究一番

基本上根據W3C國際標準

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

主要可以透過writing-mode的屬性來設置

以下截自Summarized test results: CSS3 Writing Modes, vertical text

https://www.w3.org/International/articles/vertical-text/

由W3C國際組織公開的兼容性測試狀況

目前只有FireFox對於輸入才有縱向呈現的支援(只有當內容是日文中文才會呈現縱向)

可以點下方連結(在不同瀏覽器測試觀察)

https://www.w3.org/International/articles/vertical-text/index-data/vertical-form.html

可以看到

(O)FireFox

(X)Chrome

(X)Edge

(X)Opera

這裡附上一個測試程式範本

See the Pen 表單輸入直立呈現(W3c公布只有firefox瀏覽器支援) by Jacob (@dryjoker) on CodePen.

Ref:

Chrome and Edge don't support "writing-mode" for input or select tag

https://stackoverflow.com/questions/63495339/chrome-and-edge-dont-support-writing-mode-for-input-or-select-tag

how to rotate a text box in html code example

https://newbedev.com/css-how-to-rotate-a-text-box-in-html-code-example

HTML/CSSだけで縦書きの入力フォームをつくる

https://kuroeveryday.blogspot.com/2017/04/vertial-input-forms.html

Styling vertical Chinese, Japanese, Korean and Mongolian text FORMS, LISTS AND TABLES

https://www.w3.org/International/articles/vertical-text/

Day12：小事之 HTML dir Attribute 與 CSS writing-mode 下篇

https://ithelp.ithome.com.tw/articles/10195068

How to make a vertical input field?

https://stackoverflow.com/questions/46062705/how-to-make-a-vertical-input-field

竹取web JS版：按一下讓網頁內文變直書，適用中、日、韓文

https://www.playpcesor.com/2010/12/web-js.html

[CSS] 垂直文字書寫- writing-mode 和 text-orientation

https://tools.wingzero.tw/article/sn/513

CSS 垂直中文字

http://n.sfs.tw/content/index/13102