Why are my pipes fuzzy?

Question

I am creating a sitemap, and for some reason on all browsers the different separation pipes have different fuzziness.

Chrome:

enter image description here

.header a {
  color: black;
  text-decoration: none;
}
.header li {
  display: inline-block;
}
.header li:after {
  content: "|";
  margin: 5px;
}

<div class="header">
  <ul>
    <li><a href="http://test.com">Mainpage</a></li>
    <li><a href="http://example.com">Handbook</a></li>
    <li><a href="http://amazon.com">About</a></li>
    <li><a href="http://place.com">Donate</a></li>
    <li><a href="http://obama.com">Forum</a></li>
  </ul>
</div>

Can somebody please help me fix this? It makes so sense.

Do you want something like this http://jsfiddle.net/juz1o2cf/3/ — G.L.P, Feb 24 '15 at 09:51
Font antialiasing (technically, sub-pixel rendering). Incidentally, Windows uses a different algorithm for that so the pipes should appear sharp on Windows. Some browsers support [disabling font smoothing](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth) but not all do, and it’s nonstandard. — Konrad Rudolph, Feb 24 '15 at 09:53
Then why are some aliased and some not? Why isn't it all or none? — pshahab48, Feb 24 '15 at 09:57
@pshahab48 All of them are, it just so happens that some of the characters happen to fall bang onto the pixel, while others fall between the pixels and need to be smoothed. — Konrad Rudolph, Feb 24 '15 at 09:58
This is simple anti-aliasing as mentioned by Konrad, it makes perfect sense. Hope @KonradRudolph writes an answer for you to accept. — dayuloli, Feb 24 '15 at 10:01

score 1 · Accepted Answer · answered Feb 24 '15 at 09:57

Chrome and Firefox use different techniques for rendering fonts. That's why they look different (more or less smooth and fuzzy) in each browser. It is then also different on the several operating systems.

If you need it to look consistent every time, you should probably use an image or the CSS border attribute and similar. Another option is CSS text-rendering.

score 1 · Answer 2 · edited May 23 '17 at 12:28

Semantically speaking the pipe | is not the way to go, because it has a different meaning than what you're trying to accomplish (in Unix terms: pipe'ing two commands together, but also has functions in Mathematical terms etc).

You're (mis)using it as a divider, which is a visual (style) element. chrki's solution to use a border would be best:

.header a {
  color: black;
  text-decoration: none;
}
.header li {
  display: inline-block;
  border-left: 1px solid black;
  margin-left: 5px;
  padding-left: 5px;
}
.header li:first-child {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

<div class="header">
  <ul>
    <li><a href="http://test.com">Mainpage</a></li>
    <li><a href="http://example.com">Handbook</a></li>
    <li><a href="http://amazon.com">About</a></li>
    <li><a href="http://place.com">Donate</a></li>
    <li><a href="http://obama.com">Forum</a></li>
  </ul>
</div>

ps: and I've thrown in a "first-child" to only let the divider appear between elements

ps2: the "Space between inline-block"-problem appears in this solution, an answer to that can be found here: A Space between Inline-Block List Items

Why are my pipes fuzzy?

2 Answers2