Lepta Lepta - 6 months ago 20
CSS Question

Bug with Roboto font and break-word (on desktop Chrome)

It seems like a particular bug of desktop Chrome and Roboto font.

I've detected this issue on desktop:


  1. beta Chrome version 51

  2. Chrome 53 (canary)



And the problem is, when I have
div
(see css below) with lowercase
rt
it displays in a very strange way.

It automatically displays a strange "new line" as shown on picture - strange Roboto font behaviour

I created this code for demonstration:



.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>





You can write other combinations of
rt
letters to see this strange behaviour.

By the way -


  1. I don't have such issues on my tablet or smart-phone with latest Chrome.

  2. I don't have such issues with other fonts



So, how can I
disable
this behaviour without changing
css
?

Answer
font-kerning: none;

Hope it doesn't affect site design.

.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>