Currently, I am working on adding a font resizer feature to my editing tool. To implement this, I made some changes to the text elements where their origin is now set to the bottom left corner. The normal version of the tool works perfectly fine, but when trying to integrate it with a zoom feature that uses transform:scale(...), some issues arise:
In the normal version, you can see that the text always stays aligned with the line regardless of the font size:
$(document).on('change', '#fontsize', function() {
var element = $(".element");
var fontsize = $(this).val();
var current_top = element.position().top;
var height = element[0].getBoundingClientRect().height;
var bottom = current_top + height;
console.log('font-size=' + fontsize + ' top=' + current_top + ' height=' + height);
element.css({
"font-size": fontsize + 'px',
}).css({
top: (current_top - ((current_top + element[0].getBoundingClientRect().height) - bottom)) + 'px'
})
});.absolute {
position: absolute;
left: 0px;
width: 100%;
border-bottom: 1px solid green;
}
.elements {
background: #eaeaea;
border: 1px solid red;
position: relative;
width: 300px;
height: 140px;
}
.element {
position: absolute;
text-align: left;
transform: rotate(0deg);
left: 70px;
top: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fontsize" type="text" placeholder="Type : '21', '23' or '28'">
<span>Press enter !</span>
<div class="elements">
<span class="absolute" style="top: 65px; z-index:999;"></span>
<div class="element" style="">Lindow</div>
</div>However, in the version using transform:scale(...), the behavior of element.position().top seems off as the text does not align with the line and shifts unpredictably with each change in input:
$(document).on('change', '#fontsize', function() {
var element = $(".element");
var fontsize = $(this).val();
var current_top = element.position().top;
var height = element[0].getBoundingClientRect().height;
var bottom = current_top + height;
console.log('font-size=' + fontsize + ' top=' + current_top + ' height=' + height);
element.css({
"font-size": fontsize + 'px',
}).css({
top: (current_top - ((current_top + element[0].getBoundingClientRect().height) - bottom)) + 'px'
})
});.elements {
transform:scale(1.5);
transform-origin:top left;
}
.absolute {
position: absolute;
left: 0px;
width: 100%;
border-bottom: 1px solid green;
}
.elements {
background: #eaeaea;
border: 1px solid red;
position: relative;
width: 300px;
height: 140px;
}
.element {
position: absolute;
text-align: left;
transform: rotate(0deg);
left: 70px;
top: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<input id="fontsize" type="text" placeholder="Type : '21', '23' or '28'">
<span>Press enter !</span>
<div class="elements">
<span class="absolute" style="top: 65px; z-index:999;"></span>
<div class="element" style="">Lindow</div>
</div>I'm currently looking for a solution to fix this issue. Any insights on what might be causing this problem and how to address it would be greatly appreciated.