Clever Geek Handbook

Strange line break by special character

Problem

I recently discovered a coding issue in my backend for calculating user initials when the first letter is a Germanic letter (like Ö

and Ä

). These letters could not be analyzed and ended up as a question mark.

But what I also discovered is a rather peculiar behavior (and the reason I advise) in my markup, which just doesn't make any sense to me.

I followed the simplified example below:

ul {
  padding: 0;
  display: flex;
}

li {
  list-style-type: none;
  font-family: 'Roboto', sans-serif;
  flex-direction: column;
  margin: 15px;
  width: 260px;
  min-height: 200px;
  padding: 30px 15px;
  text-align: center;
  background: white;
  border: 1px solid #E8E8E8;
}

.avatar {
  height: 35px;
  width: 35px;
  border: 2px solid #333;
  line-height: 35px;
  padding: 1px 2px;
  align-self: auto;
  margin: 10px auto 0;
  position: relative;
}

.avatar span {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
      

        
        
        
      

    
<ul>
  <li>
    <div class="avatar">
      <span>?N</span>
    </div>
    <h4>Örjan Norberg</h4>
    <span>orjan@example.com</span>
  </li>
  <li>
    <div class="avatar">
      <span>II</span>
    </div>
    <h4>Isaac Ibarra</h4>
    <span>isaac@example.com</span>
  </li>
  <li>
    <div class="avatar">
      <span>WW</span>
    </div>
    <h4>Wyatt Williams</h4>
    <span>wyatt@example.com</span>
  </li>
</ul>
Run code


You will see that the initials are "Örjans" ?N

, but also that the "N" is shifted to the next line. It doesn't look like the width of the avatar because I tried with long and short initials.

In fact, even if I put WWWWW

or something else ( pic ) that overflows the avatar, there is no line break which is as expected. I've also tried other special characters like &

and %

, but they behave like any other character or letter.

Question

What causes this behavior when using a question mark? Is it something to do with the font ( Roboto ), or is it my css?

Also, (see the figure below), how does this happen when the question mark is followed by a letter, but not when the order is reversed (letter first) or another question mark follows?

enter image description here

What's going on here?

EDIT 1: Using OSX / Chrome.v59, although can replicate on Windows7 / IE11

EDIT 2: Apparently the symbol is —

also causing this behavior (thanks to @MrLister for finding this)

+3


source to share


2 answers


What you see is that the client's bounding rectangle for the combination is ?N

too wide to fit without overflow, and so the browser does whatever it should do when it sees an overflow based on the default rules and CSS overrides. One reason is that the conversion translate

and scale

do not change the elements, they just draw them somewhere else, so your conversion does not oppose your absolute positioning. Have a look at http://jsbin.com/gujafokiwe/edit?html,css,output and note that since the DOM is concerned that the range is still in its original position, we only have said CSS to draw it somewhere in the other place.

When a browser sees ?N

(and in particular: some browsers. Not all of them), it can see that it needs to split the line based on the dimensions of the limiting client. However, browsers can choose their own rules for when and how to break text sequences (CSS does not specify which rules should be used, only this is recommended for unicode content outside of CJK http://www.unicode.org/reports/tr14 /tr14-37.html ) and while your example works fine in my Firefox without breaking the text at all, my Chrome does see the overflow and tries to break the sequence (s) as much as possible.



Unfortunately, the only correct answer as to why it does this is in the code for the text-rendering engine - either in Blink or Webkit, both of which are (mostly) open source, and so if you don't get eyes of the person or people who have implemented it on the matter, you will have to search for them rather than hope they browser Stackoverflow and find your question: best to read http://www.chromium.org/blink#participating and then post this question to your dev mailing list.

(The solutions to your problem are different: remove the rule .avatar span

and just the text-align: center

parent div, or even better: use flexbox rules)

+1


source


What? in the first flight - the opportunity to break the word; after all, N is the beginning of a word. This does not happen in other ranges as they only contain one word. So what you need to do is apply white-space: nowrap

to the range so it doesn't wrap around anymore.

Edit: While this isn't an explanation of what's actually happening - it doesn't happen with most other non-word characters, so the "word boundary" isn't the whole story; see comments - it still provides a practical workaround, so I'm leaving that.



ul {
  padding: 0;
  display: flex;
}

li {
  list-style-type: none;
  font-family: 'Roboto', sans-serif;
  flex-direction: column;
  margin: 15px;
  width: 260px;
  min-height: 200px;
  padding: 30px 15px;
  text-align: center;
  background: white;
  border: 1px solid #E8E8E8;
}

.avatar {
  height: 35px;
  width: 35px;
  border: 2px solid #333;
  line-height: 35px;
  padding: 1px 2px;
  align-self: auto;
  margin: 10px auto 0;
  position: relative;
}

.avatar span {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  white-space:nowrap;
}
      

        
        
        
      

    
<ul>
  <li>
    <div class="avatar">
      <span>?N</span>
    </div>
    <h4>Örjan Norberg</h4>
    <span>orjan@example.com</span>
  </li>
  <li>
    <div class="avatar">
      <span>II</span>
    </div>
    <h4>Isaac Ibarra</h4>
    <span>isaac@example.com</span>
  </li>
  <li>
    <div class="avatar">
      <span>WW</span>
    </div>
    <h4>Wyatt Williams</h4>
    <span>wyatt@example.com</span>
  </li>
</ul>
Run code


0


source






More articles:


All Articles