Пример CSS свойство text-orientation со свойством text-orientation

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-color: #fff;
      color: #000;
      font-size: 1.1em;
      }
      .example {
      background: #ccc;
      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</h2>
    <div class="example">
      <h1>Lorem Ipsum</h1>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. 
      </p>
    </div>
  </body>
</html>