Search code examples
javascripthtmlcsscentering

How to center character and have there always be padding around it no matter screen size

I have these screens:

Full desktop screen.

enter image description here

Small desktop screen.

enter image description here

Mobile screen.

enter image description here

The HTML is this:

html, body {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body > section, body > header {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

header {
  display: flex;
  flex-direction: column;
}

header > section {
  display: flex;
  flex-direction: row;
  flex: 1;
}

header > section > figure {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 300px;
}

header > h1 {
  padding: 10px 20px;
  font-size: 20px;
  background: black;
  color: white;
}

header > section > aside {
  width: 300px;
  display: flex;
  background: red;
}

@media (orientation: portrait) {
  header > h1 {
    order: 1;
  }

  header > section {
    order: 2;
  }

  header > section {
    flex-direction: column;
  }

  header > section > aside {
    width: auto;
    height: 100px;
  }
}
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <header>
      <section>
        <figure>ð</figure>
        <aside></aside>
      </section>
      <h1>The letter ð</h1>
    </header>
  </body>
</html>

I would like for the letter in the left to fit the following constraints:

  1. Always be centered in its container. (This part is working).
  2. Always have some padding around it. I would like for the padding to be at least 20px, but otherwise to be some percentage like 20%.
  3. To accomplish the padding problem, the size of the font needs to scale down/up as the screen is resized.

Wondering how I can accomplish this.

Notice how in the "Small Desktop Screen" section the letter is clipped, and there is no padding around it. I would like in that case for the letter to be smaller so that there is at least 20px padding around it. In the "Full Desktop Screen" section, I would like for the letter to be a little bit bigger so the padding is about 20% around it.

If at all possible, I would like for there not to be any hardcoded explicit sizes (widths/heights/paddings/etc.) that are based on the width of the letter in this picture, because I might use different fonts, so it should handle any font ideally. If not possible, then however to get this one example to work is fine.

If it's not possible with CSS, then that would be good to know, then in that case a JavaScript solution sounds good. But CSS only is preferable if possible :)

Solution

  • Here is my solution, I used vh (viewport height) as unit for the font size. This will scale your font size according to the height of the screen

    header>section>figure {
  ...
  ...
  font-size: 75vh; /* Can be changed as per your design */
}

    If you want you can also experiment using vw(viewport width) unit for font size

    html,
body {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body>section,
body>header {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

header {
  display: flex;
  flex-direction: column;
}

header>section {
  display: flex;
  flex-direction: row;
  flex: 1;
}

header>section>figure {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 75vh; /* Can be changed as per your design */
}

header>h1 {
  padding: 10px 20px;
  font-size: 20px;
  background: black;
  color: white;
}

header>section>aside {
  width: 300px;
  display: flex;
  background: red;
}

@media (orientation: portrait) {
  header>h1 {
    order: 1;
  }
  header>section {
    order: 2;
  }
  header>section {
    flex-direction: column;
  }
  header>section>aside {
    width: auto;
    height: 100px;
  }
}
    <header>
  <section>
    <figure>ð</figure>
    <aside></aside>
  </section>
  <h1>The letter ð</h1>
</header>