How to Align multiline text?

[iqSoup]

I have a similar problem trying to center multiple lines of text.

Using object:setReferencePoint the invisible “text box” is centered just fine, which means the longest line of code is centered on screen. But my problem isn’t about positioning the text box, its centering the actual text within the text box.

So it looks like:
first line
this is the second line

Again, the textbox itself is centered, but not the text inside it. Any help would be much appreciated! Thanks! [import]uid: 94309 topic_id: 24738 reply_id: 104093[/import]

[mathtoons]

I’ve been having the same problem for weeks but haven’t received a reply back from anyone at Ansca. [import]uid: 89562 topic_id: 24738 reply_id: 107311[/import]

[jacques1]

Basically what people are after is centering the whole ‘block’ of multiline text, not simply centering the multiline text to the screen.
Using setReferencePoint before, after or whenever is not going to help center your whole ‘block’ of multiline text, the lines within the ‘block’ will continue to be left-aligned (even if the multiline ‘block’ ends up being centered to the screen).
Can’t believe something so simple has not been resolved yet.
And if corona ever gets round to it, adding in a line spacing variable would be most helpful too as the line spacing in multiline text is ridiculous. [import]uid: 66228 topic_id: 24738 reply_id: 140428[/import]

[jacques1]

Basically what people are after is centering the whole ‘block’ of multiline text, not simply centering the multiline text to the screen.
Using setReferencePoint before, after or whenever is not going to help center your whole ‘block’ of multiline text, the lines within the ‘block’ will continue to be left-aligned (even if the multiline ‘block’ ends up being centered to the screen).
Can’t believe something so simple has not been resolved yet.
And if corona ever gets round to it, adding in a line spacing variable would be most helpful too as the line spacing in multiline text is ridiculous. [import]uid: 66228 topic_id: 24738 reply_id: 140428[/import]

[AndyCWatson]

+1 for variable line spacing and having more control over left / centred / right aligned multi-line text.

[torbenratzlaff]

Hi guys,

I nearly finished a module that allows you to adjust your text as you wish. It includes the following things.

• multilined text, aligned to left right and center

• set your own linehight, textspacing, kerning

• use <span> tags (like in html) to give certain text passages different properties (color, font size and underline)

It take a little bit more memory and little more time to create the textbox, but it worth it.

It’s nearly finished, but I have to do a few bugfixes and a documentation, because you have to set up a font before you can use it, and thats a bit more complicated as normal.

[ksan]

Sounds amazing!

[torbenratzlaff]

Hey guys, it’s finally done. This is the solution for all your problems

I finished my work at a module called fontBOX, that is available at my blog.

With this module you can create text fields, which offer you several formating options.

These are:

• Manual line breaks
• Manual line height
• Left justified, right justified or centered text alignment
• Individual passages can be recolored, resized or underlined
• Write the entire text in uppercases
• Kerning and letter spacing

Download it here >

Here some examples what could be done with this module.

Hope you enjoy it

[ksan]

Great! Will try right away. Thanks much for sharing your solution. Most appreciated. 

[AndyCWatson]

wow, wow and wow. I’ll check this out very soon! you rock.

[ksan]

It is amazing. Works wonderfully. Thank you very much for making it available. 

[torbenratzlaff]

You are welcome my friend

I’m glad it works for other people as well as it does for me.

Please report me any bugs or issues you are running into.

[beernathan]

Looking great torbenratzlaff - this is a lifesaver!

Thanks,

Nathan.

[beernathan]

I noticed that the load time for my app is much longer once I call fontbox.newFontSet (see full call below). A few extra seconds in the simulator, but considerable on the device. Is there a way to manage this more efficiently, or a way to pre-load a font?

Thanks,

Nathan.

fontbox.newFontSet{    name = "nativeBold",                                              font\_name = native.systemFontBold,                                              kerning\_pairs = {["a"]={["b"]=1,},},                                              all\_letters = "abcdefghijklmnopqrstuvwxyzäöüÄÖÜßABCDEFGHIJKLMNOPQRSTUVWXYZ .,?!-:;\_+/()&%0123456789$'",                                              spacing = -0.01,                                             }  

[torbenratzlaff]

Hey Nathan,

thanks for responding.

I think I fixed the performance problem. Did some really unnecessary stuff there.

So the 1.1 version is online now.

Download >

Would like to know if it runs faster now

[beernathan]

No noticeable difference - still 5+ seconds to load in the simulator and 10+ seconds on my iPhone.

Nathan.

[torbenratzlaff]

Wow, ok, that’s strange.

Because after the change I did, I got no loadtime on simulator and around 1 sec on phone.

To explain what happens when you call fontbox.newFontSet:

To position all letters correct I have to get relation between their width and the fontsize. For that I create a textbox and loop through all characters an devide the textbox’s width with the fontsize. The only thing that I could do are funtions that let you save and load fontsets. With that you can save the fontset and load it at the next start.

One questions, did you use fontbox.addSpecialCharacters BEFORE you call fontbox.newFontSet ?

Otherwise I have no idea what could be done against the loading problem, because I couldn’t reproduce it

[beernathan]

Yes I am calling fontbox.addSpecialCharacters {“ä”, “ö”, “ü”, “Ä”, “Ö”, “Ü”, “ß”} before - as per your sample code - should I call it after?

Note that I also added 0123456789$’ to all_letters.

Thanks,

Nathan.

[torbenratzlaff]

No that’s fine, you did everything allright.

Below the code what’s happening if you call fontbox.newFontSet. Maybe you can find the mistake.

[LUA]

function fontbox.newFontSet(arg)
    local font_set = {}
    local name = arg.name or “test”
    font_set.font_name = arg.font_name or native.systemFont
    font_set.spacing = arg.spacing or 0.05
    font_set.char_width = arg.char_width or standard_char_width
    font_set.all_letters = arg.all_letters or standard_all_letters
    font_set.underline_size = arg.underline_size or 0.08
    font_set.underline_height = arg.underline_height or 0.5
    font_set.letter_ratios = {}
    font_set.kerning_pairs = arg.kerning_pairs or {}
    
    local all_letters = font_set.all_letters
    
    local font_size = 500
    local letterbox = display.newText("", 0, 0, font_set.font_name, font_size)
    for i=1, slenght( all_letters ) do
        local char = all_letters:sub( i , i )
    
        if char ~= special_chars[“pre”] then
            if special_chars[char] then
                char = special_chars[char]
            end
            
            letterbox.text = char
            local letter_width = letterbox.width
    
            local ratio = letter_width/font_size
            if char == " " then ratio = 0.3 end
            font_set.letter_ratios[char]=ratio
        end
    end
    
    letterbox:removeSelf()
    letterbox=nil
    
    fontbox.fonts[name] = font_set
end

[/LUA]

[AndyCWatson]

+1 for variable line spacing and having more control over left / centred / right aligned multi-line text.