Top aligning vertical text in CSS/HTML?

ShelbySmith
June 1, 2024
132 views
0 votes
2 Answers

I’m beginning to design my website and learning HTML and CSS and this has stumped me a little bit. Not sure if what I’m trying is correct.

I’m making a side banner, kind of like a physical media obi strip, on my webpage – where some of the text is in Japanese – and therefore the text is aligned vertically.

p {
  writing-mode: vertical-lr;
  text-orientation: upright;
  color: #fe87b3;
  font-family: "Helvetica";
  font-size: 18px;
}

<div align="center"><p>どんな時だってずっと二人で。どんな時だって側にいるから。<br> 過去はどこかにしまっておけ。ここからそう遠くないだろう。観たこともない景色。<br> 今夜のことは誰にも言わない。誰にも言わない。</p></div>

Easy enough! But when I do this, and align the font to the centre of the page, the text is also centered within its rows (bad phrasing, I’m aware!). I’d like all the text to be aligned from the top of the where it is supposed to begin, rather than this:

I’m sure there’s something I’m missing, but I’m not super bright at this (obviously) and I just thought that this might hopefully help someone else in the future too.

I tried;

vertical-align: super/top/text-top;
position: top/relative;

There may have been others but I have forgotten unfortunately. None of the above appear to do anything in my case.

Answers

Add text-align: start;

p {
  writing-mode: vertical-lr;
  text-orientation: upright;
  color: #fe87b3;
  font-family: "Helvetica";
  font-size: 18px;
  text-align: start;
}

<div align="center">
  <p>
    どんな時だってずっと二人で。どんな時だって側にいるから。<br>
    過去はどこかにしまっておけ。ここからそう遠くないだろう。観たこともない景色。<br>
    今夜のことは誰にも言わない。誰にも言わない。
  </p>
</div>

align HTML attribute is deprecated. It’s old and doesn’t work properly with different text orientations.

You should center the text with a more modern technique like the CSS’s flex property.

p {
  writing-mode: vertical-lr;
  text-orientation: upright;
  color: #fe87b3;
  font-family: "Helvetica";
  font-size: 18px;
}
.center-content {
  display: flex;
  justify-content: center;
}

<div class="center-content">
  <p>
    どんな時だってずっと二人で。どんな時だって側にいるから。<br>
    過去はどこかにしまっておけ。ここからそう遠くないだろう。観たこともない景色。<br>
    今夜のことは誰にも言わない。誰にも言わない。
  </p>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.