1

The CSS property shape-outside seems not to be compatible with the CSS property writing-mode with value vertical-rl.

For example, if I try to have a vertical text following a triangle shape, it doesn't work:

.triangle {
  width: 100%;
  height: 12ex;
  background-color: lightgray;
  -webkit-shape-outside: polygon(0 0, 100% 0, 0 50%);
  shape-outside: polygon(0 0, 100% 0, 0 50%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 50%);
  clip-path: polygon(0 0, 100% 0, 0 50%);
}

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: left;
}
<div class="triangle"></div>
<p>My very long text is so long that it has so many lines with wo many words in it! You cannot imagine how this text is long and how many lines it is made of, because there are so many. One cannot count them, that's totally impossible. Indeed this text is
  so long. If you try to read it, this will probably last for the rest of your life.</p>

But if I remove the line writing-mode: vertical-rl;, it the text will follow the triangle shape. However, it won't be vertically written anymore!

How can I manage this? (I'm using Firefox)

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
RotS
  • 2,142
  • 2
  • 24
  • 30
  • shape-outside is something new so I am pretty sure they don't handle all the writing mode. It's probably by design or probably a bug – Temani Afif Nov 28 '18 at 21:19

0 Answers0