The vertical writing mode is causing boxes to stack in an unexpected direction

I am encountering an issue with three div elements that have a writing-mode of vertical-rl. Despite setting the writing mode to vertical, the block stacking context is not being displayed from left to right as expected, but rather stacking inline.

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:

https://i.sstatic.net/7My7Q.png

Actual Behavior (stacking in inline direction)

https://i.sstatic.net/vVfjO.png

Answer №1

It seems that the confusion arises from the fact that the writing-mode property is specifically being applied to the div elements in a vertical orientation. As a result, the rest of the document retains the default horizontal writing mode, causing the div elements to be positioned according to the normal flow directions established by their parent, the body element.

You can verify this by inspecting the computed value of the writing-mode property on the body element using developer tools.

https://i.sstatic.net/fQzhS.png

Compare this to the writing-mode property applied to the div elements:

https://i.sstatic.net/ecrRQ.png

If you implement the following changes, you should see the desired outcome.

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>

Keep in mind: In your question, you mentioned stacking context, but considering that it pertains to the vertical stacking of elements along the z-axis, I assume you meant formatting context.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the calc() function within the makeStyles method

const useStyles = makeStyles((theme) => ({ dialog: { '& .MuiTextField-root': { margin: theme.spacing(1), } }, address: { width:"calc(24vw + 8px)" }, })); <div> <TextField id="contact ...

What is the process for connecting a personalized bootstrap framework with an index.html document?

I have recently dived into the world of bootstrap and I just customized my bootstrap file on http://getbootstrap.com/docs/3.3/customize/ After compiling and downloading, I found it challenging to link it with my index.html file. The source of the bootstra ...

The Div element containing the rollover button/picture is failing to resize properly as the window is decreased in size

Whenever I try to resize my browser window in Firefox or Chrome, the div ends up moving instead of resizing. I've searched on stackoverflow for answers but haven't found any solutions yet. Can someone please help me with this issue? Here is what ...

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

A pair of boxes sitting next to each other, both occupying 50% of the space but slightly longer in length and not aligned on the same level

My goal is to have two side-by-side boxes that fill the entire width of the screen. However, I'm facing an issue where each box exceeds 50% width by about 10 pixels. What could be causing this discrepancy? #sides { padding-top: 40px; padding- ...

Issues with the collapse feature in Bootstrap 5.1.3 accordion

I'm currently utilizing an accordion style to display various sets of information on a website. While all the correct information is being displayed, I am facing an issue where the accordion items are not collapsing as expected. Below is the code snip ...

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells? --- output: html_document: theme: cosmo --- {r results ="asis", e ...

Is there a way to customize the color of the HR element in a Material-UI Select Field?

https://i.stack.imgur.com/DYeX7.png https://i.stack.imgur.com/CN0T6.png Hi there, I am currently working on a website and using a Select Field component from Material-UI. I am faced with the challenge of customizing the style to change the default light ...

The (.svg) image does not cover the full width of the page

After creating an SVG image, I encountered a problem when trying to display it on a webpage. Even with the width value set to 100%, the image did not stretch all the way to the edges of the page, leaving small gaps at the edges. I attempted to switch the ...

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

"Using html_attr with the attribute "href" does not return any value in the rvest package

My objective is to extract the URLs linked with specific CSS elements on a website using rvest. Despite trying various methods, such as using the html_attr function with the 'href' argument, my current script only returns NA values instead of the ...

Attempting to call a nested div class in JavaScript, but experiencing issues with the updated code when implemented in

Seeking assistance. In the process of creating a nested div inside body > div > div . You can find more information in this Stack Overflow thread. Check out my JSFiddle demo here: https://jsfiddle.net/41w8gjec/6/. You can also view the nested div ...

How can you center the body of a webpage while using the zoom in and zoom out features in HTML5?

What is the best way to maintain body alignment while zooming in and out on a web page? <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> body { font-family: 'Merriweather Sans&apos ...

The background size does not adjust to the size of the viewport

I am encountering an issue with the background size on my webpage. When changing the viewport size on this page , the background does not adjust to the new viewport dimensions immediately. It seems to retain the previous dimension and only updates to the c ...

Expand the contents inside a div without affecting the actual div

Is there a way to zoom out the contents of a div similar to how a browser zooms out a page? I'm working on an application that loads a page into a div. However, I want to load the content without scroll bars. This would require zooming out the conten ...

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

The overlay background on the image does not seem to be functioning correctly

I'm currently working on adding an overlay to my image in order to darken it and display text over the top. I've tried using absolute positioning for both the image and overlay, but the overlay ends up covering the entire window and sitting above ...

CSS struggles after implementing conditional checks in return statement for an unordered list

I'm encountering a CSS issue with the header section. When I include the following code snippet in my code to display a tab based on a condition, the entire header list doesn't appear in a single horizontal line: <div> {isAdmin(user) ? ...

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code: <!DOCTYPE html> <html> <head> <title> # <title& ...