Left align skewed text in container

Question

I have to apply skew and rotate on an element. It works fine but the skewed text isn't left aligned in it's container (see the result image):

The text on the left is overflowing the container: the H (from "Hello") and the T (from "The") alignment is not right.

This is what I am trying to achieve:

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-bottom: 30px;
}

.skew-text {
  -moz-transform: rotate(-10deg) skew(-30deg, 0deg);
  -webkit-transform: rotate(-10deg) skew(-30deg, 0deg);
  -o-transform: rotate(-10deg) skew(-30deg, 0deg);
  -ms-transform: rotate(-10deg) skew(-30deg, 0deg);
  transform: rotate(-10deg) skew(-30deg, 0deg);
}

<div class="skew-parent-wrapper">
  <h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>

Essentially **you can't**. A `transform` is a purely *visual* change...it does not affect how elements are laid out or sized. You will require Javascript I suspect. — Paulie_D, Jul 11 '17 at 12:00

web-tiki · Answer 1 · 2017-07-14T14:55:09.987

One way of aligning the skewed text on a vertical line is to manualy set a negative text-indent. This technique also requires to set a transform-origin on bottom left :

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-top: 30px;
}

.skew-text {
  transform: rotate(-10deg) skew(-30deg, 0deg);
  transform-origin: 0 100%;
  text-indent: -15px;
}

<div class="skew-parent-wrapper">
  <h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>

This technique works on text that wraps only on two lines. For text with more than 2 lines, you will need to wrap each line in a tag (like a <span>) :

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-top: 30px;
}

.skew-text span{
  display:block;
  transform: rotate(-10deg) skew(-30deg, 0deg);
  transform-origin: 0 100%;
}

<div class="skew-parent-wrapper">
  <h1 class="skew-text">
    <span>Hello Welcome to the</span>
    <span>skewed text with</span>
    <span>several lines many</span>
    <span>many many lines</span>
  </h1>
</div>

Note that you need to set the <span> to display:block because transforms don't apply on inline elements.

score 0 · Answer 2 · answered Jul 11 '17 at 11:25

With rotation and skew you will get a behaviour like perspective so the oversizing is a result of that. You need to manually scale down your skew-text and then disable the overflow of its container so you won't see any overlapping text.

That's the only idea for me to fix this.

score 0 · Answer 3 · answered Jul 14 '17 at 14:20

It's hard to achieve the alignment if you use a rotation as transform.

Use a skew to get the inclined lines. You can (to some extent) get the angle on the letters using italics

Also, there is no need for all the vendor specific tranforms

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-bottom: 30px;
}

.skew-text {
  transform: skewY(-20deg);
  font-style: italic;
  background-color: goldenrod;
}

<div class="skew-parent-wrapper">
  <h1 class="skew-text">Hello Welcome to the skewed text that can span several lines</h1>
</div>

Left align skewed text in container

3 Answers3