JS로 커닝 엔진을 만들어 보는 1회째
목적
「HTML의 커닝은 어쩔 수 없다」라고 하는 것이 일반적이라고 생각합니다만, 평소부터 그래픽 디자이너진으로부터의 불만의 목소리도 있어, 사내에서 이용하는 것을 준비하게 되었습니다.
목표
이 기사만으로는 완결되지 않기 때문에, 우선은 어느 정도의 것을 실현할 수 있는지 알아 갑니다.
구현 방법
간단하게 생각하는 방법은, 텍스트를 모두 span 태그로 코딩해 letter-spacing와 margin로 조정해 가는 방법일까 생각합니다. 이번에도 이것으로 할 것입니다.
커닝 테이블에 커닝 값을 갖고, 전후의 문자를 판정한다. 이 테이블은 글꼴마다 필요합니다. 이번 폰트는 히라기노에서 실험합니다.
주의
퍼포먼스 튜닝은 잠시 하지 않습니다. 실현도를 찾는 방향으로 진행합니다.
코드도 쓰는데... 죄송합니다.
텍스트를 span으로 둘러싸기
실제로 사용하는 경우 HTML에서 텍스트를 빼내고 span이 들어간 것으로 대체하는 작업이 발생하지만, 일단은 이미 텍스트를 뽑았다는 전제에서 부끄러워합니다.
문자 채우는 샘플 텍스트 (qiita 톱에서 적당하게 취했습니다)
var str = "「プログラミングち知識」を共有しよう。SPA開発（OnsenUI）でちょっとだけ可読性を意識する!";
태그로 둘러싸는 처리
function wrapSpan(str){
var array = str.split('');
var output = "";
for(var i = 0; i < array.length; ++i){
var c = array[i];
output += '<span>' + c + "</span>";
}
return output;
}
문자 커닝 테이블 만들기
적당히 커닝할 대상에 값을 설정합니다. 샘플이므로 적당히 픽업했습니다.
var kerningTable = {
'「' : '0.5em',
'プ' : 0,
'ロ' : 0,
'グ' : 0,
'ラ' : 0,
'ミ' : 0,
'知' : 0,
'識' : 0,
'」' : '-0.5em',
'を' : 0,
'共' : 0,
'有' : 0,
'し' : 0,
'よ' : 0,
'う' : 0,
'S' : 0,
'P' : 0,
'A' : 0,
'開' : 0,
'発' : '-0.1em',
'（' : 0,
'O' : 0,
's' : 0,
'e' : 0,
'n' : 0,
'U' : 0,
'I' : 0,
'）' : '-0.5em',
'で': 0,
'ち' : '-0.1em',
'ょ' : 0,
'っ' : 0,
'と' : 0,
'だ' : 0,
'け' : 0,
'可' : 0,
'読' : 0,
'性' : 0,
'意' : 0,
'る' : 0,
'!' : 0
};
줄머리 커닝
우선, 줄 머리 """에 대한 처리를 추가합니다.
for(var i = 0; i < array.length; ++i){
var c = array[i];
var value = kerningTable[c];
var style = "letter-spacing: " + value + '; ';
if( i == 0 && c == '「' ){
style += 'margin: -0.5em'
}
output += '<span style="'+ style +'">' + c + "</span>";
}
여기까지 일단 HTML을 출력해 보겠습니다.
var html = wrapSpan(str);
document.write('<h1>'+html+'</h1>');
브라우저에서 확인하면
커닝 전
커닝 후
충분히 사용할 수 있을 것 같네요. 이번 구현에서는 특정 문자의 뒤를 채우는 것만이었습니다.
어떤 문자라도 같은 막힘 방법을 합니다. 그 근처의 구현을 다음에 생각하고 싶습니다.
Reference
이 문제에 관하여(JS로 커닝 엔진을 만들어 보는 1회째), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mizno/items/c6673159a351b3ab403b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
