Выровнять текст по наклонной линии

Ответ 1

Использование LESS

Вы, ребята, заставили меня подумать немного больше о коробке, так что я вышел со своим уродливым решением. Моя идея состоит в том, чтобы добавить кучу дополнительных квадратных элементов и вычислить ее размер:

.loop(@i) when (@i > 0){
  .loop((@i - 1));
  [email protected]{i}{
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

HTML:

<p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>

Доказательство концепции: http://codepen.io/Tymek/pen/jEypOX?editors=110

@chipChocolate.py, для меня было принципиально не использовать JavaScript для этого. Если кто-то хочет написать код JS/jQuery на основе моего решения, пожалуйста. Пожалуйста, поделитесь им здесь позже.

Ответ 2

ПРЕДУПРЕЖДЕНИЕ: Свойство shape-outside не должно использоваться в живых проектах ¹. Этот ответ здесь, чтобы показать, как желаемый результат может с этим свойством.

Вот пример, используя свойство shape-outside (современные веб-браузеры):

DEMO

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 20px;
  -webkit-shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
  shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
}

<div>
  <img src="http://placehold.it/150x250&text=img" alt="image" />
  <p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
    luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
    paragraph.</p>
</div>

Ответ 3

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}
p {
  transform: skew(6deg);
  font-style: italic;
}

<div>
  <img src="http://placehold.it/150x250&text=img" alt="image" />
  <p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
    luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
    paragraph.</p>
</div>

Ответ 4

Я не могу дать вам пример кода, это сложнее, чем перекос.

Вы должны проанализировать текст и связанный с ним DOM, содержащийся в нем, и искать все новые строки текста (не br или \n, но каждый первый символ каждой визуализированной строки).

С помощью этой информации вы можете добавить padding-left, вычисленный из позиции и размера изображения.