Тако шире, чем Тако. Как я могу это исправить?

Я пытаюсь загрузить div с диакритическими знаками поверх div без них. Однако интервал не работает, как я. (См. фрагмент ниже.) Как я могу это исправить?

div.text {
	    width: 75%;
	    position: relative;
	}
	div.diacritics {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
      z-index: -1;
      color: red;
	}
<div class="text">String String String String String String String String String String
	<div class="diacritics">
  Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
  </div>

<div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
	<div class="diacritics">
  Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
  </div>


html css
person webmagnets    schedule 26.05.2016    source источник
comment
Я не могу воспроизвести проблему в Mac OS X: i.stack.imgur.com/BH9Sw .png   -  person    schedule 26.05.2016
comment
В качестве контрапункта, я также на OS X, но вижу проблему - я предполагаю, что это разница в установленных шрифтах. Что предполагает, что ответ на этот вопрос: Не пытайтесь это сделать, потому что результаты трудно предсказуемы.   -  person Daniel Beck    schedule 26.05.2016
comment
Если имеет значение, что "Táco" не всегда точно такой же ширины, как "Taco", тогда ваш макет должен быть более надежным.   -  person Sparky    schedule 26.05.2016

Ответы (2)


arrow_upward
3
arrow_downward 

div.text {
    	    width: 75%;
    	    position: relative;
            font-family: monospace;
    	}
div.diacritics {
    	    width: 100%;
    	    height: 100%;
    	    position: absolute;
    	    top: 0;
    	    left: 0;
            font-family: monospace;
          z-index: -1;
          color: red;
    	}    	
    <div class="text">String String String String String String String String String String
    	<div class="diacritics">
      Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
      </div>

    <div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
    	<div class="diacritics">
      Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
      </div>

Если вы можете пойти на компромисс, вы всегда можете попробовать использовать семейство моноширинных шрифтов.

person StardustGogeta    schedule 26.05.2016
comment
Я думаю, это лучше всего отвечает на вопрос, хотя я бы предпочел не использовать этот шрифт. Спасибо. - person webmagnets; 26.05.2016

arrow_upward
3
arrow_downward

Вы захотите взглянуть на font-kerning.

CSS-свойство font-kerning управляет использованием информации о кернинге; то есть он контролирует расстояние между буквами. Информация о кернинге хранится в шрифте, и если шрифт хорошо кернингован, эта функция позволяет сделать интервалы между символами очень похожими, какими бы ни были символы.

Посмотрите на это перо http://codepen.io/anon/pen/JKPMGM, я установил кернинг никому, и они выстроились в очередь.

div.text {
        width: 75%;
        position: relative;
        font-kerning:none;
    }
    div.diacritics {
        width: 100%;
        height: 100%;
        position: absolute;
        font-kerning:none;
        top: 0;
        left: 0;
      z-index: -1;
      color: red;
    }

Еще немного информации.

Кернинг регулирует интервал между отдельными формами букв, а отслеживание (буквенный интервал) регулирует интервал равномерно для диапазона символов. В шрифте с хорошей керриной все двумерные пробелы между каждой парой символов имеют визуально одинаковую площадь.

person Haru    schedule 26.05.2016
comment
Спасибо, но это все еще не работает на моем Mac OS X. Интересно, почему некоторые могут воспроизвести проблему, а некоторые нет. - person webmagnets; 26.05.2016
comment
Не похоже, что вы назначаете шрифт. Какой шрифт вы хотите использовать? - person Haru; 26.05.2016