fit text inside an element with fixed width - html

Question

I have a list of buttons that uses roman numerals as label, something like this:
{list.map((item, index) => {
return (
<li key={`${item.id}`}>
<button
onClick={() => handleChange(index)}
>
{transformNumberToRomanNumeral(index + 1)}
</button>
</li>
)
})}
because of that, the numerals will have different sizes, like this: "I", "II", "III".
I need to make all the buttons the same size, both width and height, button if I set the width to a fixed value, some text will still overflow the button width. Is there a way to make the text scale to fit the max width, but never overflow it?
I tried using using svg with text tag, but the scale looks really bad, it usually don't get all the height so the text end ups really small.

Answer 1

In the example below, the buttons have a consistent width of 50px.
Where n is the number of characters in the roman numeral, both the:
font-size
line-height
are: (14 - n)
except where (14 - n) < 6, in which case that value remains 6.
Working Example:
let buttons = document.querySelectorAll('button');
for (let button of buttons) {
const numeralCount = button.textContent.length;
let textSize = (14 - numeralCount);
textSize = (textSize < 6) ? 6 : textSize;
button.style.setProperty('--text-size', textSize + 'px');
}
:root {
--text-size: 6px;
}
button {
display: block;
width: 50px;
height: 18px;
margin: 6px 0 0;
padding: 0 2px;
line-height: var(--text-size);
font-size: var(--text-size);
overflow-x: hidden;
}
<ol>
<li><button>M</button></li>
<li><button>MD</button></li>
<li><button>MDC</button></li>
<li><button>MDCC</button></li>
<li><button>MDCCC</button></li>
<li><button>MDCCCL</button></li>
<li><button>MDCCCLX</button></li>
<li><button>MDCCCLXX</button></li>
<li><button>MDCCCLXXX</button></li>
<li><button>MDCCCLXXXV</button></li>
<li><button>MDCCCLXXXVI</button></li>
<li><button>MDCCCLXXXVII</button></li>
<li><button>MDCCCLXXXVIII</button></li>
</ol>

Answer 2

I managed to do something that seems to look like what you want. Here is the Stackblitz and here is the code :
import React from 'react';
import { render } from 'react-dom';
import './style.css';
const App = () => {
return (
<div className="container">
<button>
<SvgRenderer text="VII" />
</button>
<button>
<SvgRenderer text="LXXIII" />
</button>
<button>
<SvgRenderer text="LXIII" />
</button>
<button>
<SvgRenderer text="LXXIII" />
</button>
<button>
<SvgRenderer text="LXXXIII" />
</button>
</div>
);
};
const SvgRenderer = ({ text }) => (
<svg
width="100%"
height="100%"
viewBox="0 0 100 50"
preserveAspectRatio="xMinYMid meet"
// style={{ backgroundColor: 'green' }}
>
<text
x="0"
y="45"
fill="black"
lengthAdjust="spacingAndGlyphs"
textLength="100"
>
{text}
</text>
</svg>
);
render(<App />, document.getElementById('root'));
I based this on this post. Since I couldn't manage to make the checked answer to work properly, I used one of the answer bellow, but note that I'm absolutely not a pro svg so there might be a way better answer than mine using SVG (or other answers).
[previous answer] You coud do this by using flexbox. This way you don't need to set with and height. Here is the Stackblitz and here is the code :
import React from 'react';
import { render } from 'react-dom';
import './style.css';
const App = () => {
return (
<div className="container">
<button>some text</button>
<button>Some more text</button>
<button>Some more text longer</button>
<button>Some more text longer again and again</button>
<button>Some more text longer again and again, and again ?</button>
</div>
);
};
render(<App />, document.getElementById('root'));
And some css :
.container {
display: flex;
flex-wrap: wrap
}
.container > button {
flex: 1
}
I used long string in the buttons for the use case, but with roman numerals it should be ok I guess.

Answer 3

You can iterate through the buttons, using a dummy button to notice when the text just fits within the button width.
This snippet starts with a largeish font size assuming the button width is 50px and gradually brings the font size down until the text fits.
<style>
.container {
widht: 100vw;
display: flex;
}
button {
width: 50px;
height: 50px;
padding: 0px;
text-align: center;
clear: both;
}
</style>
<body>
<div class="container">
<button>I</button>
<button>II</button>
<button>III</button>
<button>VIII</button>
<button>MMCXXII</button>
</div>
</body>
<script>
const buttonW = 50;
const buttons = document.querySelectorAll('button');
const dummy = document.createElement('button');
let w, fs ;
document.body.appendChild(dummy);
dummy.style.padding = 0;
buttons.forEach( button => {
fs = 40;
dummy.style.width = 'auto';
dummy.style.fontSize = fs + 'px';
dummy.innerHTML = button.innerHTML;
w = window.getComputedStyle(dummy).width.replace('px', '');
while (w > buttonW) {
w = window.getComputedStyle(dummy).width.replace('px', '');
fs--;
dummy.style.fontSize = fs + 'px';
}
button.style.fontSize = fs + 'px';
});
dummy.remove();
</script>