Tutorial: Right-Aligned UV Text (and support for RTL languages)

Well, I’d been wondering if there was a way to right align UV text in the GE, and [a]drien asked about it around a week ago, so I thought I’d give it a try. The solution I found is incredibly simple, and you’ll love knowing how to do it for future projects. It also has the added benefit of RTL (Right-to-Left) language support for languages like Japanese and Hebrew.

1. Start with a regular UV Text object.

http://img135.imageshack.us/img135/9324/leftstandardsx9.jpg

If you don’t already know how to make UV Text, I encourage you to use ST150’s helpful tutorial and premade text images. Also, I have several ready to use UV Text objects available for downlaod on my website. (They’re in Blender Library format. Follow the easy tutorial to import them.)

2. Okay, now that you have a Text object, rotate it 180 degrees so that it faces away from you.
Tip:
You can do this all much quicker with the keyboard than with the mouse. Press “R” to rotate, then press “Y” twice to contrain rotation to the local Y-axis. Type “180” to enter the rotation directly, the press “Enter”.

http://img115.imageshack.us/img115/5118/rot180mi6.jpg

3. Flip the normal in edit mode (W Key >> Flip Normals). When you view the text in object mode, you will see that the text is mirrored.

http://img222.imageshack.us/img222/9695/flippednormalad6.jpg

Notice where the origin is, though? Previously the text had generated from the left to the right. The mirrored text originates from the right! Now we just need to flip it around…

4. Flip the UV mapping. From object mode, enter UV face select mode (F Key over the 3d view). In the UV editor, select the two vertices on the left. Grab them and move them along the X axis to the opposite side of the other two vertices. Now the two selected vertices should be on the right. Select all vertices and move the box back over the @ symbol.

http://img112.imageshack.us/img112/4896/flipuvqy5.jpg

Exit UV face select mode (F Key again). Now the letters are no longer mirrored.

http://img119.imageshack.us/img119/2944/reversedtextbq0.jpg

This is exactly what we want for RTL language support, but if your using a LTR language (like English), it reads backward. That’s easy enough to fix, though.

5. Reverse the Text. Go to the logic buttons (F9) and reverse the data in the property named “Text”. For this example, I changed “www.blendenzo.com” to “moc.oznednelb.www”. If you’re using Python to update your text field, you’ll need to write a short converter script to flip the text. I plan to add one to the tutorial soon. If you need it, bug me for it and I’ll write it sooner.

http://img225.imageshack.us/img225/9960/textreversedhn6.jpg

Tip: Don’t think too hard about it. Just type the text the way it appears already in 3D view. Look at the image of backward text above. Start with “m”, then type the letters as they appear from left to right "moc.ozne…

Vioala! Right-aligned text. And they said it couldn’t be done…

http://img86.imageshack.us/img86/1103/leftrightxg2.jpg

–Update–
reverseText.py Python Script
Typing everything in reverse may seem a bother, so I’ve created a script that will reverse the text for you. Here’s the code:

import GameLogic as g

def reverseText(text):
    length = len(text)
    newText = ""
    for x in range(length):
        newText += text[(length-1)-x]
    return newText

own = g.getCurrentController().getOwner()

own.Text = reverseText("Fill in your text here!")

Download the .py file and connect it to your right-aligned text object. Have fun! (You could also use it on left-aligned text if you wanted to pretend you were Leonardo DaVinci.)

may i see some pics please?

…Genius!!

great :slight_smile: just works fine, thx. the documentation on the gameengine simply doesnt tell a word about how to map text on a plane, it says 'we use a special premade material for the score-display , arggh, so thx for the nice tricks

woah i’ve never thouht of that nice
will be very usefull

I added pictures and updated the tutorial to include notes about RTL language support. Hope you find it useful. I’ll be writing a short Python “converter script” for those of you who update your text fields via Python.

(Sorry it took so long to get the pics up. I was without electricity for most of the night.)

Hmm. I think it would have it’s applications. The format mod for strings can also be used on strings, making it useful for right hand alignment.
aString = “hi”
print aString
hi
print “%5s”%aString
###hi
The spaces would have been taken out so I put the # signs where the spaces would be, but the formatter would right align the string to 5 characters. I’m learning about this stuff, also, because I never thought of using it for that application.

Edit: Hey, another way
aString.rjust(25)
right justify to 25 characters

fireside: Is there also a center justify? Nevermind. I found it in the documentation. It’s center(width[,fillchar]). Default fillchar is space.

I did some testing with rjust() and center(), and they don’t seem to yeild a consistent point of origin for the letters. Am I doing something wrong, or is it just because the text is not monospaced (that is, each letter takes a different amount of space)?

Hmm, yeah, I didn’t think about that. Probably. Well, another kind of fun thing might be to use your method and write a script that reverses the text. Centering probably wouldn’t be as noticeable.

The following pics are broken for me:
rot180mi6.jpg
flipuvqy5.jpg
reversedtextbq0.jpg

Toomai: I’ll try to fix that tonight. I have to go to work (and stack boxes all day!) right now.

fireside: Yeah. I’m going to write a script to do that. Should be pretty easy. I’ll also do that tonight.

added a script to reverse a string of text. it’s in the top post at the end of the tutorial.