Визуальное центрирование отдельных букв независимо от того, являются ли они заглавными или строчными - PullRequest
Новая
       10

Визуальное центрирование отдельных букв независимо от того, являются ли они заглавными или строчными

0 голосов
/ 05 июля 2018

Итак, мне нужно сделать круги, в каждом из которых есть одна буква, и я пытаюсь центрировать буквы. Однако есть разница в том, как они центрируются, когда я использую буквы разного размера, в этом случае строчные q и заглавные A (просто пример, это может быть любая буква ): 

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>

Вы можете видеть, что нижний регистр q ниже верхнего регистра A, потому что буквы имеют разные размеры и q не заполняет верхнюю часть. Это приводит к тому, что буква q выглядит неправильно по центру.

Вот изображение, демонстрирующее то, что я имею в виду, остается тем, что я получил, право тем, чем я хочу:

q должно быть немного выше, чтобы он выглядел по центру правильно. Можно ли сделать это без изменения CSS для каждой отдельной буквы с другим размером?

1 Ответ

0 голосов
/ 05 июля 2018

Решение Javascript. Я разбил строчные буквы на три разных типа: стандартные строчные, под линией и высокие буквы. Я нацеливаюсь на них, используя коды ASCII, добавляю CSS-классы и изменяю margin-top соответственно. Вы могли бы добавить еще несколько исключений соответственно (буква j может нуждаться в уменьшении на пиксель.)

Вот ручка. 

$('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>
...