CSS: Scale font-size to fit parent block element height

Question

Almost every question and answer I have found talks about the viewport size; this isn't really my issues.

Take this Pen... https://codepen.io/njt1982/pen/pZjZNM

I have a very basic Bootstrap 4 grid like this:

<div class="container mt-4">
  <div class="row">
    <div class="col border"><div class="tile"><span>A</span></div></div>
    <div class="col border"><div class="tile"><span>B</span></div></div>
    ...
    ...
  </div>
  <div class="row">
    <div class="col border"><div class="tile"><span>A</span></div></div>
    <div class="col border"><div class="tile"><span>B</span></div></div>
    ...
    ...
  </div>
  ...
  ...
</div>

And some CSS to make these into squares (using the padding-top: 100% trick):

.col {
  padding: 0;
}
.col:not(:last-child) {
  border-right: none !important;
}
.row:not(:last-child) .col {
  border-bottom: none !important;
}
.tile {
  padding: 100% 0 0;
  font-size: 5vw;
}
.tile span {
  position: absolute;
  left: 0;
  top: 50%;
  line-height: 0;
  width: 100%;
  text-align: center;
}

The problem here is that 5vw makes the font just the right size on my 2560px wide viewport, but by the time I have reached the lower breakpoint, it not longer fills the cells. I'd like to avoid tonnes of media queries to "tune" it.

Is there any CSS-only way of saying "font-size = container_height"?

font-size: 100% seems to just set the font to the base size (not the parent size, like you'd expect height: 100% to do). Some goes for the likes of em's...
I've tried vh and that works fine until the viewport height changes (so same problem as vw).
I read something about vb (about the parent block), but that doesn't seem to work? I believe it is still only theoretical.
I am aware of JS-options which could calculate the height of a parent and set it... But I feel like this is something CSS should be able to do and I'm missing a piece of a puzzle.
Could the answer lie in transforms?! or calc()?

UPDATE: Possible answer using SVGs? https://stackoverflow.com/a/51333267/224707

Well my original goal was a generic "font-size = parent height" solution, but I'm open to suggestions from the wicked and wise community! :) — Nick, Jul 13 '18 at 21:55
I would probably think differently: I set the font-size to a particular scalable value then I build the layout considering this value, it may easier in this way — Temani Afif, Jul 13 '18 at 21:58
That would certainly be easier, yes... but it's not as "responsive". — Nick, Jul 13 '18 at 23:43

score 2 · Answer 1 · answered Jul 13 '18 at 21:53

One possible solution I have found is using SVG's...

https://codepen.io/njt1982/pen/EpVeYw

Each column becomes this:

<div class="col border">
  <div class="tile">
    <svg viewBox="0 0 20 20">
      <text x="50%" y="14" text-anchor="middle">A</text>
    </svg>
  </div>
</div>

Then we drop all notion of font-size and do this:

.tile svg {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 0;
  width: 100%;
  height: 100%;
  fill: #333;
}

Seems to scale pretty well - I have not, however, browser tested it...

sphism · Answer 2 · 2018-07-16T01:51:05.407

Here you go:

https://codepen.io/sphism/pen/LBGmRm

Flexbox solution, scales with browser, works in both portrait and landscape, fonts scale, nice clean html, no svg's.

EDIT: added the size-* classes so you can easily change the grid size just by adding the class, eg .grid.size-4 would be a 4x4 grid.

html:

<div class="container">
  <div class="grid size-7">
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
  </div>
</div>

scss:

// 100 would have no space around it
// $gridSize: 90vw; // Works in portrait.
// $gridSize: 90vh; // Works in Landscape.
$gridSize: 90vMin; // Works in both.

.container {
  // Full size of page
  height: 100vh;
  width: 100vw;
  // Center the grid x and y
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  // Grid will center in container if you want a bit of space around it.
  height: $gridSize;
  width: $gridSize;

  // This is how we make the grid
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

// Styles for all tiles
.tile {
  display: block;
  border: 1px solid gray;
  text-align: center;
  box-sizing: border-box;
}

// Number of rows and columns.
// $size: 8;
@for $size from 1 through 8 {

  // eg 100/8 
  $tileSize: $gridSize / $size;
  // Half th esize of the tile, or whatever you want.
  $fontSize: $tileSize * 0.5;

  .size-#{$size} {
    .tile {
      // Constrain the tiles to exact size we want.
      width: $tileSize;
      min-width: $tileSize;
      max-width: $tileSize;
      height: $tileSize;
      min-height: $tileSize;
      max-height: $tileSize;
      flex-basis: $tileSize;

      // Set fonts to same line height as tile, center them and set font size.
      line-height: $tileSize;

      font-size: $fontSize;
    }


    // Just hide extra divs so it renders properly.
    $maxTiles: $size * $size + 1;
    .tile:nth-child(n + #{$maxTiles}) {
      display: none !important;
    }
  }
}

CSS: Scale font-size to fit parent block element height

2 Answers2

Linked

Related