Author Topic: vertical fit alignment that uses cap height only (ignores ascenders/descenders)  (Read 4561 times)

richjoslin

  • Newbie
  • *
  • Posts: 9
I would like the vertical fit alignment (or an option) to ignore ascenders and descenders, and only consider capital letter height.

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
I would like the vertical fit alignment (or an option) to ignore ascenders and descenders, and only consider capital letter height.

How is this different than using the vertical midline alignment?

[ Guests cannot view attachments ]

richjoslin

  • Newbie
  • *
  • Posts: 9
Whoops, been a while, sorry.  The difference is that the option there includes the bottoms of descenders (letters that descend below the baseline: gpqy) to align the text.  What I want is something that uses only the cap height, and ignores the bottom of gpqy.  I'll post a pic with examples when I get a chance.
« Last Edit: May 31, 2016, 04:21:43 PM by richjoslin »

richjoslin

  • Newbie
  • *
  • Posts: 9
Here's how it aligns currently:



And here's how I'd like it to align:



For now, I use the vertical alignment and then nudge it down a few units.

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
Here's how it aligns currently:



And here's how I'd like it to align:



For now, I use the vertical alignment and then nudge it down a few units.

I'll take a look. The biggest issue with adding this is simply the UI part and trying to squeeze in another button.

richjoslin

  • Newbie
  • *
  • Posts: 9
I totally understand.  Personally, I would change it globally, so maybe a global bool setting somewhere.  Not critical, but nice to have.  Thanks for replying!

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
I am looking into this right now and do have a quick question.

How do you see this working when you have multiple lines of text? On a single line, it is pretty clear how it should be aligned but what about multiple lines or is this limited to single lines (just like the baseline alignment)?

Here is an example which is aligned based on tallest character (geometry) to the baseline.



Using the geometry can be problematic given the vertical alignment can change as you go from lowercase to uppercase characters. Ideally, we would want to use something consistent for the font. Since I don't have access to the Cap Height, we could use the Ascender which in the case of most fonts, it higher than the Cap Line but we do have control over the Ascender in the Font Asset Editor inspector.

Here is an example of this font asset using the unmodified Ascender to Baseline vertical alignment.



The blue lines at the top show the Ascender and as you can see the text is centered vertically between the baseline and Ascender. Next I adjust the Ascender to be at the top of the Uppercase characters (Cap Height).



As you can see the text is now perfectly centered vertically between the baseline and new Ascender position.

Now I could add a Cap Height property to the Font Asset which I would have to approximate by using the top of the letter T for instance. However, I am not certain this is necessary and would be use for anything other than the new vertical alignment mode.
« Last Edit: July 08, 2016, 02:52:42 AM by Stephan B. »

richjoslin

  • Newbie
  • *
  • Posts: 9
How this would affect multiple lines is an interesting question I hadn't thought of.  I think that's much less of a concern in my case.

The more specific use case I'm focusing on is when two or more buttons are side-by-side.  When one button has descenders and another doesn't, they end up having different baselines.  I'm hoping a Cap Height alignment will both make it look better individually and also keep the baselines consistent across buttons.

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
How this would affect multiple lines is an interesting question I hadn't thought of.  I think that's much less of a concern in my case.


It wouldn't really work as only the first line would be aligned this way. So this is a single line type feature (which is fine).

Quote
The more specific use case I'm focusing on is when two or more buttons are side-by-side.  When one button has descenders and another doesn't, they end up having different baselines.  I'm hoping a Cap Height alignment will both make it look better individually and also keep the baselines consistent across buttons.

This new option does exactly that as you can see in the image below.



Since it is based on the Ascender & Baseline, you may have to adjust the Ascender of some fonts which should not really affect anything. I could add a Cap Height which would be based on the one of the capital letters of a given font but I am not sure it is necessary.

richjoslin

  • Newbie
  • *
  • Posts: 9
Awesome!  Thank you so much for this!

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
Awesome!  Thank you so much for this!

You are most welcome and thank you for suggesting this in the first place :)

Here is the location of the option in the Text Inspector panel.



Not sure about the icon design given my graphic skills suck but good enough I think  ;)
« Last Edit: July 08, 2016, 06:06:40 PM by Stephan B. »

richjoslin

  • Newbie
  • *
  • Posts: 9
My suggestion would be to change the existing button to also have Aj in it, and have a line at the bottom of the j instead of at the baseline.

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
My suggestion would be to change the existing button to also have Aj in it, and have a line at the bottom of the j instead of at the baseline.

I agree. My only concern was those icons being so tiny and that bottom line (Descender) being too close to the edge of the button. What do you think?



BTW: I went ahead and added a Cap Height property to Font Assets. The Cap Height is based on the letter height of the letter A. If there is no letter A then it will be set to zero. However, this value can be adjusted per font asset.
« Last Edit: July 09, 2016, 01:55:06 AM by Stephan B. »

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
I made some modifications to the TextInfoDebugTool.cs where "Show Characters" will now also show the Cap Height and Baseline per character.



I added labels to indicate what each lines are.

richjoslin

  • Newbie
  • *
  • Posts: 9
Love the new buttons and the new debug info!  Solid.