search

blackears / svgSalamander

158 stars 57 forks source link

Font rendering issues #42

Closed falki147 closed 3 years ago

falki147 commented 5 years ago

When using the text-anchor-attribute the text is not placed correctly when used with certain values and fonts (e.g. Arial and '1'). I found that using cursorX - x instead of textPath.getBounds().getWidth() in Line 377 and Line 384 gives much better results.

weisJ commented 3 years ago

Could you clarify how exactly the alignment isn't as expected?

falki147 commented 3 years ago

The calculation of the translation seems to be off for certain characters like 1 when using text-anchor.

Here's an example (modified version of this MDN example):

<svg width="240" height="240" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="#808080" />

  <!-- Anchors in action -->
  <text text-anchor="start" x="60" y="40" style="font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: bold;">1</text>
  <text text-anchor="middle" x="60" y="75" style="font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: bold;">1</text>
  <text text-anchor="end" x="60" y="110" style="font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: bold;">1</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="40" r="3" fill="red" />
  <circle cx="60" cy="75" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />
</svg>

Expected Behaviour (Firefox 91.0.2):

grafik

Actual Behaviour (SVG Salamander 1.1.2):

grafik

weisJ commented 3 years ago

Thank you for providing the example. I have addressed this issue in #79