Is it possible to adapt a font size responsively to the width of its parent class

Question

This has been asked before but the solution didn't work for me somehow so I am looking for a valid one

I have an event announcement block on the website I'm building but the client wants the event date to fill the entire width of the container. It goes well for just one event date but off course if some other date pops up it gets on 2 rows which I expected but I dont know how to make this responsive. Any idea's?

@Andrew No that wouldn't work as I lets say, In the design it points out `font-size: 200px` for the date 17 FEB 2017. When I output something like 23 MAR 2017. It already is to big even on the same screensize. — Justin Dekkers, Oct 18 '16 at 08:11

Maarten ter Horst · Answer 1 · 2016-10-18T09:14:28.477

If you don't need text wrap in the scaled text, you can use SVG for it (IE9+, so totally acceptable):

<div class="element" style="width: 30%">
  <svg class="scale" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text x="50" y="50" text-anchor="middle">Test</text>
  </svg>
</div>
<div class="element" style="width: 60%">
  <svg class="scaled" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text x="50" y="50" text-anchor="middle">Test</text>
  </svg>
</div>

With this CSS:

.element {
  position: relative;
  display: inline-block;
  border: 1px solid red;
}

.scaled {
  width: 100%;
}

https://jsfiddle.net/93bLu80k/1/

You may encounter problems with vertical scaling of the SVG in some versions of Safari and Internet Explorer (I don't remember which versions exactly). I have this code in some of my projects with scaled SVGs for Safari:

svg {
  // hack to make safari use the correct height of svg
  // https://bugs.webkit.org/show_bug.cgi?id=82489
  max-height: 100%;
}

And this SASS mixin for Internet Explorer, for which you must know the aspect ratio of your SVG in advance, which is usually not a problem:

@mixin aspect-ratio($ratio) {
  .ie & {
    padding-bottom: 100% * $ratio - 0.02;
    height: 1px;
    overflow: visible;
    box-sizing: content-box;
  }
}

(You can translate this mixin to another preprocessor or simply use a hard coded $ratio in a normal CSS class.)

Can't use SVG's on this one as it is variable to what ever my clien't will place there — Justin Dekkers, Oct 19 '16 at 10:36

score 0 · Answer 2 · answered Oct 18 '16 at 08:33

I had similar issue when working on countdowns: http://demos.artbees.net/jupiter5/shortcodes/countdowns-milestones/

The approach I used is usage of element queries: http://elementqueries.com/

It solves the problem of width relativity scope. Our components are used by customers and they choose number of columns that it will occupy in the grid. In such unpredictable situations it is your best choice. Also if you want to encapsulate your component end make it more reusable.

Is it possible to adapt a font size responsively to the width of its parent class

2 Answers2