(the original question is https://stackoverflow.com/questions/37512815/bug-with-roboto-font-and-break-word-on-desktop-chrome )

A bug was detected on desktop versions:

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

The point is the strange behavior of the string when combining lowercase letters rt .

A line feed automatically occurs as in the figure below -

strange roboto font behavior

Here is an example code showing a bug:

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

There is no bag in chrome for tablet and smartphone.

How to remove the bug using these styles css ?

PS Explain, please, why such a bug actually has a place to be?

  • Cross-language links should be in both questions. - Qwertiy ♦

2 answers 2

Still found a solution:

 font-kerning: none;

Although another question is how acceptable it is ...

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

    Here are a few crutches (I did not find any normal ways):

    • Close the div at the beginning of the next line.
      The code looks terrible, but without consequences for the user.
    • Before closing </div> put a space
      In this case, the indent on the right changes and the user will see

    And problems with the first rt in my chrome is not observed.

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

    • Interesting, but only with the first rt I still have problems with this approach) - Oleksii Shnyra
    • one
      @Lepta, I have no problem with him at all, even in the original version. Chrome 50.0.2661.102 (Official build) m (64 bit), Windows 7. - Qwertiy ♦