Is there a way to determine the width of each character in a text area, either through setting or retrieval?
<Field
style={{
width: "60ch",
height: "300px",
fontFamily: '"Lucida Console", Monaco, monospace',
fontSize: "14px",
}}
as='textarea'
id='text'
name='text'
type='text'
label='Text'
/>
I attempted to create a span with matching font properties to calculate the number of characters per row. However, the calculations did not yield accurate results, even for the default width (which was set to 60ch for 60 characters per line).
<span
style={{
position: "absolute",
top: "-100px",
fontFamily: '"Lucida Console", Monaco, monospace',
fontSize: "14px",
}}
id='span'
>
b
</span>
After performing the calculations below, the expected character count per line was inaccurate, as it was determined to be approximately 63.125 characters per line.
document.addEventListener("mouseup", function () {
let textarea: any = document.querySelector("#text");
let width = getComputedStyle(textarea).width;
let height = getComputedStyle(textarea).height;
console.log(width, height);
let span: any = document.querySelector("#span");
let spanWidth = getComputedStyle(span).width;
console.log('SPAN WIDTH',spanWidth)
console.log('PER LINE', (parseInt(width.slice(0,-2))/parseInt(spanWidth.slice(0,-2))))