Remove whitespace around scaled down text - transform: scale(xx);

Question

I'm trying to remove the whitespace around some text that I've scaled down from 100% to 0.25% using transform: scale(0.25);. I've come across this answer - White space around css3 scale - but it implies that I need a container with px values which I'm trying to avoid as the text can span multiple lines. Does anyone know of any other solutions out there?

JSfiddle - https://jsfiddle.net/pw9j9wb4/

<h1 class="scaled">This is a heading that can span many many many many many many many many many many many many many many many many many many many many lines</h1>
<h1>This is a heading that can span many many many many many many many many many many many many many many many many many many many many lines</h1>

.scaled {
  transform: scale(0.25);
  transform-origin: top left;
}

That is unfortunately how `scale()` works and it's a hassle to try and remove the whitespace, why not play with the `font-size` instead? — M0nst3R, Nov 08 '17 at 15:38
Yeah font-size is what I tried originally but it doesn't respect the aspect ratio and words start jumping on to the first line etc. which makes it look a little weird. Scale worked so well until I found the whitespace was retained too. — finners, Nov 08 '17 at 15:46
So you want to keep the line breaks in your `h1` even though there is more space to fit words in the small version? — M0nst3R, Nov 08 '17 at 15:48
Yes, the desired effect is to retain the line breaks. The small version should be a direct copy of the large text only at 25%. — finners, Nov 08 '17 at 15:50
I see, and what is the purpose of doing that? Are you trying to create a minified version of your page? — M0nst3R, Nov 08 '17 at 15:51
So what I'm trying to do is to have a title for an article (h1) that is displayed at normal size but when you scroll that article title then minimises to 25% of its original self when it hits a waypoint. I have everything working apart from the white space removal. — finners, Nov 08 '17 at 15:55

score 0 · Answer 1 · answered Nov 08 '17 at 16:26

Instead of tring to remove the whitespace using scale, I'd suggest manually resizing both the text and the node:

const titleNode = document.getElementById('myTitle');
const scaleValue = 0.25;

// function to split a size value into an array
function split(value) {
    const num = parseFloat(value);
    return [num, value.replace(num, '')];
}

// function that scales the header by a value
function scale(scale) {
    const style = window.getComputedStyle(titleNode, null);

    const fontParts = split(style.getPropertyValue('font-size'));
    titleNode.style.fontSize = `${fontParts[0] * scale}${fontParts[1]}`;

    const widthParts = split(style.getPropertyValue('width'));
    titleNode.style.width = `${widthParts[0] * scale}${widthParts[1]}`;
}

setTimeout(scale, 1000, scaleValue);

<h1 id="myTitle">
    This is a heading that can span many many many many many many many many
    many many many many many many many many many many many many lines
</h1>

I hope this helps.

Remove whitespace around scaled down text - transform: scale(xx);

1 Answers1