日本中國亞洲風格式網頁_表單文字垂直方式輸入(縦書)
以往我們在大部分網站上看到的表單輸入框都是水平橫向的
很少看到垂直輸入方式
在某些
日本中國亞洲風格式網頁
習慣會設計成直立式輸入風格的網頁
來自日本這位網頁設計師設計的網頁
最近剛好遇到User一個跟寺廟網站有疏文想在網頁輸入(E化)
提問有這需求才研究一番
基本上根據W3C國際標準
主要可以透過writing-mode的屬性來設置
以下截自Summarized test results: CSS3 Writing Modes, vertical text
由W3C國際組織公開的兼容性測試狀況
目前只有FireFox對於輸入才有縱向呈現的支援(只有當內容是日文中文才會呈現縱向)
可以點下方連結(在不同瀏覽器測試觀察)
可以看到
(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
how to rotate a text box in html code example
HTML/CSSだけで縦書きの入力フォームをつくる
Styling vertical Chinese, Japanese, Korean and Mongolian text FORMS, LISTS AND TABLES
Day12:小事之 HTML dir Attribute 與 CSS writing-mode 下篇
How to make a vertical input field?
竹取web JS版:按一下讓網頁內文變直書,適用中、日、韓文
[CSS] 垂直文字書寫- writing-mode 和 text-orientation
CSS 垂直中文字
留言
張貼留言