Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Wanted: Help centering Text

1,576 views
Skip to first unread message

Siegfried Heintze

unread,
Aug 30, 2008, 8:27:05 PM8/30/08
to
I'm having trouble centering text. Given a coordinate, I want the option of
centering text vertically, horizontally, both vertically and horizontally.

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


Robert Longson

unread,
Aug 31, 2008, 7:14:10 AM8/31/08
to

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

Siegfried Heintze

unread,
Sep 1, 2008, 11:46:26 PM9/1/08
to
That helps. Can I assume there is no way to center text vertically with out
using javascript to call getBBox?
Thanks!
Siegfried


Siegfried Heintze

unread,
Sep 2, 2008, 12:07:49 AM9/2/08
to
Woops! sorry. I did not read everything. I don't understand this
alignment-baseline. At
http://www.w3.org/TR/SVG/text.html#AlignmentBaselineProperty I read that it
does not appy <text but only <tspan. That does not seem logical.

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" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="central" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="before-edge" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="text-before-edge" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="after-edge" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="text-after-edge" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="ideographic" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="alphabetic" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="hanging" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="central" >&#57350;</tspan></text>
<text x="6.25" y="6.25" text-anchor="middle" class="common-segoe"><tspan
alignment-baseline="mathematical" >&#57350;</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


Robert Longson

unread,
Sep 2, 2008, 5:25:04 AM9/2/08
to
On Sep 2, 5:07 am, "Siegfried Heintze" <siegfr...@heintze.com> wrote:
> Woops! sorry. I did not read everything. I don't understand this
> alignment-baseline. Athttp://www.w3.org/TR/SVG/text.html#AlignmentBaselinePropertyI read that it

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

Stefan Schmitz

unread,
Sep 2, 2008, 4:46:23 PM9/2/08
to
The following example is centered, but only in FF 2.x and 3.x. Opera and
IE don't accept the dominant-baseline-Attribute, I suppose:

<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

0 new messages