Pro 6.4.2: SVG icon sits high when aligned to baseline

Beta
#1

After the update to 6.4.2 and the Bugfix: SVG icons were slightly positioned to high when used as a graphic control I thought this might be solved, however I am still having the following issue:

In the button element (and other flex-box based layouts with text + icons) if the Icon is loaded as SVG, and the flex-box alignment is set to Baseline, the icon sits higher than it should do, and in a different location to when it is loaded as a Webfont.

The following is how it should look, and does look when loaded as a webfont:
image

And the following is when it is loaded as SVG, changing nothing else about the graphic settings:
image

As you can see, the bottom of the chevron is no-longer aligned with the baseline.

Without baseline alignment working, we either have to load the icon as a Webfont, which is not as good for optimisation, or align it to center, which doesn’t always line up neatly if the icon changes, or align to the top and add a pixel margin, which again can be different for different icons, causing issues if multiple icons are used around the site.

#2

I am not really getting this to happen with baseline, do you have a site I could look at? Which font are you using on the text part? A template could also help me. Thanks

#3

I set up a new environment to test this bug, and I am still having the problem.

The following screenshot shows a variety of buttons with graphics enabled. For each button, I am only changing the Flexbox » Vertical, and the Graphic Icon » Load Type options. The font is the default for a new Wordpress site with Pro installed: Helvetica Neue. The icon is the default button icon: l-hand-pointer. The 5px margins have been removed, and only a left margin of 0.35em has been added to the icon. The lineheight of the text has been set to 1.4.

image
image2026Ă—286 40.5 KB

You can see that for Center, Start, and End, the alignment is identical between the SVG loaded icon and the Webfont loaded icon. However when alignment is set to Baseline, there is a significant difference in the position of the icon.

A similar issue can be seen with the plain Icon element. Loading in two of them and setting the Load Type to SVG and Webfont, you can see there is misalignment of the two icons.

image

These icons are sitting in a default Column with no changes made to the Design or Flexbox options.
The icons have also been left as default, apart from changing Load Type. I.e. no changes made to the width or height options.

Coming back to the button element, there are lots of icons that have been designed to align really well when set to baseline alignment (and loaded via Webfont). This is either sitting right on the baseline, for icons like the numbers and some larger arrows:

image
image1058Ă—168 8.47 KB

Or to align well with the height of the characters, in the case of thinner arrows or icons:

image
image1062Ă—112 7.52 KB

This really should be preserved between loading via SVG or via Webfont, or else alignment has to be achieved on an icon-by-icon basis, using margin and a Top vertical alignment.

1 Like
#4

I appreciate the notes on this one. It’s a little above my head, but from what I can gather FA is going for a centered approach as it’s slightly easier to work with, minus this baseline thing. Most searches lead me to svg properties like “dominant-baseline”, which are properties not sent in the FA SVGs. Not entirely sure if there is a way around this. There’s a set number of icons end of the day, so applying a top: 5px or something when in baseline might help, not sure how well that would work in practice.

SVG Center sort of looks like the baseline, is there any issues using that?

Happy holidays!