I'm doing a website, and I'm having some trouble with icon alignment. I have researched everywhere for a solution, and one has not been forthcoming.
Essentially, every time I use an icon and make it smaller than the main text (say, 14px), the icon is forced down by a couple of pixels, and if I keep it the same size, it isn't forced down, but instead extends downwards. This can be corrected with position: relative; top: [pixels]px;, but that feels dirty. I have tried vertical align baseline and middle, and I've tried some other things too.
Here's an example with the icon made smaller than the text:
And here is an example with the icon the same size as the text.
The problem is minor, but the icon should be aligned alongside the text. It would seem a lot of people have this problem, but no solution has worked for me.
What is the solution? Should I consider images instead of icon fonts? Or SVG, perhaps? I suffered the same problem when I attempted to use SVG icons instead.
Previously, I blamed the font. Now, with further work, it appears the font is partially to blame - odd sizes of font throw things off and require tweaks to get elements to line up. So, there's always the option of tweaking the font itself.
If the font still isn't working, or if you can't edit the font, a <span> with position: relative;top: -1px (or any other px/em/rem value, until it looks right) does the trick. But this isn't very cross-browser friendly - in Firefox, this got things looking right, and the same in IE and Edge. But in Chrome, everything was off by 0.5-1px.
Bizarrely, the CSS reset doesn't seem to fix that.
Related
I placed some Font Awesome icons in menu buttons to replace fixed-sized icons. When I do this with the CSS/Web Font approach the icons match the size of the text in the button. When I do it with the SVG/JS approach the buttons with icons are 1px taller. I can't find anything in my CSS that adds the extra pixel. The result is that a row of these menu buttons does not have a consistent height.
My markup is exactly the same in both cases; I use the <i> technique.
I can't tell for sure, but it appears the SVG/JS approach is being pushed by the developers (the CSS approach is described as "great ... for older browsers"). I'd like to use it, guessing that it's the future, but I'd really like to avoid redoing my menus if possible.
Has anyone else seen this problem and, if so, how did you resolve it?
I imported a font in my CSS file with font-face and used it in my navigation menu.
The problem is that the letters are cropped at the bottom and it kinda ruins the font.
See for yourself: dev.windbournecitizen.com/frontpage
It should look like this (with the changed text of course)
The font looks normal when you zoom in (with CTRL+Scroll) but not when you are not zommed in.
Is there any way to fix this?
The problem is encountered on Chrome 35 and Firefox 30 running on Windows 7
I managed to fix it.
By adding a stroke to the text it is possible to make the letters a bit bigger and the bottom of each letters is showing (almost) correctly. There are no more gaps.
I used this code to fix it:
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #fe9f00;
It can also be (kinda) fixed using text-shadow. It can be used as an alternative for browser who do not support -webkit-text-stroke
I've been looking at this small issue for a while and I can't seem to fix it. It's an firefox only bug it's fine in IE Chrome etc.
This website I made for a client shows the issue. On the start of the page you see 2 wheel PNG images Three of these images are there, you can switch the z-index by clicking the round circles on the bottom of the image.
As you see the Black colour is slightly more down, I can't seem to wrap my head around the issue since the line height is 0 and the way the black image is positioned is the same as the grey one. They are slightly downsized due to a max-size: 100%, but resizing them to the proper (1000px) doens't seem to help either, (did this locally).
If you open the pictures in photoshop or w/e they're exactly aligned.
Anyone have any idea why it goes wrong on Firefox only?
--> example
Removed the example since it's a website.
Very weird issue indeed. The only thing way I could get it to go away was to absolutely position the wheels. this would require you to set a height on #infographic and take off the margin-top:-100%;. Depending on how you use the #infographic container this solution might not be ideal for you, but at least something to consider to help solve your issue.
It's because of the whitespace between the elements. Unfortunately, some browsers observe it and thus some space is shown although it shouldn't. You can use this workaround:
Generally work with rem instead of em, you need it for this workaround to work easier. First you have to set the font-size of .infographic to zero. Every element inside your .infographic will now become a font-size of zero because you're using em. That's the reason why you should now change to rem, at least for the elements inside .infographic.
Now you're done.
In Google Chrome(34.0.1847.131), possibly other browsers too, we're having an odd rendering issue with a web font using MyFonts.
As shown in the screenshots below there is a pixel at the top of the text which is loading the default/previous colour.
When hovered the top pixel line is white (the normal state colour), when inactive the top pixel line is the default text (non-anchor) colour.
This happens on all parts of the site where using the font and only occurs when using the webfont.
I've tried adjusting text rendering modes and line heights, neither fixed the problem.
The font-size is set to 100% (on all elements) and this inherits 16px from the body element, interestingly changing this to 18px resolves the rendering problem.
Have tried with other standard fonts, not with another webfont yet. The font files, I believe, are loaded directly not remotely.
SOLUTION
Changed the anchor from display: inline; to display: inline-block; as the anchor wasn't fitting the text correctly.
Thanks
It's hard to say without looking at an actual example, but I think you might be experiencing this problem. The font metrics allow the font to run outside its container, and a bug in Chrome prevents these parts from recieving the hover color.
Try setting a background color on the element to see if there are any pixels actually running out of the element. To fix it, you'd need to make the element really wrap the text (by giving it a top padding, for example.)
I have created an algorithm that converts text formatted in SVG into HTML, the algorithm works well but the positioning of the text in the HTML version is slightly out compared to the SVG.
I have realised that this is due to the coordinate system in SVG; it's origin is at the bottom left rather than the top left. Therefore my HTML text is below the position it should be. This is for commercial software, personally I would rather keep the text as SVG, but I can't because of a client request, also this needs to be a pixel perfect copy!
In order to fix the HTML I need to align the text so that its baseline is at the point that I read from the SVG. I have tried to do this with vertical-alignment but with no success.
The problem is not working out the coordinates here, I already know where the baseline of the text should be.
Does anyone know how to to align the baseline of some text to a set point in HTML? Or does anyone know if it is even possible to place text using the baseline rather than the top left point.
CSS can't change the position of the baseline. It is where it is, based on the font.
I would love
to do this by trial an error but this needs to work for any SVG file,
which could use any font, at any size. Therefore the margin is going
to be different each time.
That rules out any kind of "hack" to make it look right..
Take a look at all the possible values for vertical-align.
If none of those help, I don't know what to suggest.
line-height should work for you. But to be honest, your going to need to play around with a few things, like padding, margin to get it just right.
You should be able to define the location using divs bottom and left (or whatever you have each line of text set as) CSS properties (and make sure that it's position is set to absolute).
Workaround
One way will be to wrap your fonts in an element to allow vertically nudging it in the viewport.
<style>
.font-vertical-fix {
position: relative;
bottom: -0.2em;
}
</style>
<span class="font-vertical-fix">
Some badly designed font family ported to the web.
</span>
Example: https://jsfiddle.net/rkc3ho48/
Solution
The solution is to use a Webfont that's designed for the web.
Not all fonts made for desktop apps like Adobe/Sketch are designed with the web in mind. On these platforms, the designer can just vertically nudge the font in the canvas.