Posts

Showing posts from May, 2013

HTMLで文字詰め出来るJavaScriptとjQuery

Image
日頃WEBのテキストで句読点および括弧類が連続して出現する場合の詰め処理をしたくてどうしたものかと思案していたら、素晴しいJavaScript(とjQueryの混合)を発見。このスクリプト、要はペアカーニングを任意に設定できてしかも2つの括弧類連続を設定するだけで括弧類が3つ以上連続してもちゃんと詰めてくれる。いやはやありがたや。ということで今回参考というか丸々活用させていただいたのはFLAutoKerning.jsというスクリプト。
HTMLで文字詰めするタイポグラフィー用JS | fladdict感謝深謝。
カーニングのペアを自動処理今回の組版の設定は、基本ベタ組みで、句読点および括弧類が2つ連続した場合「全角二分取り」になるような、つまりは二分分詰まるような、オーソドックスな設定で試してみる。そして今回の句読点および括弧類は
起こし括弧類:「『([{〈《【〔
受け括弧類:」』)]}〉》】〕
句読点類・中点:、,。.・の計21種の組合せに詰め設定を施すが、この組合せを配列にて自動化した。
jQuery(function($){ var pncPrn = ["」","』",")","]","}","〉","》","】","〕","「","『","(","[","{","〈","《","【","〔","、",",","。",".","・"]; for (var x=pncPrn.length; x--;){ for (var y=pncPrn.length; y--;){ p[pncPrn[x] + pncPrn[y]] = -0.6; } } }); 上記jQueryにて設定した句読点括弧類の【組合せ】をFLAutoKerning.js内カーニングペア定義の箇所に追加(不要な組合せもあるが、処理上別…

JavaScriptとjQueryで文字サイズ・行高・行取り・見出し行数から見出しのマージンを自動計算

Image
ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『文字の組方ルールブック ヨコ組編』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。
2013.5.14追記デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。上下マージン比1:1時と8:5時をボタンで切り替えられるデモページを追加。参照日本エディタースクール編. 文字の組方ルールブック ヨコ組編. 本エディタースクール, 2001JavaScript:文字を数値に変換する方法その2 | THE HAM MEDIA BLOGline-height の値には単位なしが良いとされる理由 - lucky bagCan I use rem units?ほか、色々なサイト・ブログを参照させていただいた。深謝。
注意なにせjQueryはおろかJavaScript、いやプログラミング全般に素人なので間違ってたりする可能性があるので、使用時は自己責任でお願いする。
実作したweb組版本文の文字サイズ・1行の字詰・行間(行送り)などを決めると版面が決まる。見出しもその版面に則り「行取り」の方法でその上下のアキを決めていく。具体的には下図をご覧あれ。本文だけでなく見出しも行に綺麗に乗っているのがわかる。

完成形をブラウザで表示後キャプチャし、イラレで作成した水色の版面上にキャプチャ画像を配置した。
web組版の注意点行送りの設定方法がDTPと異なる。
webの行送りはline-heightで設定するが、これは厳密には文字通り行の高さを設定するもので、アキの付き方は以下の図の通りになる。


これを踏まえて版面設計や見出しのマージンを算出する。
見出しマージンの計算式ということで、計算式を導くために、下図のように必要な部分を設定。
var bFont = body要素(本文)のfont-size var bHeight = body要素(本文)のline-height var hFont = 見出しのfont-size var hHeight = 見出しのline-height var hGyodori = 見出しの行ドリ行数 var hGyosu…

CSSボタンでテキストを天地中央に揃えるとき、なぜボタン高と行高を一緒にするのか

Image
表題の件が気になり調べたものを共有した方がイイかなと思い公開してみる。
自身の中でまだよく噛み砕けていないので判りづらい箇所があるかと思うが、そこはご寛恕を。
参考Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) SpecificationCascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification(日本語訳)Eric A. Meyer著. 株式会社クイープ訳. CSS完全ガイド第2版. オライリージャパン, 2010インライン要素とは何か文書構造を構成するブロックレベル要素内の特定箇所にある特定の機能や論理的な意味を付加する要素をいう。それ自身の前後に改行を生成しない。例としては、a要素、em要素、span要素など。
インライン要素には非置換要素と置換要素とがある。今回は置換要素には触れない(置換要素の代表例はimg要素)。
非置換要素とは何か要素に囲まれた内容がそのまま表示される要素。HTMLやXHTMLの要素の大半は非置換要素である。
インライン非置換要素の特徴widthとheightは適用されない。背景はコンテンツエリアとpaddingに適用される。上下marginは、事実上適用されない。左右paddingは、要素の先頭と末尾のみに適用される。上下paddingは、要素の背景を上下に伸ばすが、行の高さに影響しないため、背景色がある場合は上下の行(実際は上の行)に重なってしまう。line-heightは何を制御しているか行高を指定するline-heightは単純に行間を制御しているのではなく、leadingという、コンテンツエリアの上下にある余白を制御している。leadingはline-heightとfont-sizeとの差であり、この差を等分してコンテンツエリアの上下に加えることによって行間が決まる(コンテンツエリア+leadingをインラインボックスという)。

コンテンツエリアとは、インライン非置換要素では、要素内の全ての文字を繋ぎ合わせたボックスでfont-sizeの値と同じ高さになる。
図解すると以下の通り。


つまり、line-heightが設定されたテキストが1行のみの時は、テキストは自ずとインラインボックスの天地中央に配置されるこ…

jQueryでHOVERした以外の文字が薄くなる縦型ナビに背景色変更も加味

Image
最近制作した案件にて採用したHOVER以外のボタンが薄くなる縦型ナビについて解説をば。
今回参考にさせていただいたのは、webOpixelさんの記事「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」内の「8.マウスオーバー以外のボタンを薄くする。」であります。深謝。
メインナビのみの縦型ナビHTML<ul id="mainNavi"> <li><a href="#">works</a></li> <li><a href="#">projects</a></li> <li><a href="#">bibliography</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> ※URLは見やすさのために#に置き換えて省略。
CSS#mainNavi { width: 192px; ・・・・1:必須 text-transform: uppercase; ・・・・2:任意 border-bottom: dotted 1px #BAC3C9; ・・・・3:任意 } #mainNavi li {border-top: dotted 1px #BAC3C9;} ・・・・4:任意 #mainNavi li a { display: block; ・・・・5:必須 padding: 0.8em 0.5em 0.5em; ・・・・6:必須 }
CSS指定の留意点:
width指定をしないとwidth: 100%;に同じとなり可能な限りの幅になる。今回のナビではラテン文字全てを大文字に指定したので。今回は各ナビ上下に境界線を4.にてtop側で指定、これ…