How to place the text diagonally, but with the letters horizontally?-CodePudding

I need to do this: example

I need to place an H1, for example, diagonally across the screen, but the letters must remain horizontally.

I'have tried clossing every letter between spans and letter-spacing then transform translateY but it does not convince me.

I tried too with:

<h1>
<span>E</span>
<span>D</span>
<span>C</span>
<span>B</span>
<span>A</span>
</h1>

h1{white-space: pre} and then added padding-left too every single span.

But I think in this case, google will read EDCBA and i need to write ABCDE...

CodePudding user response：

This is how you can fix your first approach:

Use a transform rotate() on the parent h1 to get the overall layout, then apply a separate transform to each letter (span) with the opposite rotation.

h1 {
  display: inline-block;
  transform: rotate(-45deg);
  transform-origin: top right;
  letter-spacing: 10px;
}

span {
  display: inline-block;
  transform: rotate(45deg);
}

<h1>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
</h1>

CodePudding user response：

@DBS solution is great!

Another way I would have done it is by just targetting each of the span using nth-child and positioning it relatively.

h1 span {
  position: relative;
}

h1 span:nth-child(1) {
  top: 120px;
}

h1 span:nth-child(2) {
  top: 90px;
}

h1 span:nth-child(3) {
  top: 60px;
}

h1 span:nth-child(4) {
  top: 30px;
}

<h1>
<span>E</span>
<span>D</span>
<span>C</span>
<span>B</span>
<span>A</span>
</h1>

You can adjust the values to your preferred height between those letters.