I've been experiment with text-align and text-anchor and I read the
documentation at the wc3 site.
What I am doing seems to have no affect. I cannot determine if I am stupid
or Mozilla is broken.It seems to me that adding text-anchor="end" or
text-align="middle" should have some affect but it does not.
Perhaps someone could provide me with a working example?
Thanks!
Siegfried
I don't know where you've got text-align from but mozilla does support
text-anchor and partially supports alignment-baseline which may give
you the vertical effect you want.
http://www.w3.org/Graphics/SVG/Test/20030813/svggen/text-align-04-b.svg
Best regards
Robert
So I have a rectangle whose upper right corner is at 0,0 and width=12.5 and
height=12.5. The following code does not center it horizontally or
vertically:
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="middle" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="central" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="before-edge" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="text-before-edge" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="after-edge" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="text-after-edge" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="ideographic" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="alphabetic" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="hanging" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="central" ></tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="mathematical" ></tspan></text>
Could it be a problem with custom font I'm using? OK, I tried the default
font and removed the class="common-segoe" and that did not help with the
vertical centering. It looks like the alignment-baseline has no affect! Is
this a bug? But the horizontal alignment looks good. So maybe there is a
problem with the custom font I am using? Uggghh... I'm not sure how to fix
that.
Thanks!
Siegfried
My mistake it's dominant-baseline we partially support, not alignment-
baseline :-).
central and middle do the same thing at the moment which is presumably
incorrect but one of those is the one you want. The only others that
do anything are hanging (treated as text-before-edge) text-before-edge
and text-after-edge. The others you are trying e.g. mathematical,
ideographic are not implemented and do nothing.
Best regards
Robert
<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" height="100"
width="100">
<rect x="0" y="0" width="100" height="100" style="fill: #DDD; stroke:
none;"/>
<line x1="0" y1="0" x2="100" y2="100" style="stroke: grey;"/>
<line x1="0" y1="100" x2="100" y2="0" style="stroke: grey;"/>
<text x="50" y="50" style="dominant-baseline: central; text-anchor:
middle; font-size: 24pt;">X</text>
</svg>
Regards
Stefan