2

I have the following examples to demo a font trying to stay in the middle of a div, using both normal text manipulation and flex display manipulation. Both seem to place the font in the middle, however, when your browser is not maximised and you try to change the width of the browser, both fonts wiggle within the div (you have to do this slowly to see the effect).

I made an animated GIF to show what I am talking about: enter image description here

As the font size is fixed and the width and height of the enclosing div are also fixed, changing the width of the browser should not affect the position of the font within the enclosing div.

How do you make the font absolutely stable in the middle (has to be a font, not an image, can be SVG though if that is necessary), hence not wiggling when browser width changes?

div {
  display: flex;
  justify-content: center;
  margin: 10px;
}

span.text {
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  background: green;
}

span.flex {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  background: green;
}
<div>
  <span class="text">+</span>
</div>
<div>
  <span class="flex">+</span>
</div>
user1589188
  • 5,316
  • 17
  • 67
  • 130
  • That's what responsive design is. HTML should automatically adapt/adjust according to the device. – DecPK Sep 03 '21 at 02:11
  • @HR01M8055 I don't understand. If you are referring to the position of the div, I know that. I am saying the position of the font within the div that is wiggling, but font size is fixed, div width is fixed, changing width of browser should not affect it. – user1589188 Sep 03 '21 at 02:13
  • You can't "fix" the wiggling of elements that are centered. That's the browser continually re-rendering the page during resize. You can even notice the controls in your browser window wiggling during resize, that's the OS doing the same thing. – skyline3000 Sep 03 '21 at 02:24
  • @skyline3000 I don't think you understand what I am talking about. See the updated question with an animated GIF. – user1589188 Sep 03 '21 at 02:32
  • try applying a transition to smooth it out. –  Sep 07 '21 at 08:45

2 Answers2

3

This is subpixel rendering issue of the font. By creating a transformation layer we can somehow fix this jitter. Try backface-visibility: hidden; for span elements

span.text {
 backface-visibility: hidden;
}
span.flex {
 backface-visibility: hidden;
}

Rationale

Lets assume a viewport of 1000px width. The center point is 500px. If the viewport width is 1001px, the center point is 500.5px

This decimal pixel value is called subpixel. Browsers render elements in subpixel values. But, it doesn't render fonts in subpixel.

So, the center point of the font char(+) is 500px in both 1000px & 1001px viewport cases. Whereas, for the center point of green box is 500px & 500.5px.

To fix this, we can create a layer for the green box. Consider layers as cached area that doesn't re-render unless necessary. By applying transform to an element you can paint it in a layer. Here, I used backface-visibility: hidden; which is a property related to transformation. You can also use transform property which yields similar result.

Now, when you resize the viewport the font inside green area doesn't re-render. So, you don't see jitters

You can read https://dassur.ma/things/forcing-layers/ this article for more clarity.

Moorthy G
  • 1,441
  • 8
  • 9
  • Hey, this seems to work! What magic is this? Could you include some explanation in your answer? – user1589188 Sep 09 '21 at 06:55
  • Sorry for a followup question, although the jitter is fixed, I found that the font can be off a tiny bit sometime and stayed like that if the green box starts off at a certain position. How do you make the font stay within the centre of the green box all the time no matter where the green box is? Why the font follow the centre of the viewport but not the centre of the green box while the green box width and height are fixed? – user1589188 Sep 21 '21 at 00:51
  • Keep the width value in odd number (ex: 31px). That should address this issue. Or else, use an image instead of font if possible – Moorthy G Sep 21 '21 at 08:46
-1

p{
    text-align: center;
}
<div>
  <span class="text"><p>+</p></span>
</div>
<div>
  <span class="flex"><p>+</p></span>
</div>

you can specify your text by putting it into "p" or different "h" tags and apply the given css globally

Salil Rajkarnikar
  • 588
  • 1
  • 7
  • 26