Vertical Centering

[polarathene]

I was making a UI using large icons to map to the weather condition. I was trying to get horizontal/vertical centering but while wi-day-sunny seems good for this wi-thunderstorm seems to have a bias towards the baseline. I imagine that many icons will be like that.

Any chance of supporting aligning the icons vertically? I am using these with React-Native so am lacking many CSS features, I could manually mess around with offsets I guess, but perhaps exporting the font icons vertically aligned by centering them on the baseline would work too? Is there a benefit to icons like wi-thunderstorm aligning to the baseline instead of like how wi-day-sunny is aligned vertically?

[olavocarvalho]

@polarathene i'm having this issue right now too. Any suggestions to fix it?

[erikflowers]

They are all based off the cloud icon and aligned to all look like they sit similarly in the vertical space. Most of the icons have a cloud in them or something else that is a "bottom", but a few like the sun don't. The bottom of the rays aren't the bottom, but also the bottom of the circle isn't either. With the thunderstorm, the lightning and rain have to come down much lower so that when the icons switch or are lined up, they don't jump around.

I am not sure what you mean by aligning them vertically, though. In the screenshot you can see how the base shape of the cloud is aligned, then how the thunderstorm fits that, and then how the sun fits. All the icons with the cloud have to have their cloud lined up, like how an alphabet has an o p q d b all have their basic "o" shape in the middle and the ascenders and descenders go up and down. I can't have the thunderstorm icon aligned different than the cloud, the lightning is a descender. I am wondering if since you're not using them in html that they don't line up because it's not looking at it like a descender?

Either way, I am guessing the problem you're running in to is that they're all lined up to the bare cloud, and not their own heights and widths. This screenshot shows how they work, the thunderstorm lighning has to hang way down, and the cloudy-day has to have it's sunshine ascend way up.

[olavocarvalho]

So nice @erikflowers but the way i trying to vertical centering is like this image, i setted the icon a double font-size but with the same line-height of the right text but the icon goes upper than text. How is the best way to do this? computed css icon: box-sizing: border-box color: rgb(112, 116, 120) display: inline-block font-family: eathericons font-size: 24px font-style: normal font-weight: normal height: 34px line-height: 34px text-align: center transform: none width: 18.0156px -webkit-font-smoothing: antialiased

computed css parent div: box-sizing: border-box color: rgb(112, 116, 120) display: block float: left font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif font-size: 12px font-weight: bold height: 39px line-height: 34px min-height: 1px padding-left: 15px padding-right: 15px position: relative text-align: center width: 140.328px

[erikflowers]

Well since font sizes all go up from the baseline, bigger icons just get bigger like a letter would. If it's inline like a letter, that's harder to do since you only have text CSS to work with.

In my mind, they would be in different divs so both could be styled differently with margin/header/padding etc. So it's more about HTML than CSS in this case. Would be easier to see it in a codepen or something to experiment with.

Using the icons as inline text characters when they are much bigger isn't well thought out as they are. Happy to experiment if I can see your HTML.

[olavocarvalho]

@erikflowers suuure! You can see here: http://fast-rat-4750.vagrantshare.com/agrosomar/#/app/previsoes/pontual

[erikflowers]

This is a quick way

[olavocarvalho]

OMG! So many thanks!

[Martskin]

This will get you close too:

element.style {
    font-size: 3em;
    vertical-align: middle;
}

[polarathene]

@erikflowers Sorry I should have been more clear. Imagine a solid square background colour, and I want the weather icon to be centered in there as if it were an image, but as a font, the height of these icons varies but I can't get that value obviously :P

So I was proposing a solutiong that the vertical center point of each icon be it's height / 2, this was purely for use as an icon that'd be centered in a tile, not treated as text where aligning with other icons like clouds was important, I can see the value in that when using more than one icon. But for the type of UI element I'm creating with a large icon for the current weather, certain icons are off center, such as the thunderstorm looking like it's offset down a bit, I'd rather not have to adjust for each case if there was an easier way to update and export a variation.

[erikflowers]

I see. I don't think this is a feature that will be added to the font. I am not even sure if this would be any different with an SVG sprite, or how it would work when people want to use different sizes how it could be calculated to be totally dynamic. The only solution would be to have every icon's CSS be written exactly for it.

Is there any way you can post a screenshot of a few different icons, like the sun, the thunderstorm, and maybe another that has a different ascender and descender?

In these examples from the splash page, only the first one is actually centered in the box, all the rest look too low since they don't have ascenders. The only way I could fix this is to have the container have different padding. But I don't know how/if that would work with % since people might want to have the centered "icons" like you describe all sorts of sizes.

I don't have a solution, all I can see that would work is to do it by hand for the icons you need, unless you need it for every icon.

[polarathene]

@erikflowers I could get you screenshots but yours are sufficient. You can see how plenty of them aren't centering vertically. I'm not familiar with font development, but don't all the glyphs conform to some common lineheight that will scale with font size? Is it not possible to vertically align them to this line height value? This would be a different variant from the main font file. If I'm still not clear when you select text and get the highlight, if I'm not mistaken that shows the line height visually. I'm able to work with that value for vertically centering into a box/tile.

• All fonts are vertically centered across the line height, providing a predictable center point of lineheight/2.
• Font size just increases the size and should not affect the above statement, the same alignment logic should center all icons vertically into the element height they reside in with no issue.
• You could probably set padding and a background colour to get a vertically centered tile icon with this too.

[erikflowers]

The icons all align on the x-height of the font, the height of a lowercase x. The icons are all meant to be centered just like most lowercase letters - acemnosuvwxz - but then the other letters have ascenders and descenders: bdfghijklpqty. Imagine a box with a letter x perfectly centered, it will look all even. But if you change the x to d or p, it will not look even since the ascender and descender now skew the appearance.

All of the fonts are designed like the letter x. The lightning or sunbeams are the ascenders or descenders like in b or q. That is how they are intended to act so that the icons look appropriate when paired with text or when icons

I understand what you’re asking, that's just not how the font file works. The font itself has to have its parameters set in points, like below

I am not totally sure how I'd do what you're asking, but that would essentially be a whole other project. Your bet bet I think would to get the glyphs source file out of the repo, get Glyphs Mini (which is free) and copy and paste the art out of the glyphs into a vector program, and then save them as individual SVG files, then you don't have to worry about the CSS and typesetting as all as they can all be perfectly sized SVG icons.

[polarathene]

@erikflowers Ok so the cloud is aligned along the baseline right? I'm looking at this image for reference:

I understand how that works, with regular text. The line height I was referring to might be the in font terms the distance/height between the ascender and descender lines, IcoMoon explain under Font Metrics how they use this method to center their icons vertically:

The IcoMoon app aligns the top of the icon canvas to the ascender line and its bottom to the descender line of the font. Using this technique, the size of your font will directly translate to the size of the icon. For example, if you set your font-size in CSS to be 16px, you will get a 16px icon. This method was first introduced by IcoMoon.

This sounds like it's exactly what I'm proposing, I can give it a go and let you know how it goes? In case I'm still not clear, this variant would not be paired with text or any other icons in the set, so respecting alignment along the baseline is not required. It would be useful for things like lists in an app where the icon tile is aligned to the left/right edge and another element will contain text that does not need to align to the weather icon.

Some examples where the current font wouldn't be appropriate but a vertically centered version would:

And with this design it'd make sense for the current font for the week row, but vertically aligned font for the day view, otherwise the lightning may intersect with the location text, along with undesirable uneven/inconsistent whitespace vertically:

[erikflowers]

Your last picture is how they are set up, the week row example, yes.

For the "all in the same box" style, you are also right. The font would have to be re-typeset to look like this (terrible photoshop):

Where every icon is the same "points" high, points are virtual units, which when used as pixels makes them all the same. So every icon is custom sized to fit between the points of the ascender and descender as shown with the red lines above.

I get what you're saying now. My initial guess is that would require a new font file to be typeset, and then probably a real hard look at the CSS. It would have to be a sibling project.

[polarathene]

Alright, I may look into extracting the glyphs from the font to SVG and using some automated pipeline to build the font. If I find the time to do this I'll send in a PR to link to the additional repo for other users after the variant :)

and then probably a real hard look at the CSS

As I'm new to fonts and any related CSS, could you expand on that a bit? I would imagine the CSS would just be a map of the unicode to a class like I've seen with many icon fonts CSS. What else would be needed?

Closing as this issue has resolved. A vertical aligned variant will not be included/maintained here, but a sibling repo is welcome.