karappo / jquery.kerning.js Goto Github PK

症状

これは、カーニングした要素の親要素にtext-indentが指定してある時に、その影響をうけてしまうことにより発生する。

<ul>
  <li>科学技術：情報通信技術、機械工学（ロボティクス、安全、移動など）、人間工学（生理学、心理学、脳科学など）、医療技術（ヘルスケア、生活支援など）</li>
  <li>人間視点：仕事と家庭生活の両立、子育てや介護、男女共同参画</li>
</ul>

ul{
  li{
    text-indent: -0.75em;
  }
}

$(function(){
  $('li').kerning();
});

解決策

なので、カーニングした時に下のような要素をheadに追加してあげると良いかも知れない。

<style>
span[data-kerned]{
  text-indent: 0;
}
</style>

参考：jQuery.getJSON()ではまった

dataを渡した際にも、役物などのデフォルト値を継承するようにする？

既にカーニングされた要素に対して再度カーニングをかけられるようにする。
カーニング用のspanにdata-kerned属性を持たせて、カーニング処理前に除去するようにする？

こんな感じの記法でいけるようにする。

$('p').kerning("kerning-data.json");

一旦取得したカーニングデータが使いまわせるように、従来通りの記法は維持する。

https://cdnjs.com/

request form

カーニングデータ共有用のリポジトリみたいなのがあっても良いかも。使いたいフォントのカーニングデータを、誰かが作ってくれていたらそれを参照出来る。作った人が簡単に登録できる仕組みづくり。

e.g.

<p data-kerning>
こんなかんじで、特にjavascriptを書かなくても、HTML側の設定だけでカーニングしてくれると嬉しい。
</p>

<p data-kerning="{data:'kening-data.json'}">
こんな感じでconfigも書けると、もっと良い！？
</p>