Notes on vertical writing and CSS grid
Tags: css
Published: 2018-08-04 22:33:27

---
title: "Notes on vertical writing and CSS grid"
published: true
tags: css
canonical_url: https://www.chenhuijing.com/blog/notes-on-vertical-writing-and-grid/
---

When I was [working out the kinks](https://dev.to/huijing/vertical-typesetting-with-writing-mode-revisited-238f-temp-slug-7334047) in my year-old vertical typesetting demo, I attempted to use CSS grid as one of the options for handling layout, but didn’t get very far, because at that point, my brain had pretty much melted down 😕. But I’m on a plane now, surrounded by people who are staring at code, so I felt sort of motivated to do something useful as well.

The thing I want to work out is how CSS grid works when the writing mode is vertical, and how that affects Firefox’s Grid Inspector as well. Since I wrote a reasonably in-depth post on the Firefox Grid Inspector, I figured I’d better understand it as thoroughly as I could.

Demo and observation time!

## Basic setup

I started off with the most basic of markup structures. Because reduced test case. My original intention was to use grid for laying out a figure with multiple images and a caption.

```
<!doctype html>
<html>
  <head>
    <!-- Stuff that goes in <head> -->
  </head>
  
  <body>
    <figure>
      <img src="img/listen.svg">
      <img src="img/read.svg">
      <figcaption>This is a test</figcaption>
    </figure>
  </body>

</html>
```

![Basic markup structure](https://www.chenhuijing.com/assets/images/posts/grid-vertical/markup-640.jpg)
<figcaption>Basic markup structure (vertical-rl on html element)</figcaption> 

I didn’t know how grid rows and grid columns would work in vertical mode, so let’s take a look at the specification.

> There are two sets of grid lines: one set defining columns that run along the block axis (the column axis), and an orthogonal set defining rows along the inline axis (the row axis).

I interpret this as, when the document has been set to `vertical-rl`, grid columns run top-to-bottom while grid rows run right-to-left like so:

![Vertical writing-mode grid lines](https://www.chenhuijing.com/assets/images/posts/grid-vertical/grid-lines.svg)

Let’s see if that’s the case by creating a layout with the `figure` element as the grid container. I want the 2 images to stack on top of each other, and the caption to stretch the length below (i.e. to the left) both images.

```
html {
  writing-mode: vertical-rl;
}

figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content min-content;
}
```

Let’s visualise my target end-result and their corresponding line numbers.

![Basic grid layout](https://www.chenhuijing.com/assets/images/posts/grid-vertical/simple.svg)

There seems to be some issues with the Grid Inspector tool here. I guess we’ll be flying blind from here on out.

![Grid inspector tool issue](https://www.chenhuijing.com/assets/images/posts/grid-vertical/problem-640.jpg)

<figcaption>Something doesn't seem quite right here...</figcaption> 

Before I started using the Grid Inspector tool, I would apply borders to the grid items. It wasn’t the best solution, because I couldn’t actually see the grid tracks, but it’d have to do for now.

![Borders around grid items](https://www.chenhuijing.com/assets/images/posts/grid-vertical/borders-640.jpg)

<figcaption>Borders, borders everywhere!</figcaption>

Okay, this reduced test case looks like Grid is working just fine in vertical writing-mode. So this is the code that will give me the layout I wanted in my earlier write-up (ignore the `border` code).

```
figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content min-content;
  justify-items: center;
  border: 2px dashed green;
}

img {
  border: 2px dashed blue;
}

figcaption {
  border: 2px dashed red;
  grid-column: span 2;
}
```

![Aligned grid items](https://www.chenhuijing.com/assets/images/posts/grid-vertical/aligned-640.png)

<figcaption>Here we go</figcaption>

## Expanded test case

Now, to see if this plays nice with nested `writing-mode`. Like I mentioned in the earlier post, I seem to be quite the stickler for punishment 🤷. _Spoiler alert: it wasn’t painful at all._

I copied over the content from that demo, and rewrote the markup to make the figures flatten out. So the markup for each figure was changed like so:

```
<!-- Non-grid version -->
<figure>
  <figcaption>最早的視覺傳達方式基本都是利用圖形進行的。這是北美印地安在史前的岩洞壁畫</figcaption>
  <div class="img-wrapper img-double">
    <img src="img/pictograms-1.jpg">
    <img src="img/pictograms-1.jpg">
  </div>
</figure>

<!-- Grid version -->
<figure class="img-double">
  <figcaption>最早的視覺傳達方式基本都是利用圖形進行的。這是北美印地安在史前的岩洞壁畫</figcaption>
  <img src="img/pictograms-1.jpg">
  <img src="img/pictograms-1.jpg">
</figure>
```

Grid rows and grid columns do respect the writing mode of the document, even if the writing mode is nested to high heaven. Which meant that I could make the layout code apply to the relevant elements generally, and adjust for direction (left/right, width versus top/bottom, height) when those states were toggled.

In fact, I’m thinking that once we have [CSS logical properties](https://www.w3.org/TR/css-logical-1/), I won’t even have to have two sets of directional properties. That would be awesome!

The classes on each figure were to deal with if the figure had 1 image or 2 images. So for single image figures, the image just spanned 2 columns instead. The layout code for each figure looks like this:

```
figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content max-content;
  justify-items: center;
  align-items: center;
}

figcaption {
  grid-column: span 2;
}

.img-single img {
  grid-column: span 2;
}
```

And the toggled versus un-toggled states looked like this:

```
.c-switcher__checkbox:checked ~ main {
  figure {
    margin-left: 1em;
    max-height: 30em;
    margin-top: auto;
    margin-bottom: auto;
  }

  .img-single img {
    max-height: 20em;
  }
}

.c-switcher__checkbox:not(:checked) ~ main {
  figure {
    margin-bottom: 1em;
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
  }

  .img-single img {
    max-width: 20em;
  }
}
```

I kinda like it. So TIL, the issue isn’t with writing-mode, it’s with the Grid Inspector tool, but knowing Mozilla, the team is already working on the problem. Source code for the grid version of the demo [on GitHub](https://github.com/huijing/demos/tree/master/grids-vertical), and [live version viewable here](https://www.chenhuijing.com/demos/grids-vertical/).

{% twitter 940455924111630336 %}

If you were wondering (probably not, but still), I am currently at Mozilla All Hands in Austin, Texas and I’m super excited, but also super jet-lagged, which is why this post is being completed at 4am. Does anyone care about this vertical writing mode stuff? I don’t know, but I sure do.

Breakfast time! Until the next one.

*Originally published at [www.chenhuijing.com](https://www.chenhuijing.com/blog/making-sense-of-digital-fonts/) on December 11, 2017.*