에 따르면 HTML 사양 , COLS는 지정을 한 줄에 문자의 예상 최대 수 때문이다.
사용 된 글꼴의 너비가 모든 문자에 대해 동일한 경우에 해당됩니다.
따르면 W3 스쿨 , COLS는 pecifies (평균 문자 폭) 텍스트 영역의 폭 때문이다.
내 생각 엔 그들은 텍스트 영역의 텍스트의 평균 문자 너비가 아니라 글꼴의 평균 문자 너비를 의미한다는 것입니다.
이제 내 질문은 사용자 에이전트 가 특정 글꼴 의 평균 문자 너비 를 어떻게 계산하는지,이 계산에 어떤 문자가 포함되는지, ...이 정보를 얻거나 직접 계산할 수있는 방법이 있습니까?
내가하고 싶은 일 : textContent 및 cols 속성을 제외한 다른 것을 사용하지 않고 텍스트 영역 내부 의 시각적 줄 수를 계산하십시오 .
내가 이미 시도한 것 :
const textSpan = document.getElementById("textSpan");
const textarea = document.getElementById("textarea");
textarea.addEventListener("input", (evt) => {
textSpan.innerText = evt.target.value;
console.log("Predicted number of lines: " + (textSpan.getBoundingClientRect().width / (textSpan.getBoundingClientRect().width / textSpan.innerText.length * 10))) // 10 = cols attribute of textarea element;
});<textarea id="textarea" cols="10" rows="10" style="word-break: break-all;"></textarea>
<span id="textSpan"></span>const textSpan = document.getElementById("textSpan");
const textSpanACW = document.getElementById("textSpanACW");
const textarea = document.getElementById("textarea");
textarea.addEventListener("input", (evt) => {
textSpan.innerText = evt.target.value;
console.log("Predicted number of lines: " + (textSpan.getBoundingClientRect().width / (textSpanACW.getBoundingClientRect().width / textSpanACW.innerText.length * 10))) // 10 = cols attribute of textarea element;
});<textarea id="textarea" cols="10" rows="10" style="word-break: break-all;"></textarea>
<span id="textSpanACW">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ,;?.:/=+ù%µ£^¨$*-_)àç!è§('"é&|@#¼½^{[{}</span>
<span id="textSpan"></span>이것을 알아 내면를 사용하지 않고 시각적 선의 수를 얻어야합니다 word-break: break-all;. 그래서 그것은 대답에 있으면 좋지만 필요하지는 않습니다.
HTML 사양 더 읽어보기 : textarea 요소의 textarea 유효 너비는 size × avg + sbw입니다. 여기서 size는 요소의 문자 너비이고, avg는 요소의 기본 글꼴의 평균 문자 너비 (CSS 픽셀, sbw)입니다. 스크롤 막대의 너비 (CSS 픽셀)입니다. (요소의 문자 간격 속성은 결과에 영향을주지 않습니다.) .
따라서 평균 문자 너비 (avg) 를 계산하는 공식 은 다음과 같습니다 (effectiveWidth - sbw) / size.
sbw 얻기 :
<style>
/* way the hell off screen */
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
</style>
<script>
const sbw = getScrollbarWidth();
function getScrollbarWidth() {
let scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
}
</script>
크기 얻기 :
에서 HTML 사양 : COLS는 지정을 한 줄에 문자의 예상 최대 수 때문이다. cols 속성이 지정된 경우 해당 값은 0보다 큰 유효한 음이 아닌 정수 여야합니다. 음이 아닌 정수를 분석하는 규칙을 속성 값에 적용하면 숫자가 0보다 큰 경우 요소의 문자 너비는 해당 값입니다. 그렇지 않으면 20입니다.
그래서:
let size = parseInt(textarea.getAttribute("cols"));
if (isNaN(size)) {
size = 20;
}
효과적인 폭 얻기 :
요소에 cols 속성이 있고 음이 아닌 정수를 구문 분석하는 규칙을 사용하여 해당 속성의 값을 구문 분석해도 오류가 발생하지 않는 경우 사용자 에이전트는 해당 속성을 요소의 width 속성에 대한 표현 힌트로 사용할 것으로 예상됩니다. , 값은 텍스트 영역 유효 너비입니다 (아래에 정의 됨). 그렇지 않으면 사용자 에이전트는 요소의 width 속성을 textarea 유효 너비로 설정하는 사용자 에이전트 수준의 스타일 시트 규칙이있는 것처럼 작동합니다.
그래서:
const effectiveWidth = parseFloat(getComputedStyle(textarea).getPropertyValue("width").slice(0, -2));
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다