TryIt Editor v2.0 - CSS text-orientation another code example

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ffffff;
        color: #000000;
        font-size: 1.1em;
      }
      .example {
        background: #cccccc;
        color: #fff;
        padding: 3em;
        margin: 40px auto 0;
        width: 400px;
        max-width: 400px;
        display: flex;
      }
      h1 {
        color: #8ebf42;
        margin: 0.15em 0.75em 0 0;
        font-family: 'Bungee Shade', cursive;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
        text-orientation: upright;
        -webkit-font-feature-settings: "vkrn", "vpal";
        font-feature-settings: "vkrn", "vpal";
      }
      p {
        margin: 0;
        line-height: 1.5;
        font-size: 1.15em;
      }
    </style>
  </head>
  <body>
    <h2>Text-orientation property example</h2>
    <div class="example">
      <h1>Lorem Ipsum</h1>
      <p>
        Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      </p>
    </div>
  </body>
</html>