Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

text-anchor rendering problem #207

Open
mcdikki opened this issue Aug 24, 2021 · 0 comments
Open

text-anchor rendering problem #207

mcdikki opened this issue Aug 24, 2021 · 0 comments
Assignees

Comments

@mcdikki
Copy link

mcdikki commented Aug 24, 2021

There seems to be a bug in the text-anchor implementation.

If you render a svg with a <text> that contains a text-anchor value other than empty/start, it will not place the text correctly.
I'm almost sure the problem is, that the renderer applies the anchor only to the first character in the text.

Please see this example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" class="layout">
	<rect width="800" height="400" x="0" y="0" class="svg-sheet" stroke="grey" stroke-width="5" fill="white"/>
	<style> .ref { font: bold 125px sans-serif; fill:darkblue } </style>
	<style> .test { font: bold 125px sans-serif; fill:red } </style>
	<style> .eg { font: bold 32px sans-serif; fill:darkblue } </style>
        <style> .refleg { font: bold 28px sans-serif; fill:darkblue } </style>
	<style> .testleg { font: bold 28px sans-serif; fill:red } </style>

	<line x1="64" x2="64" y1="0" y2="262.5" stroke="darkblue" stroke-width="1" />
	<line x1="400" x2="400" y1="0" y2="262.5" stroke="red" stroke-width="1" />
	<text x="65" y="100" class="refleg" word-spacing="4">text-anchor: start</text>
	<text x="65" y="130" class="refleg" word-spacing="4">x:64</text>
	<text x="401" y="100" class="testleg" word-spacing="4">text-anchor: middle</text>
	<text x="401" y="130" class="testleg" word-spacing="4">x:400</text>
	
	<line x1="0" x2="800" y1="200" y2="200" stroke="grey" stroke-width="1" />
	<line x1="0" x2="800" y1="262.5" y2="262.5" stroke="grey" stroke-width="1" />
	<line x1="0" x2="800" y1="137.5" y2="137.5" stroke="grey" stroke-width="1" />
	
	<text x="400"  y="230" class="test" word-spacing="4" text-anchor="middle" >Testpattern</text>
	<text x="64"  y="230" class="ref" word-spacing="4">Testpattern</text>
	
	<line x1="400" x2="400" y1="262.5" y2="400" stroke="darkblue" stroke-width="1" />
	<text x="100" y="330" class="eg" word-spacing="4">text-anchor:</text>
	<text x="400"  y="300" class="eg" word-spacing="4" text-anchor="start">start</text>
	<text x="400"  y="330" class="eg" word-spacing="4" text-anchor="middle">middle</text>
	<text x="400"  y="360" class="eg" word-spacing="4" text-anchor="end">end</text>
	
</svg>

It generates the following expected image in a browser (Opera in this case):
OperaBrowserRender

But the same svg rendered with sharp vectors generates this:
SharpVectorRender

As you can see, the sharp vector renderer places the Testpattern text right at the center of the first letter (T) if the text-anchor="middle" is set.
For the text-anchor="end" it draws all letters on top of each other, ending on the anchor.
I reviewed the generated XAML code and saw that each letter is translated into an own path. Maybe the problem starts somewhere there.
I'm sorry I can't afford to check the code myself right now, but hopefully, these hints will help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants