모노 스페이스 (monospace) 폰트 문자열 폭

Question

필자는 같은 모노 스페이스 폰트로리스트 엘리먼트에 공급되는 input 엘리먼트를 가지고있다. char_width_test은 동일한 모노 스페이스 글꼴을 갖는 1 문자를 포함하는 span 요소의 ID입니다. 이 너비를 확인하고 입력 필드에 주어진 문자열의 길이를 곱하여 해당 문자열에서 생성 된 목록 항목의 너비를 계산합니다.

var ul = document.getElementById('posts_list'); 
var li = document.createElement('li'); 
var txt = document.createTextNode(str); 
ul.appendChild(li); 
li.innerHTML = str; 

li.style.width = (($("#char_width_test").width() * str.length)) + 'px'; 

위의 코드는 문자열이 길수록 공백이 많은 너비를 생성합니다. 내가 누락 된 너비에 영향을 미치는 변수가있는 것 같습니다.

Answer 1

문자 사이에 커닝이 있으므로 한 글자의 너비가 원하는대로 커지지 않습니다. 당신이 한 글자의 폭과 자간의 양을 결정하면

http://en.wikipedia.org/wiki/Kerning

, 좀 더 정확 n * char_width + (n - 1) * kerning_width이 필요합니다.

스팬에 여백이나 여백이없는 경우 kerning = width_of_two_characters - (width_of_one_character * 2)과 같은 문자를 사용할 수 있습니다. 그것이 어떻게 작동하는지보십시오.