縦書きレイアウトをWeb標準へ

MAKING VERTICAL LAYOUTS
A WEB STANDARD

The future of Vertical and Horizontal writing

The vertical typography and layouts which can be created using CSS writing-mode open up a world of possibility for web design.
The concept of being able to choose between a horizontal and a vertical layout is one that is completely normal and widely used in Japan, but not so much in other regions. However, some east Asian countries use vertical writing in their daily life and even countries that normally use horizontal writing sometimes arrange text vertically.
At the moment, expression of ideas on the web is almost always done horizontally, but if the Japanese expertise of using vertical text were to be used more widely and freely along with the currently used horizontal text, freedom of expression of all web-page layouts would greatly increase.
With this goal in mind, Study Group on Text Layout for Next-Generation Web Browsers now pushes for the globalization of the vertical text layout and its use in a variety of web content.

Vertical Text in the World

When we refer to vertical text, we mean the style in which letters or words are arranged in a column. The columns are then read from right to left or from left to right depending on the material. In old times, there were cases where passages were written to be read from the bottom up, but this is not something commonly used nowadays. The vertical style of writing is said to be a feature found in languages that use Chinese characters (Chinese, Korean, Japanese,) or a mixture of them and other characters, and write them in a way that they are arranged as if in a square going from top to bottom.
Although Japan uses horizontal writing now, the traditional way of writing from top to bottom and right to left is still quite common. And it isn’t only Japan which still sees use of a vertical system of writing. Taiwan also arranges its writing vertically from right to left, whereas Mongolian writing is done vertically but from left to right.

Vertical Text as it is Used in Japan

Vertical text is used quite often in Japan in novels, magazines, textbooks, newspapers, comics and many other published materials. It is also used in many government publications, on many shop signs, and in many catalogues and pamphlets. Its use in terms of advertising is diverse and this is not only because vertical text is an old custom in Japan, but rather for the fact that it can be used as a way to catch people’s eye and make a strong impression on the reader. This is often done by mixing vertical and horizontal text together and creating a very complicated layout that is full of expression. It is also used quite frequently on meishi, the common Japanese business card, and to write letters or the names needed to send those letters on envelopes. Musical scores for the traditional Japanese flute, the shakuhachi, are also written vertically.
For Japan, vertical text is kept not only as a cultural aspect, but because it works well as a layout to present words in the way the author wants.

#fig1 Handwritten vertical text (on a postcard)
Handwritten vertical text (on a postcard)
#fig2 text on a newspaper
text on a newspaper
#fig3 text on a shop sign
text on a shop sign

What Study Group on Text Layout for Next-Generation Web Browsers is

It is an organization made up of members from private enterprises which include but are not limited to those which produce E-book readers, publishing houses, telecommunications companies, etc. Its goal is to explore the ways in which vertical text and its layouts that are particular to the Japanese language are used and to promote the use of CSS as a global standard to express the aforementioned as well as a variety of other layouts.
The international standards commission of the world wide web known as the W3C, or the World Wide Web Consortium, has worked hard to establish the standards used in web-site design as found in programming languages such as HTML and CSS. Discussions of how to use vertical text, as found in Japanese magazines and other forms of literature, and establish it as basic program functionality on web browsers are currently underway.
Study Group on Text Layout for Next-Generation Web Browsers works both to offer its contributions up to the W3C and to promote the use of vertical text in a variety of web content.

Promotion is conducted as follows

  1. Investigations of web trends that follow the international standards to determine how text layout is used as a means of expression
    • Investigation in the trends relating to international standards
    • Investigation of how and if layouts particular to Japan could be used in the current web environment.
  2. Discussions and trials to be held to determine how to put the vertical text layouts that are particular to Japan into practical use.
    • Seminars related to how to program text vertically to be held
    • WEB AWARDS FOR HORIZONTAL AND VERTICAL WRITINGS
  3. Meeting to exchange ideas and opinions
    • Meeting to discuss international standards and opinions surrounding them to be held
    • Meeting to discuss the needs of the industrial world and what effect changing the international standards could have on them
  4. Discussion of the current web environment and the current text layout and expression system
    • List of what is required to change the current international standards in regards to text layout and the current expression system to be compiled
    • Proposal in relation to changing the standards to be made to the W3C
    • Data to be submitted to stakeholders with interest in the various browser vendors

In summary, the Web Awards for Horizontal and Vertical Writings looks for

websites created using CSS writing-mode that features vertical text. The sites should through expression, technique and new ideas show the possibilities that abound in using vertical text.

技術解説

TECHNICAL DESCRIPTION

CSS Writing Modes Level 3
https://www.w3.org/TR/css-writing-modes-3/

by W3C

Styling vertical text - W3C on GitHub
https://w3c.github.io/i18n-drafts/articles/vertical-text.en

by W3C

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

by Mozilla Developer Network

CSS Writing Modes
https://24ways.org/2016/css-writing-modes/

by Jen Simmons

Designing Layouts: The New Superpowers of CSS at An Event Apart San Francisco
https://speakerdeck.com/jensimmons/designing-layouts-the-new-superpowers-of-css-at-an-event-apart-san-francisco?slide=58

by Jen Simmons

Response to Writing Modes article
https://storify.com/jensimmons/response-to-writing-modes-article

by Jen Simmons

Chinese language on the web
https://www.chenhuijing.com/blog/chinese-web-typography

by Chen Hui Jing

A Chinese typography experiment (Speaker: Chen Hui Jing) - Talk.CSS
https://www.youtube.com/watch?v=tTV60oAk6Cs

by Chen Hui Jing

Styling vertical Chinese, Japanese, Korean and Mongolian text (draft!)
https://w3c.github.io/i18n-drafts/articles/vertical-text.en

by Rechard Ishida

外部リンク

LINKS

Horizontal and vertical writing in East Asian scripts - Wikipedia
https://en.wikipedia.org/wiki/Horizontal_and_vertical_writing_in_East_Asian_scripts
Japanese writing system - Wikipedia
https://en.wikipedia.org/wiki/Japanese_writing_system
Japanese, A Beautifully Complex Writing System
https://www.smashingmagazine.com/2012/03/japanese-a-beautifully-complex-writing-system/

by Shoko Mugikura

Can Japanese be written right to left?
http://www.sljfaq.org/afaq/right-to-left.html

by Ben Bullock

* We would not garantee the contents of each articles.