0

So I need to make circles that each have a single letter in them and I'm looking to center the letters. There is however a difference in how they get centered when I use letters with different sizes, in this case the lowercase q and the capital A (just an example, it could be any letter):

span {
  align-items: center;
  display: flex;
  font-family: sans-serif;
  justify-content: center;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  border: 1px solid black;
  float: left;
}
<span>q</span>
<span>A</span>

You can see the lowecase q being lower than the uppercase A, which is because the letters have different sizes and the q doesn't fill the upper part. This causes the letter q to not look centered correctly.

Here's an image to demontrate what I mean, left being what I got, right being what I want:

The q should be a bit higher in order to make it look centered correctly. Is it possible to do this without changing the CSS for every individual letter with a different size?

Maharkus
  • 2,841
  • 21
  • 35
  • 1
    This isn't possible as you would need to know how each letter renders and add the correct amount of pixels to each - you probably best picking a font that renders in the way you want or edit the one you want so the line up in that way – Pete Jul 05 '18 at 11:55
  • @Pete I was hoping for there to be some weird CSS hack, that magically solves all my problems ha. I don't really like the thought of adding another font, but that might be what I get stuck with. Thanks for your input. – Maharkus Jul 05 '18 at 12:00
  • 1
    I don't know if there is a CSS hack but did you see this javascript solution for detecting the case of a letter? https://stackoverflow.com/questions/1027224/how-can-i-test-if-a-letter-in-a-string-is-uppercase-or-lowercase-using-javascrip – Derek Nolan Jul 05 '18 at 12:02
  • this is how english work .. the letter q need to be like that, so I don't know why you want such behavior? – Temani Afif Jul 05 '18 at 12:05
  • @DerekNolan Interesting, this is not a perfect solution, as there are letters like q or f that differ from the regular "capital" and "lowercase" letters, but it's a neat idea – Maharkus Jul 05 '18 at 12:05
  • @TemaniAfif because in this context, the letters will be shown individually and the individual letters not being centered don't look as good as if they were centered. Some letters are lower than others regarding their correlation to the other letters, but in this case there is no correlation, making it unneccessary to have some lower than others. – Maharkus Jul 05 '18 at 12:08
  • but they are centred :) so what you want is not centring but another alignment depending in the type of the letter – Temani Afif Jul 05 '18 at 12:09
  • Well then you could do each of the letters individually, maybe by targeting each ascii code. But that might be a little tedious. I might try put together an answer. – Derek Nolan Jul 05 '18 at 12:10
  • @DerekNolan yeah, that is what I am trying to avoid, because it would be a lot of work. – Maharkus Jul 05 '18 at 12:13
  • Is it only a handful of letters you need to change though? q, y, p and j? – Derek Nolan Jul 05 '18 at 12:46
  • @DerekNolan yeah. Ideally also for letters like a,e,c,m,n,r,x,s etc., but the letters you mentioned are obviously displaced further. – Maharkus Jul 05 '18 at 13:10
  • Hmm... but are they not already centered or do you need them to come slightly up above the line in your diagram? – Derek Nolan Jul 05 '18 at 13:12
  • The line is pretty much imaginary and is only supposed to show how I want the letters centered. So I want q for instance, to be higher up. – Maharkus Jul 05 '18 at 13:14

1 Answers1

1

A javascript solution. I've broken down the lowercase letters in to three different types: standard lowercase, below the line, and tall letters. I'm targeting them using ASCII codes and adding CSS classes and changing margin-top accordingly. You could add in some more exceptions accordingly (the letter j might need to come down a pixel.)

Here is a pen.

$('span').each(function(){
    var letter = $(this).text();
    var letterCode = letter.charCodeAt(0);
  //check if lowercase
  if (letter == letter.toLowerCase()){
   $(this).addClass('lowercase');
  }
    if (letterCode == 106 || letterCode == 112 || letterCode == 113 || letterCode == 121 || letterCode == 103 ){ //jpqyg
      $(this).addClass('below-line');
}
  //All these other letters : bdfiklt
  if(letterCode == 98 || letterCode == 100 || letterCode == 102 || letterCode == 105 || letterCode == 107 || letterCode == 108 || letterCode == 116){
    $(this).addClass('tall-letters');
  }
});
div {
  align-items: center;
  display: flex;
  font-family: sans-serif;
  justify-content: center;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  border: 1px solid black;
  float: left;
}
span{
  margin-top: 0;
}
.lowercase{
  margin-top: -3px;
}
.below-line{
    margin-top: -6px;
}
.tall-letters{
  margin-top: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>A</span></div>
<div><span>a</span></div>
<div><span>B</span></div>
<div><span>b</span></div>
<div><span>C</span></div>
<div><span>c</span></div>
<div><span>D</span></div>
<div><span>d</span></div>
<div><span>E</span></div>
<div><span>e</span></div>
<div><span>F</span></div>
<div><span>f</span></div>
<div><span>G</span></div>
<div><span>g</span></div>
<div><span>H</span></div>
<div><span>h</span></div>
<div><span>I</span></div>
<div><span>i</span></div>
<div><span>J</span></div>
<div><span>j</span></div>
<div><span>K</span></div>
<div><span>k</span></div>
<div><span>L</span></div>
<div><span>l</span></div>
<div><span>M</span></div>
<div><span>m</span></div>
<div><span>N</span></div>
<div><span>n</span></div>
<div><span>O</span></div>
<div><span>o</span></div>
<div><span>P</span></div>
<div><span>p</span></div>
<div><span>Q</span></div>
<div><span>q</span></div>
<div><span>R</span></div>
<div><span>r</span></div>
<div><span>S</span></div>
<div><span>s</span></div>
<div><span>T</span></div>
<div><span>t</span></div>
<div><span>U</span></div>
<div><span>u</span></div>
<div><span>T</span></div>
<div><span>t</span></div>
<div><span>U</span></div>
<div><span>u</span></div>
<div><span>V</span></div>
<div><span>v</span></div>
<div><span>W</span></div>
<div><span>w</span></div>
<div><span>X</span></div>
<div><span>x</span></div>
<div><span>Y</span></div>
<div><span>y</span></div>
<div><span>Z</span></div>
<div><span>z</span></div>
Derek Nolan
  • 744
  • 5
  • 11