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






 




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

在某些
日本中國亞洲風格式網頁
習慣會設計成直立式輸入風格的網頁
來自日本這位網頁設計師設計的網頁




最近剛好遇到User一個跟寺廟網站有疏文想在網頁輸入(E化)
提問有這需求才研究一番


基本上根據W3C國際標準

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


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

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


目前只有FireFox對於輸入才有縱向呈現的支援(只有當內容是日文中文才會呈現縱向)
可以點下方連結(在不同瀏覽器測試觀察)


可以看到
(O)FireFox



(X)Chrome



(X)Edge



(X)Opera



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




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 垂直中文字

留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題