It is not generally needed for Chinese, Japanese and Mongolian content, because they usually keep Han and Kana characters upright. This value of text-orientation makes all characters lie on their right side, including Han characters. This value only works if you have also applied the values of writing-mode that begin with vertical. In Gecko and Blink browsers the indic script text also has large gaps between characters and runs outside the box it is displayed in.ĬSS provides one more value of the text-orientation property: sideways. Webkit does combine some consonant clusters, but still has problems with spacing combining characters. Many, if not all, combining characters appear on separate lines. None of the browser engines that support upright orientation of characters do well with Hindi. Such syllables are currently not handled well by browsers in upright text runs. Some complex scripts, such as Devanagari (used for Hindi, and shown in the two left-most lines above) require upright text to be split at syllable boundaries. This change requires more than simple rotation, and you will need to use a font that supports the alternative glyphs. In some cases, rotation may also involve a transformation of a character – for example (vertical) vs. For example, ordinary number digits in vertical text lie on their side by default, whereas fullwidth digits and enclosed alphanumerics, such as ①, are upright by default. The Unicode Standard assigns a property to each character and browsers can use this to determine the default orientation of a given character. In vertical text, certain characters are normally upright and others are normally rotated sideways. (To make Arabic script text run up the page, you'd use sideways-rl.) Changing the glyph orientation for embedded text Default character orientation On the other hand, if your content is in English and you want some title text to run from bottom to top vertically, say on a book spine or in table header, you would use writing-mode:sideways-lr, not one of the vertical- values. The vertical- values of writing-mode are really intended for use in setting a normal vertical context for CJK or Mongolian text. Latin script text typically runs down the page, with the letters rotated clockwise, while the Han characters remain upright. In Japanese, Chinese and Korean, lines start at the right side of the figure box and progress to the left. Where it is supported, most of what you need should be achievable by applying the writing-mode property to the content that you want to be set vertically. For more information, see Browser support. It also compares the theory and practice about what is possible.Įach section explains how you would mark up up your content according to the CSS spec (which is usually simple and straightforward), but then looks at what you currently have to do to achieve the same result in browsers that don't implement the standard property and value names. This article draws out the basic information that content authors need to create the more common features of vertical text. The CSS specification contains a lot of implementation-specific information.
JUSTIFY TEXT CSS BOOTSTRAP HOW TO
This article explains how to use CSS to produce vertical text for languages such as Chinese, Japanese, Korean, and Mongolian.