From The Blog: Introducing new font metrics APIs, plus a new plugin

Getting Started Announcements
#1

Corona’s engineers have added two new APIs for getting information about fonts, with the intent of helping you better align text in your apps. We’ve also added a new plugin that you might want to take advantage of.

Font metrics APIs

Starting with daily build 2017.3121, there is a new API call, graphics.getFontMetrics(), which returns a table that contains values like the height of the font, font leading, and the ascent/descent values for the font. Ascent is the amount of recommended space above the baseline for single-spaced text, while descent is the suggested space below the baseline for single-spaced text. Leading is the recommended additional space between lines of text.

In addition, all TextObject objects (those created via display.newText()) have a new read-only property called baselineOffset which lets you adjust the position of the object so that you can easily align it with other objects, including graphics or other text objects that may be constructed with different fonts or font sizes.

Consider this output:

By using the baselineOffset property, you can easily align the baseline of each text object with the bottom of the gem for a more appealing display!

Battery State plugin

We also introduced a new plugin that lets you get the current state of the device’s battery. It offers an event-based update callback where you receive an event when the battery state changes (charging, unplugged, etc.). You can also call the batteryState.getState() function to get a one-time status on the device’s battery.

To use this plugin, visit the Corona Marketplace, activate the plugin, and then follow the integration documentation to add it to your project.

View the full article

#2

Thank you for the font metric API. This will be so useful :slight_smile:

#3

(update: This functionality is just what I needed, which I discovered after a few HOURS of updating code to use it. Don’t know why it took so long, except that I had to confirm the new values worked for text positioning. They do.

Also, these functions are much, much faster than my older methods, so that’s nice. However, caching the values they produce is much, much, much faster than using the method every time, if you an awful lot of text to render. Just letting you know…)

(Also, the values for “descent” do not necessarily match the values extracted by imagemagick using PHP, which is how I sucked them from the fonts in the first place.)

So happy this finally happened!!! I can replace a lot of my code with this functionality!

However, I’d like to suggest exposing more detail needed for proper text layout (what I need/use in my apps). There are more metrics available, and they are very useful for positioning text.

(Please, in the documentation, include the graphic below, or some very, very clear visual representation.)

In particular, you can see what’s available here: https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html

iOS provides two more values: cap-height and x-height. Let’s get those, too. There’s no way to get the cap-height or x-height from the other values provided.

Update: Yes, I was able to align to Cap Height…the “text.baselineOffset” did exactly that. Not sure about x-height height, but I don’t really care right now.

Cap-height is particularly important. Visually, that’s where a text should start in a text block, with accents and some shapes rising above the text box. InDesign, for example, lets you start text in a box at the cap height, and since I try to match layouts with InDesign, that’s tricky without that value!

textpg_intro_2x.png

#4

Is there any chance of getting the option to set the font leading (the vertical distance between multiple lines of text) somehow? Right now it’s a big nuisance to need to split up text into individual lines or (illegally) edit the font with expensive software.

I’m sure it can’t be too difficult to implement this, no?

#5

Not sure if it’s ok to hijack this thread? For my own games I made a text rendering system that does support things like that - I wonder if there would be any interest for a fully featured plugin released in the marketplace?

#6

The interest would depend on the price :slight_smile:

But honestly, setting line spacing seems to be something that should be feasible out of the box.

#7

Please don’t hijack threads.

#8

Especially not Corona’s extra special blog threads. People have been killed for less. You have been warned.

#9

Hi @mimetic,

In my testing, “baselineOffset” doesn’t necessarily yield the same thing as Apple’s reference for “Cap Height”. Are you sure you’re getting those results across multiple fonts? I don’t seem to be getting that, but perhaps my tests aren’t the same as yours.

Also, what is the most accurate method you’ve found to get the baseline of the text? I’m using TextObject.y-TextObject.baselineOffset which seems to work fine.

Brent

#10

You are right, I am not achieve cap-height!

I am trying to align text to a box, either at cap-height (top of a letter, e.g. A) or ascender height (e.g. The top of a character including the accent, e.g. À). 

Positioning the text object with TextObject.baselineOffset aligns to the ascender height (Avenir-Black 48pt)… and sometimes not, depending on font size (e.g. Avenir-Black 14pt).

So, I don’t know what’s going on, now. This works consistently across font sizes, and more importantly, matches InDesign layout perfectly.

See my text render code : https://github.com/mimetic/corona-textrender

Run the main.lua in the “/examples” folder. However, tweak the styles  in the examples/assets folder to see the first line change.

local function GetYAdjustment(text, font) -- Best match for Ascent (includes accents, e.g. À) local metrics = graphics.getFontMetrics( font, text.size ) yAdjustment = metrics.height - text.height -- Alternative method: To align to the Cap Height: yAdjustment = text.baselineOffset return yAdjustment end
#11

Hi @mimetic,

Thanks, I’ll check out your project soon.

In the meantime, does this new graphic clarify the key aspects, and did I get all of the details correct?

https://docs.coronalabs.com/api/library/graphics/getFontMetrics.html

Brent

#12

Brent and / or Rob,

Any input no my leading / linespacing question? There are workarounds for this, so it’s not critical or urgent of course, but this seems like an easy feature addition.

#13

The way we generate our text objects (pass the string to an OS specific API that returns an image texture and mask containing the results), there isn’t a good way to get or control those values. We are not generating native text but an image to push into OpenGL. This limits the available functionality. 

Rob

#14

Brent, yes, the graphic is perfect.

The way we generate our text objects (pass the string to an OS specific API that returns an image texture and mask containing the results), there isn’t a good way to get or control those values. We are not generating native text but an image to push into OpenGL. This limits the available functionality. 

 Rob, thank you for this kind of explanation. It helps a lot to know this level of detail when we discuss these matters.

#15

Thank you for the font metric API. This will be so useful :slight_smile:

#16

(update: This functionality is just what I needed, which I discovered after a few HOURS of updating code to use it. Don’t know why it took so long, except that I had to confirm the new values worked for text positioning. They do.

Also, these functions are much, much faster than my older methods, so that’s nice. However, caching the values they produce is much, much, much faster than using the method every time, if you an awful lot of text to render. Just letting you know…)

(Also, the values for “descent” do not necessarily match the values extracted by imagemagick using PHP, which is how I sucked them from the fonts in the first place.)

So happy this finally happened!!! I can replace a lot of my code with this functionality!

However, I’d like to suggest exposing more detail needed for proper text layout (what I need/use in my apps). There are more metrics available, and they are very useful for positioning text.

(Please, in the documentation, include the graphic below, or some very, very clear visual representation.)

In particular, you can see what’s available here: https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html

iOS provides two more values: cap-height and x-height. Let’s get those, too. There’s no way to get the cap-height or x-height from the other values provided.

Update: Yes, I was able to align to Cap Height…the “text.baselineOffset” did exactly that. Not sure about x-height height, but I don’t really care right now.

Cap-height is particularly important. Visually, that’s where a text should start in a text block, with accents and some shapes rising above the text box. InDesign, for example, lets you start text in a box at the cap height, and since I try to match layouts with InDesign, that’s tricky without that value!

textpg_intro_2x.png

#17

Is there any chance of getting the option to set the font leading (the vertical distance between multiple lines of text) somehow? Right now it’s a big nuisance to need to split up text into individual lines or (illegally) edit the font with expensive software.

I’m sure it can’t be too difficult to implement this, no?

#18

Not sure if it’s ok to hijack this thread? For my own games I made a text rendering system that does support things like that - I wonder if there would be any interest for a fully featured plugin released in the marketplace?

#19

The interest would depend on the price :slight_smile:

But honestly, setting line spacing seems to be something that should be feasible out of the box.

#20

Please don’t hijack threads.