I want one word in my title/h1 to read horizontally and the second to read vertically

Question

I am making a website and want the first word in my title/h1 tag to be read horizontally and the second word to be read vertically.

I tried using span tags in my h1 but it would only let my change the color and would not work when I used the rotate feature.

html

<h1>
    <span class="horizontal-QuanT">QuanT</span>
    <span class="verticle-Tech">Tech</span>
</h1>

css

h1{
color:bisque;
text-align: center;} 

h1 span.horizontal-QuanT{
color:gray} 

h1 span.verticle-Tech{
color:white;
rotate: 90deg;}

Please update with the actual HTML and CSS that you have tried IN the question This may assist you in a better quality question: https://stackoverflow.com/help/how-to-ask — Mark Schultheiss, Apr 13 '23 at 21:59

score 1 · Accepted Answer · answered Apr 13 '23 at 22:48

1

Inline elements can't be rotated, so you need to set display: inline-block; on the vertical span. Also, the correct syntax for rotating is transform: rotate(90deg);.

h1 {
  text-align: center;
} 

h1 span.horizontal-QuanT {
  color: gray;
} 

h1 span.vertical-Tech {
  color: black;
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: bottom left;
}

<h1>
    <span class="horizontal-QuanT">QuanT</span>
    <span class="vertical-Tech">Tech</span>
</h1>

answered Apr 13 '23 at 22:48

Brett Donald

6,745
4
23
51

Might suggest just changing the `` to a `
` and just drop the extra `display` in the CSS since this is effectively what this does perhaps.
– Mark Schultheiss Apr 17 '23 at 15:18
Then again content for `
` is "phrasing content" which this then breaks either way and thus the `
` should also become a div perhaps that is styled using CSS the same as an H1 tag ref: https://stackoverflow.com/q/30980873/125981
– Mark Schultheiss Apr 17 '23 at 15:29
`` is permitted in phrasing content, `
` is not -- so the markup is correct as written. Note that by default, a `` has the style `display: inline;`, but if we want to rotate it we need to style it as `display: inline-block;`.
– Brett Donald Apr 17 '23 at 23:20

score 0 · Answer 2 · answered Apr 17 '23 at 15:56

Since you have really kind of gotten away from the semantic meaning of the tags I would suggest you just use three div styled as a grid and give yourself full control of the style without working around the CSS of an h1 tag.

Feel free to change margins padding etc. to set each part where you want including the size of the header container.

Note: I did NOT use the tags like div, span etc. in the CSS as I consider that a bad practice so you can change the element tag without also needing to change the CSS.

.my-header-container {
  background-color: #0000FF22;
  display: grid;
  grid-template-columns: 6rem 2rem;
  grid-template-rows: 3.5em;
  font-size: 2em;
  justify-content: center;
  align-items: start;
  font-weight: bold;
  color: #F2D2BD;
}

.my-header-container .horizontal-container {
  grid-column: 1;
  color: #808080;
  display: inline-block;
}

.my-header-container .verticle-container {
  grid-column: 2;
  margin-top: 1em;
  color: #FFFFFF;
  rotate: 90deg;
}

<div class="my-header-container">
  <div class="horizontal-container">QuanT</div>
  <div class="verticle-container">Tech</div>
</div>

I want one word in my title/h1 to read horizontally and the second to read vertically

2 Answers2

` is "phrasing content" which this then breaks either way and thus the `

` should also become a div perhaps that is styled using CSS the same as an H1 tag ref: https://stackoverflow.com/q/30980873/125981