Search code examples
csstextlayout

Writing-mode:vertical boxes are not stacking in predicted direction

I have three div elements with writing-mode:vertical-rl. Because the writing mode is set to vertical, the block stacking context should be left to right (as opposed to top to bottom in normal horizontal flow); however, this is not the case.

CSS


.vertical{
    width: 150px;
    display:block;
    writing-mode:vertical-rl;
  }

HTML

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./styles/writingmode.css">
</head>

<body>

    <div class="vertical">
        <h2>Heading</h2>
        <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
        <p>These boxes have a width.</p>
    </div>
    <div class="vertical">
        <h2>Heading</h2>
        <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
        <p>These boxes have a width.</p>
    </div>

</body>

</html>

Expected behavior is that they would stack on top of each other (in the block direction since writing-mode is vertical) as this:

enter image description here

Actual Behavior (stacking in inline direction)

Actual Behavior

Solution

  • So I think the confusion has to do with the fact that the writing-mode is only being changed to vertical directly on your div elements. The rest of the document is still set to horizontal by default, which is why the div's parent, the body element, is adding them along the normal flow directions.

    You can confirm this is the case by looking in dev tools at the computed value for writing-mode on the body element

    body writing-mode is horizontal-tb

    vs the div elements

    div writing-mode is vertical-rl

    If you make the below changes, you should see the results you're expecting.

    CSS

    .vertical {
  writing-mode: vertical-rl;
}

div {
  width: 150px;
  display: block;
}

    HTML

    <html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./styles/writingmode.css">
</head>

<body class="vertical">
  <div>
    <h2>Heading</h2>
    <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    <p>These boxes have a width.</p>
  </div>
  <div>
    <h2>Heading</h2>
    <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    <p>These boxes have a width.</p>
  </div>
</body>

</html>

    Note: You mentioned stacking context in your question, but as that is only concerned with how elements stack on top of one another along the z-axis, I'm assuming you meant formatting context.