的text-align ="中" _only_ y方向?方向、align、text、QUOT

2023-09-11 08:00:26 作者:无字情书

我可以使用的text-align =中间文本元素居中文字。实际上这仅适用于x方向的作品不错。对于y方向我用的是伊恩的G问题对齐文本黑客在SVG 。

I can use text-align="middle" on a text element to center text. Actually this only works nice for the x-direction. For the y-direction I use the hack of Ian G in question Aligning text in SVG.

不过,我能做些什么,如果想在中心y方向的文本,但要左对齐的X方向的文字? 例如,我有一个矩形 k-元和文本 k-元的定位是正确的。该文本应垂直对齐居中,相对于RECT。所以我用的是的text-align =中间属性。但我要左对齐的X方向的文字(因为我想在矩形的右侧显示它)。这是不行的,因为的text-align 始终应用两者, X ÿ 值。

But what can I do, if a want to center a text in the y-direction, but want to left-align the text in x-direction? For example, I have a rect-element and a text-element positioned right of it. The text should be vertically aligned to appear centered in relation to the rect. Therefore I use the text-align="middle" property. But I want to left-align the text in the x-direction (since I want to display it at the right of the rect). That doesn't work, since text-align always applies the both, x and y values.

其实我不是真正的快乐,在这样的垂直对齐,并会preFER别的东西。但没有找到更好的解决办法呢。 (我不能用主导基线属性,因为我使用蜡染,它不支持它)。我甚至无法计算出它自己,因为在SVG我没有办法查询字体的上升/下降/基准。

Actually I am not really happy with the vertical alignment in that way and would prefer something else. But didn't find a better solution yet. (I can't use the dominant-baseline attribute, since I am using Batik, which doesn't support it.) I can't even calculate it myself, since in SVG I have no way to query the ascent/descent/baseline of a font.

推荐答案

基线 - 相关的属性,因为你已经发现,在没有得到普遍支持(还)。

The baseline-related attributes, as you have discovered, are not universally supported (yet).

一种可能的解决方案是使用类似于旧的CSS特技为垂直居中的方法。

One possible solution is to use a method similar to the old CSS trick for vertical centering.

设置文本的y坐标,以要居中的对象的垂直中心。然后用DY与EM值verically调整文本。

Set the y coord of the text to the vertical centre of the object you want to center on. Then use dy with an em value to adjust the text verically.

<text x="0" y="100" font-family="Verdana" font-size="20pt" dy="0.35em">Some TEXT</text>

DY 的量不会0.5em像你想象的,因为字体的视觉中心不会完全一半的EM高度。它会有所不同字体的字体。但是,一旦你找到一个很好的 DY 值一个特定的字体,它应该工作的任何字体大小。

The amount of dy won't be 0.5em as you might think because the visual centre of the font won't be exactly half the em height. It will vary from font to font. But once you find a good dy value for a particular font, it should work for any font-size.

演示在这里: http://jsfiddle.net/js88W/1/

尝试更改字体大小值,以确认它保持居中。

Try changing the font-size value to confirm it stays centred.