つくりてのざれごと

日頃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内カーニングペア定義の箇所に追...

ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『 文字の組方ルールブック ヨコ組編 』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。 2013.5.14追記 デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。 上下マージン比1:1時と8:5時を ボタンで切り替えられるデモページ を追加。 参照 日本エディタースクール編. 文字の組方ルールブック ヨコ組編 . 本エディタースクール, 2001 JavaScript：文字を数値に変換する方法その２ | THE HAM MEDIA BLOG line-height の値には単位なしが良いとされる理由 - lucky bag Can I use rem units? ほか、色々なサイト・ブログを参照させていただいた。深謝。 注意 なにせjQueryはおろかJavaScript、いやプログラミング全般に素人なので間違ってたりする可能性があるので、使用時は自己責任でお願いする。 実作したweb組版 本文の文字サイズ・1行の字詰・行間（行送り）などを決めると版面が決まる。見出しもその版面に則り「行取り」の方法でその上下のアキを決めていく。具体的には下図をご覧あれ。本文だけでなく見出しも行に綺麗に乗っているのがわかる。 本文サイズ12px、行高22px、行間10px、42字詰。各見出しサイズなどは図の通り。 完成形をブラウザで表示後キャプチャし、イラレで作成した水色の版面上にキャプチャ画像を配置した。 web組版の注意点 行送りの設定方法がDTPと異なる。 webの行送りはline-heightで設定するが、これは厳密には文字通り行の高さを設定するもので、アキの付き方は以下の図の通りになる。 本文上下のグレー網がline-heightで設定されるアキ これを踏まえて版面設計や見出しのマージンを算出する。 見出しマージンの計算式 ということで、計算式を導くために、下図のように必要な部分を設定。 var bFont = body要素（本文）のfont-size var bHe...

表題の件が気になり調べたものを共有した方がイイかなと思い公開してみる。 自身の中でまだよく噛み砕けていないので判りづらい箇所があるかと思うが、そこはご寛恕を。 参考 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Cascading 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が設定され...

最近制作した案件にて採用した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%;に同じとなり可能な限りの幅になる。 今回のナビではラテン文字全てを大文字に指定したので。 今回は...