CODEWITHSUNDEEP
htmlcssvertical-text
Shelby Smith
Shelby Smith

Reputation: 1

Top aligning vertical text in CSS/HTML?

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:

Visual depiction of previously described issue issue

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;

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

Upvotes: 0

Views: 123

Answers (2)

gre_gor
gre_gor

Reputation: 6780

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>

Upvotes: 2

gre_gor
gre_gor

Reputation: 6780

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>

Upvotes: 0

Related Questions