0

I am using opentype.js to convert text to Bézier curves using fonts, and then turning those Bézier curves into Three.js Shapes. However, this is giving me trouble, because ShapePath.toShapes() accepts a parameter isCCW, and if I get it wrong and the text contains any letters with holes (like O) then the text looks messed up.

Is there any item in the tables of OpenType fonts that tells you whether the glyphs are drawn clockwise or counterclockwise?

Mugen87
  • 28,829
  • 4
  • 27
  • 50
laptou
  • 6,389
  • 2
  • 28
  • 59
  • 2
    Winding isn't the only way to tell shapes how to intersect and different font formats use different techniques. As far as I can tell, TTF fonts would be `isCCW = false`. https://github.com/opentypejs/opentype.js/issues/347 – Ouroborus Jan 17 '21 at 21:04
  • I ended up using [this trick](https://stackoverflow.com/a/1165943/3508956) to determine the direction of the paths. The glyphs are described by curves, so they're not polygons, but if I use the key points of the curves it works well enough. – laptou Jan 18 '21 at 19:59
  • @Ouroborus Thanks, but that's not really accurate. What they are saying in that issue is that subpaths with opposing directions to their container are considered cutouts, but the container can be either clockwise or counterclockwise. – laptou Jan 18 '21 at 20:02
  • Also remember that TTF, CFF, and CFF2 paths have _different_ behaviour: TTF and CFF2 outlines have to be interpreted using the non-zero rule (based on winding number), whereas CFF outlines have to be interpreted using the even-odd rule (which doesn't care about winding in the slightest). – Mike 'Pomax' Kamermans Jan 18 '21 at 21:08

0 Answers0