Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Font Box Size

Explorer ,
Oct 24, 2017 Oct 24, 2017

Hi there

How are you doing?

I have one doubt, and maybe you can help or not.

I working in a project that I have to build a layout equivalent an web page.

The main system send me all information on a XML file with measurements, colors, fonts, etc.

The Y vertices of character is based for the top of the font, but I'm receiving top of the black box of the font as in the image below.

Screen Shot 2017-10-24 at 17.33.29.png

It shouldn't to be a problem if I calculate the size of the box and discount it.

But, there are variations between some fonts with the same size and same leading as the image below.

Screen Shot 2017-10-24 at 17.37.33.png

I would like to know if there is a way to get the black box sizes, or if I can find an formula/equation to discover the black box size of an character.

Thanks again!

TOPICS
Scripting
805
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Oct 24, 2017 Oct 24, 2017

Hello, Vinicius.

Did you tried the ".ascent" and/or ".descent" character properties?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Oct 24, 2017 Oct 24, 2017

Did you tried the ".ascent" and/or ".descent" character properties?

This approach ain't working for me.

Ascender Position of the font’s ascender line. Usually this is the height of the lowercase ‘b’ character

Descender Position of the font’s descender line. Usually this is the position of the bottom line of the ‘p’ character

Let's make a quick & dirty test. I select capital H (Arial, Bold, 10pt)

Main();

function Main() {

    var character = app.selection[0];

    var ascent = character.ascent;

    var descent = character.descent;

    var height = ascent + descent;

}

ascent

Result: 7.2802734375

descent

Result: 2.1044921875

height

Result: 9.384765625

Look at the screengrab:

25-10-2017 2-23-52.png

I think this is not what OP asked for: 'to get the black box sizes'.

— Kas

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Oct 24, 2017 Oct 24, 2017

The black box size on your screenshots is set by a font designer in a font editing app like FontLab. It is determined by a number of metrics settings: character width, left sidebearing, right sidebearing, zero (origin) point, baseline, the ascender and descender lines, the caps height, the x-height, the line gap, etc. As far as I know, there are no strict rules/standards on how to set them, so every font designer/foundry uses whatever they consider correct values. As a result, different fonts set to the same font size will have different physical sizes.

If you use a limited set of fonts, you may calculate the height of the black box for every font like so:

25-10-2017 0-09-18.png

On the screenshot above, the font is set to Arial Bold 10 pt.

The physical height of capital H is 7,115 pt; the height of the black box is 12,148 pt so it's x1.707 larger. Thus you can calculate it for any font size by multiplying the font size by the the factor. I am sure the vertical metrics should be the same for all font styles in the family.

As to horizontal metrics, it is set for each glyph (character) individually so every character has a unique width.

— Kas

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 24, 2017 Oct 24, 2017
LATEST

Hi

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines