CODEWITHSUNDEEP
pythonsvgsvgwrite
rikb
rikb

Reputation: 572

How to Invert SVG text with appropriate kerning?

How can I invert (rotate 180 degrees) a text object so that the text is kerned appropriately?

My example uses Python and the svgwrite package, but my question seems about any SVG.

Suppose I use the following code:

dwg = svgwrite.Drawing()
dwg.add(dwg.text(fullName, (int(width/2.),gnameHeight), 
                    font_size=gnameFontSize, text_anchor="middle"))

The above code generates text looking like this:

plain text

dwg.text() objects accept a rotate parameter that is applied to all characters in a text string, so I've used the following code to reverse the string first:

pcRotate = [180]
ngap = 1

revFullName = fullName
rcl = []
for c in revFullName:
    rcl.append(c)
    for i in range(ngap):
        rcl.append(' ')

rcl.reverse()
revFullName = ''.join(rcl)

dwg.add(dwg.text(revFullName, (int(width/2.),pcnameHeight), 
                font_size=gnameFontSize, text_anchor="middle", rotate=pcRotate))

But, this produces the very ugly version below:

rotated text

and this is using an artificial space gap between characters to make it slightly less unreadable.

What's the best way to tap into whatever kerning is being used by standard text in this inverted situation?

Upvotes: 0

Views: 1219

Answers (2)

rikb
rikb

Reputation: 572

I'm posting this as a self-answer, only to make formatting more clear. Two useful hints from @paul-lebeau happily acknowledged.

While the svgwrite package seems solid, its documentation is a bit thin. The two things I wish it had said:

  1. The rotate attribute of a <text> element is intended for situations where you want to rotate individual characters. If you want to rotate the whole text object, then you should be using a transform mixin instead.
  2. If you need to center the transformed text with respect to some center (other that the default current user coordinate system), add two additional parameters xctr,yctr. This differs from the doc which calls for a single center argument that is a (2-tuple).

The correct code is:

pcRotate = 'rotate(180,%s,%s)' % (int(width/2.),pcnameHeight)
textGroup = svgwrite.container.Group(transform=pcRotate)

textGroup.add(dwg.text(fullName, (int(width/2.),pcnameHeight), 
                font_size=gnameFontSize, text_anchor="middle"))
dwg.add(textGroup)

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101820

The rotate attribute of a <text> element is intended for situations where you want to rotate individual characters. If you want to rotate the whole text object then you should be using a transform instead.

http://pythonhosted.org/svgwrite/classes/mixins.html#transform-mixin

Upvotes: 2

Related Questions