Author Topic: Text aligned on median line instead of base line  (Read 3339 times)

Maurizio Margiotta

  • Newbie
  • *
  • Posts: 42
Text aligned on median line instead of base line
« on: October 13, 2015, 06:42:07 AM »
Would be useful to have an option to vertically align multiple sizes character based on their vertical center instead of their base line.

Now it's already possible but I have to do some tricky thing like this:
1. Set the font size to autosize between 10 and 18
2. Use big percentage sizes and set the text as
Quote
<size=+360%>BIG TEXT </size><b><sup><size=+194%>SMALL TEXT</size></sup></b>

In this way I get the big text as 65px and the small at 35px, vertically centered between each other.

Would be much easier to set the text size to max 35 and avoid using sup and size for every part of the text but only for the big text. Like this:
Quote
<size=+186%>BIG TEXT </size><b>SMALL TEXT</b>

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
Re: Text aligned on median line instead of base line
« Reply #1 on: October 15, 2015, 02:04:23 PM »
Would be useful to have an option to vertically align multiple sizes character based on their vertical center instead of their base line.

Now it's already possible but I have to do some tricky thing like this:
1. Set the font size to autosize between 10 and 18
2. Use big percentage sizes and set the text as
Quote
<size=+360%>BIG TEXT </size><b><sup><size=+194%>SMALL TEXT</size></sup></b>

In this way I get the big text as 65px and the small at 35px, vertically centered between each other.

Would be much easier to set the text size to max 35 and avoid using sup and size for every part of the text but only for the big text. Like this:
Quote
<size=+186%>BIG TEXT </size><b>SMALL TEXT</b>

Can you post a few images of how you expect this to work? More specifically, how do you expect Uppercase and lowercase letter with descenders like "j" to be aligned?

Maurizio Margiotta

  • Newbie
  • *
  • Posts: 42
Re: Text aligned on median line instead of base line
« Reply #2 on: October 20, 2015, 12:15:21 PM »
Sorry for the late reply, but I didn't receive any email notification.

Anyway this type of alignment works better with all uppercase letters. Here are some samples:

[ Guests cannot view attachments ]

[ Guests cannot view attachments ]

[ Guests cannot view attachments ]

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
Re: Text aligned on median line instead of base line
« Reply #3 on: October 20, 2015, 12:20:07 PM »
Sorry for the late reply, but I didn't receive any email notification.

Anyway this type of alignment works better with all uppercase letters. Here are some samples:

(Attachment Link)

(Attachment Link)

(Attachment Link)

Thanks for the examples that makes it clearer.

I'll take a look at what I can do.

Maurizio Margiotta

  • Newbie
  • *
  • Posts: 42
Re: Text aligned on median line instead of base line
« Reply #4 on: July 13, 2016, 06:24:28 AM »
Hi Stephan,

I saw that you are improving the vertical alignment with new options.

Do you think you could implement also this feature? I keep finding myself often in this centric vertical alignment with fonts of different sizes, but in the same line (my be is my designer that likes this stile too much :) ).

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
Re: Text aligned on median line instead of base line
« Reply #5 on: July 13, 2016, 01:00:10 PM »
This center line Vertical Alignment is pretty tricky because unlike the others where each line is aligned the same vertically, this requires potential adjustment to individual characters as they are shifted up / down. Furthermore as seen in the image below, this requires different adjustment for uppercase and lowercase letters.



In the case of the letter "E", the vertical center line is easy to figure out because it is the middle of the character. Same for the letter "x" because it is also the middle of the character but for the lowercase "l" or "p", that is not the case at all. The visual center line for "p" is the middle of the bubble of the letter or the same as lowercase "x" or "o". So this mode would require adjusting Uppercase letters differently than lowercase. Numbers need to be treated the same as uppercase characters. To further complicate matters some of the symbols align with the uppercase letters like "%" and "$" however, these "{" and "}" align with lowercase. I also fear this might be different from font to font so I am not sure how this could be handled automatically in terms of determining which character to align how. If all uppercase were one way and all lowercase another and then all symbols the same but it seems random'ish.

P.S. To produce the image above, I used the <voffset=x.xx> tag which makes it possible to easily shift whatever is enclosed in the tag vertically.


« Last Edit: July 14, 2016, 11:46:33 PM by Stephan B. »

Maurizio Margiotta

  • Newbie
  • *
  • Posts: 42
Re: Text aligned on median line instead of base line
« Reply #6 on: July 16, 2016, 05:01:36 AM »
My need is only to center two texts of different size, not to center align letters of the same size. So I suppose upper/lower case should not matter.

Maurizio Margiotta

  • Newbie
  • *
  • Posts: 42
Re: Text aligned on median line instead of base line
« Reply #7 on: July 16, 2016, 05:21:41 AM »
Anyway I missed the voffset tag that does already what I need. The only limitation could be with auto sizing text.
So I suppose this feature request could be canceled.

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5687
Re: Text aligned on median line instead of base line
« Reply #8 on: July 16, 2016, 11:34:45 AM »
Anyway I missed the voffset tag that does already what I need. The only limitation could be with auto sizing text.
So I suppose this feature request could be canceled.

I'll still keep this request in mind as I do believe it has its utility but like I said, it is a tricky one to implement correctly to have characters aligned properly. If the font (ttf or otf) metrics actually contained a center metric then it would be much easier but given it does not, finding some logical method to figure out how to align these characters is the challenge. You can't use their  (ascender + descender) / 2 since some characters are not aligned that way.

Anyway it is an interesting one for sure :)