3

(оригинальный вопрос - https://stackoverflow.com/questions/37512815/bug-with-roboto-font-and-break-word-on-desktop-chrome)

Баг обнаружен на десктопных версиях:

  1. beta Chrome version 51
  2. Chrome 53 (canary)

Дело в странном поведении строки при сочетании букв нижнего регистра rt.

Автоматически происходит перевод строки как на рисунке ниже -

strange Roboto font behaviour

Вот пример кода демонстрирующий баг:

.container {
  word-break: break-word;
}
.line {
  padding: 5px;
}
.inline-block {
  display: inline-block;
  padding: 7px 10px;
  background-color: #efefef;
  border: 1px solid silver;
  overflow: auto;
  white-space: pre-wrap;
  font-family: Roboto;
}
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<div class="container">
  <div class="line">
    <div class="inline-block">rt</div>
  </div>
  <div class="line">
    <div class="inline-block">rt rt rt</div>
  </div>
  <div class="line">
    <div class="inline-block">morty</div>
  </div>
  <div class="line">
    <div class="inline-block">mo rty</div>
  </div>
  <div class="line">
    <div class="inline-block">mo Rty</div>
  </div>
  <div class="line">
    <div class="inline-block">mo rTy</div>
  </div>
</div>

Бага нету в хроме для планшета и смартфона.

Как убрать баг используя данные стили css ?

P. S. Объясните, пожалуйста, почему такой баг собственно имеет место быть?

1
  • Кросс-языковые ссылки должны быть в обоих вопросах.
    – Qwertiy
    30 мая 2016 в 14:18

2 ответа 2

3

Всё-таки нашёл решение:

font-kerning: none;

Хотя ещё вопрос, насколько оно приемлемо...

.container {
  word-break: break-word;
}
.line {
  padding: 5px;
}
.inline-block {
  display: inline-block;
  padding: 7px 10px;
  background-color: #efefef;
  border: 1px solid silver;
  overflow: auto;
  white-space: pre-wrap;
  font-family: Roboto;
  font-kerning: none;
}
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<div class="container">
  <div class="line">
    <div class="inline-block">rt</div>
  </div>
  <div class="line">
    <div class="inline-block">rt rt rt</div>
  </div>
  <div class="line">
    <div class="inline-block">morty</div>
  </div>
  <div class="line">
    <div class="inline-block">mo rty</div>
  </div>
  <div class="line">
    <div class="inline-block">mo Rty</div>
  </div>
  <div class="line">
    <div class="inline-block">mo rTy</div>
  </div>
</div>

0

Вот несколько костылей (нормальных способов не нашёл):

  • Закрыть div в начале следующей строки
    Код выглядит ужасно, зато без последствий для пользователя
  • Перед закрытием </div> поставить пробел
    В таком случае изменяется отступ справа и пользователь это увидит

А проблемы с первым rt в моём хроме не наблюдается.

.container {
  word-break: break-word;
}
.line {
  padding: 5px;
}
.inline-block {
  display: inline-block;
  padding: 7px 10px;
  background-color: #efefef;
  border: 1px solid silver;
  overflow: auto;
  white-space: pre-wrap;
  font-family: Roboto;
}
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<div class="container">
  <div class="line">
    <div class="inline-block">rt</div>
  </div>
  <div class="line">
    <div class="inline-block">rt rt rt
</div> <!-- Закрыть элемент в начале следующей строки -->
  </div>
  <div class="line">
    <div class="inline-block">morty</div>
  </div>
  <div class="line">
    <div class="inline-block">mo rty </div> <!-- Добавить пробел => поменялся отступ справа -->
  </div>
  <div class="line">
    <div class="inline-block">mo Rty</div>
  </div>
  <div class="line">
    <div class="inline-block">mo rTy</div>
  </div>
</div>

2
  • Интересно, но только с первым rt у меня все еще проблемы при таком подходе) 30 мая 2016 в 14:18
  • 1
    @Lepta, у меня с ним вообще проблемы нет, даже в исходном варианте. Chrome 50.0.2661.102 (Официальная сборка) m (64 бит), Windows 7.
    – Qwertiy
    30 мая 2016 в 14:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.