As I develop a typography app, I have encountered a hurdle. The core code has been extracted into a pen, where there are various inputs and buttons in the user interface. This is why I am utilizing querySelectorAll('input[type="number"]') to target specific elements.
The objective is for the draggable element to dynamically update the text measure (line length) and BIND it to the number input by modifying the CSS property:
--_typecsset-text-measure
Although I have implemented a resize observer that logs the draggable element to the console, I am currently feeling overwhelmed!
I have created a Pen: https://codepen.io/timpish/full/abMdBay
// font, leading, measure (line length) input resizers
const numberInputs = document.querySelectorAll('input[type="number"]');
function updateProp(event) {
const uom = this.dataset.uom || '';
document.documentElement.style.setProperty(`--_${this.name}`, this.value + uom);
}
numberInputs.forEach((input, index) => {
input.addEventListener('input', updateProp);
});
// measure drag (.resizable) an update #measure
let observeMeasure = new ResizeObserver(function (mutations) {
const sizeInRem = mutations[0].contentRect.width / parseInt(getComputedStyle(document.documentElement).fontSize); document.documentElement.style.setProperty('--_typecsset-text-measure', sizeInRem + 'rem');
const input = document.getElementById('measure');
input.value = sizeInRem.toFixed(1);
});
let drag = document.querySelector(".resizable");
observeMeasure.observe(drag);/* globals */
*,
*::before,
*::after {
...
/*debugger */
* {
outline: cornflowerblue dotted 0.5px;
}<body class="center">
...
</body>
</html>