Giter VIP home page Giter VIP logo

jquery.kerning.js's Introduction

Kerning

The jQuery kerning plugin specific with Japanese webfont.

Getting Started

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="jquery.kerning.min.js"></script>
<script>
jQuery(function($) {
  $.getJSON("kerning-data.json" , function(_data) {
    $('h1').kerning({"data":_data});
  });
});
</script>
<h1>美しい文字</h1>

Examples / Documentation

http://karappo.github.io/jquery.kerning.js/

Code Status

Build Status

Release History

  • v0.3.1 : Fix collapse style issue
  • v0.3.0 : Support direct json file specification, initializing with [data-kening]
  • v0.2.2 : A few update for bower
  • v0.2.1 : Regist to bower
  • v0.2.0 : destroy feature, repeat kerning, data extending
  • v0.1.1 : Change data format simpler.
  • v0.1.0 : First release.

jquery.kerning.js's People

Contributors

naokazuterada avatar

Stargazers

Dmytro Soldatenko avatar  avatar Hiroyoshi Takahashi avatar suetake avatar Chihiro Noguchi avatar Hiroaki WAKATSUKI avatar yama-dev avatar Akihiro Kato avatar Yuta Kiyama avatar takumirie avatar 德巍 avatar Akihiko Nagano avatar aoki avatar Nao Iizuka avatar Takuya Abe avatar Marie Matsumura avatar Takafumi Omuro avatar S.Nishio avatar nanonum avatar Oz avatar Yuhei Yasuda avatar Yoshiaki Kajiyashiki avatar Yoshio Kakehashi avatar people-of-the-s avatar  avatar Kenta Murakami avatar  avatar koh-taka avatar sugiyama tamiki avatar  avatar Taro Hanamura avatar Michael Anthony avatar 40ce avatar Tomohiro Terashima avatar Shuji Koike avatar  avatar Mitsuru Nishiyama avatar Koki Yasuda avatar  avatar kzkiq2nd avatar Mamoru Christopher Tsujimoto avatar Kairi avatar Haruo Nakayama avatar makoto avatar Odyssey avatar Satoh_D avatar ken_c_lo / TAEKO AKATSUKA avatar Taichiro Takasaki avatar Takehiko Ono avatar Masateru YOSHIMURA avatar Kotaro Kokubo avatar tomyosh avatar Satoshi Ohmori avatar Yoshiyuki HINO avatar Asuka Zenfuku avatar Yang avatar Yuki MIZUNO avatar アシカガコウジ avatar  avatar YAMAGUCHI EIKICHI avatar Keiichiro Matsumoto avatar Hiroki Sato avatar Ayato avatar K@zuki. avatar Fumiki avatar hatch2 avatar Misaki hirose avatar Noriyuki Shimizu avatar Takahiro Ishiyama avatar  avatar K. Syo avatar Tomoyuki Sugita avatar shikakun avatar Takashi Saito avatar Mitsutaka Mimura avatar taichi avatar Yusuke Narita avatar Yuta Kurotaki avatar Yuya Matsushima avatar Toru KOKUBUN avatar Satoshi Homura avatar Tatsuya Takamura avatar Tomotsugu Kaneko avatar MOTOO11 avatar Shuhei KONDO avatar ishihara takashi avatar snowsunny avatar Toshiyuki Hirooka avatar Keiji Matsuzaki avatar Mayoto Yoshida avatar CHINDA, Kazuyuki avatar foo9 avatar Ohshima Yusuke avatar Noguchi Katsuya avatar ekkun avatar KON YUICHI avatar Yasuaki Goto avatar Yasuaki Mio avatar

Watchers

 avatar Asuka Zenfuku avatar kuramoto avatar Noriyuki Shimizu avatar James Cloos avatar Yasuaki Mio avatar snowsunny avatar Michael Anthony avatar Kazutoshi Tsuda avatar kaihimo avatar  avatar

jquery.kerning.js's Issues

カーニングデータ共有用リポジトリ

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

getJSONの処理を内包させる

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

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

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

Auto kerning with HTML attribute

e.g.

<p data-kerning>
こんなかんじで、特にjavascriptを書かなくても、HTML側の設定だけでカーニングしてくれると嬉しい。
</p>
<p data-kerning="{data:'kening-data.json'}">
こんな感じでconfigも書けると、もっと良い!?
</p>

親要素にtext-indentがかけてある時に影響を受ける

症状

da0904de-80af-11e4-8383-8954be3b73a6

これは、カーニングした要素の親要素に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>

b29cebcc-80af-11e4-812b-f5fcb60f81c6

extending "data"

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

kerning('destroy') and allow repeat kerning

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.