CODEWITHSUNDEEP
css
csvan
csvan

Reputation: 9454

Base-align text in a rotated div

Here is a basic sketch of what I want to achieve, but without inserting any kind of HTML entitites (Plunker: http://plnkr.co/edit/nt1pPUujTSLEXIAagS7d?p=preview):

.container {
  padding: 40px;
}
.underlined {
  border-bottom: 1px solid red;
  padding-bottom: 0;
}
.skew-text {
  transform: rotate(-45deg);
  width: 100px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>


  <!-- Original -->
  <div class="container">
    <div class="skew-text">
      <span>
              I'm a little teapot, short and stout
            </span>
    </div>
  </div>
  <!-- Aligned -->
  <div class="container underlined">
    <div class="skew-text">
      <span class="text">
              I'm a little &emsp;&emsp; teapot, &emsp;&emsp;short and &emsp;&emsp;&emsp;stout
            </span>
    </div>
  </div>
</body>

</html>

Basically, I would like each line of text in the rotated div to align with the red line, rather than left side of the rotated container. Is this possible only using CSS?

Upvotes: 2

Views: 82

Answers (2)

vals
vals

Reputation: 64164

You can get this result with CSS shapes. You can exclude from the span a triangular area, that makes it flow as you want.

The problem is that this feature doesn't have much support . See the snippet in Chrome , Safari or Opera.

.container {
  padding: 40px;
}
.shape {
  float: left;
  width: 120px;
  height: 120px;
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0% 100%, 0 0);
  shape-outside: polygon(0 0, 100% 100%, 0% 100%, 0 0%);
}
.skew-text {
  transform: rotate(-45deg);
  width: 120px;
}
<div class="container">
  <div class="skew-text">
    <div class="shape"></div>
    <span>I'm a little teapot, short and stout</span>
  </div>
</div>

Upvotes: 2

Randy
Randy

Reputation: 9819

You could make the lines different elements, that would do the trick:

.container {
  padding: 40px;
}
.underlined {
  border-bottom: 1px solid red;
  padding-bottom: 0;
}
.skew-text {
  transform: rotate(-90deg);
  width: 100px;
}

.line {
  transform: rotate(45deg);
}
<div class="container underlined">
    <div class="skew-text">
      <span class="text">
        <div class="line">I'm a little</div>
        <div class="line">teapot,</div>
        <div class="line">short and</div>
        <div class="line">stout</div>
      </span>
    </div>
  </div>

update

It is going to be very hard.

I've created a function that splits the text into elements if a linebreak would normally happen by checking the element's height change if we append the words one by one, but if the length of the string isn't the same as we started with, it will not look pretty. You will want to find something to fix that.

It does create a baseline for the text on the bottom, but the height of the text is unpredictable for now.

var para = $('.text');

var lines = [];

para.each(function(){
    var current = $(this);
    var text = current.text();
    var words = text.split(' ');

    current.text(words[0]);
    var height = current.height();

    var lineNr = 0;
    lines.push("");
  
    for(var i = 1; i < words.length; i++){
        current.text(current.text() + ' ' + words[i]);

        if(current.height() == height){
          lines[lineNr] += words[i] + " ";
        }
      
        if(current.height() > height){
            height = current.height();
            
            lineNr ++;
            lines.push("");
            lines[lineNr] += words[i] + " ";
        }
    }
  
  $('.text').html("");
  
  for(var line in lines){
    var p = document.createElement('p');
    $(p).html(lines[line]);
    
    $('.text').append(p);
  }
});
.container {
  padding: 40px;
}
.underlined {
  border-bottom: 1px solid red;
  padding-bottom: 0;
}
.skew-text {
  transform: rotate(-90deg);
  width: 100px;
  transform-origin: 50% 50%;
}

p {
  margin:0;
  padding:0;
  transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container underlined">
  <div class="skew-text">
    <span class="text">
      I'm a little teapot, short and stout
    </span>
  </div>
</div>

Upvotes: 3

Related Questions