Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Writing Mode

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      writing-mode

      CSS writing-mode property is used to specify the direction of text content flows within an element. It specifies whether text should be displayed horizontally or vertically.
      It is particularly useful for handling text orientation in non-Latin scripts, such as Chinese, Japanese, and Arabic, as well as for creating creative and visually interesting layouts.

      Possible Values

      • horizontal-tb − Default value. It sets the text to be laid out in horizontal writing mode, where text flows from left to right and top to bottom, as in most Western languages.
      • vertical-rl − This value specifies a vertical writing mode from right to left, commonly used for scripts like Chinese, Japanese, or Korean. Text flows vertically, starting from the right and proceeding to the left.
      • vertical-lr − Similar to vertical-rl, this value also represents a vertical writing mode, but the text flows from left to right, which is used in scripts like Mongolian.
      • sideways-rl − This value specifies vertical text flow from top to bottom, but positions the text from right to left. This value is used for vertical scripts like Mongolian or some forms of vertical Japanese text, where the characters are rotated 90 degrees clockwise and read from right to left.
      • sideways-lr − This value specifies vertical text flow from bottom to top, but positions the text from left to right.
      The lr, lr-tb, rl, tb, tb-lr, and tb-rl writing modes in CSS are deprecated, and should no longer be used. Instead, you should use the horizontal-tb or vertical-lr writing modes.
      The following table shows the deprecated writing modes and their equivalents:
      Deprecated Value
      Equivalent Value
      lr
      horizontal-tb
      rl
      horizontal-tb
      lr-tb
      horizontal-tb
      tb
      vertical-lr
      tb-lr
      vertical-lr
      tb-rl
      vertical-rl

      Applies to

      All the HTML elements except table row groups, table column groups, table rows, and table columns.

      DOM Syntax

      object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";

      CSS writing-mode - horizontal-tb Value

      The following example demonstartes writing-mode property set to value horizontal-tb, where text is read from left to right and top to bottom 
      <html>
      <head>
      <style>
         .box {
            width: 250px;
            background-color: pink;
            writing-mode: horizontal-tb;
         }
      </style>
      </head>
      <body>
         <h2>CSS writing-mode: horizontal-tb</h2>
         <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
      </body>
      </html>

      CSS writing-mode - vertical-rl Value

      The following example demonstartes writing-mode property set to value vertical-rl, where text is read from right to left and top to bottom 
      <html>
      <head>
      <style>
         .box {
            height: 250px;
            background-color: pink;
            writing-mode: vertical-rl;
         }
      </style>
      </head>
      <body>
         <h2>CSS writing-mode: vertical-rl</h2>
         <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
      </body>
      </html>

      CSS writing-mode - vertical-lr Value

      The following example demonstartes that the writing-mode property set to value vertical-rl value, where text is read from left to right and top to bottom: 
      <html>
      <head>
      <style>
         .box {
            height: 250px;
            background-color: pink;
            writing-mode: vertical-lr;
         }
      </style>
      </head>
      <body>
         <h2>CSS writing-mode: vertical-lr</h2>
         <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         </div>
      </body>
      </html>

      CSS writing-mode - sideways-rl Value

      The sideways-rl value is only supported by Firefox Browser.
      The following example demonstrates that writing-mode property set to value sideways-rl, where text read vertically from top to bottom, with characters arranged from right to left 
      <html>
      <head>
      <style>
         .box {
            height: 300px;
            background-color: pink;
            writing-mode: sideways-rl;
         }
      </style>
      </head>
      <body>
         <h2>CSS writing-mode: sideways-rl - This example is only supported by Firefox Browser.</h2>
         <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         </div>
      </body>
      </html>

      CSS writing-mode - sideways-lr Value

      The sideways-lr value is only supported by Firefox Browser.
      The following example demonstrates that writing-mode property set to value sideways-lr, where text is read vertically from top to bottom, with characters arranged from left to right 
      <html>
      <head>
      <style>
         .box {
            height: 300px;
            background-color: pink;
            writing-mode: sideways-lr;
         }
      </style>
      </head>
      <body>
         <h2>CSS writing-mode: sideways-lr - This example is only supported by Firefox Browser.</h2>
         <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         </div>
      </body>
      </html>

      CSS writing-mode - Asthetic Use (english Language)

      The values vertical-lr and vertical-rl can be used in English language for asthetics as demonstrated in the following example:
      <html>
      <head>
      <style>
         .mainbox{
            max-width: 750px;
            position: relative;
            padding-left: 80px;
            padding-top: 50px;
         }
         .box {
            height: 250px;
            background-color: pink;
         }
         h2 {
            padding-top: 70px;
            writing-mode: vertical-rl;
            position: absolute;
            left: 0;
            top: 0;
            line-height: 1;
            color: lightgreen;
            font-size: 40px;
            font-weight: 800;
         }
      </style>
      </head>
      <body>
      <div class="mainbox">
         <h2>TutorialsPoint</h2>
         <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
         </div>
      </body>
      </html>

      CSS writing-mode - Related Properties

      Following is the list of CSS properties related to writing-mode:
      property
      value
      display
      Sets the direction of text.
      unicode-bidi
      Determine the behavior of bi-directional text in a document.
      text-orientation
      Sets the orientation of the characters in a line.
      text-combine-upright
      Combines multiple typographic character units into the space of a single typographic character unit.