JavaScript에서 텍스트의 실제 렌더링 너비(픽셀 단위)를 계산하려면 Canvas.measureText() 메서드를 사용하면 됩니다. 이 메서드는 지정한 폰트 스타일을 기준으로 텍스트가 화면에 그려질 때 차지하는 너비를 측정해 줍니다.
아래 예제는 캔버스 요소를 생성하고, 폰트를 설정한 뒤 measureText()로 텍스트 너비를 구해 화면에 출력하는 코드입니다.
예제
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function displayTextWidth(text, font) {
var myCanvas = displayTextWidth.canvas || (displayTextWidth.canvas = document.createElement("canvas"));
var context = myCanvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
};
document.write("Text Width: "+displayTextWidth("This is demo text!", "italic 18pt verdana")); //
</script>
</body>
</html>코드 설명
displayTextWidth(text, font) 함수는 다음과 같이 동작합니다.
- 함수가 처음 호출될 때 캔버스 요소를 한 번만 생성하여 재사용함으로써 불필요한 DOM 생성을 방지합니다.
- getContext("2d")로 2D 드로잉 컨텍스트를 가져온 후, context.font 속성에 측정할 폰트 스타일을 지정합니다.
- measureText(text)를 호출하면 TextMetrics 객체가 반환되며, 이 객체의 width 속성이 곧 텍스트의 픽셀 너비입니다.
위 코드를 실행하면 "This is demo text!"라는 문자열이 italic 18pt Verdana 폰트로 렌더링될 때의 너비가 화면에 출력됩니다. 이 기법은 말줄임표 처리, 동적 레이아웃 조정, 입력값 길이 검증 등 텍스트 크기에 따라 UI를 조정해야 할 때 유용하게 활용할 수 있습니다.