ブラウザで強制されてしまう約物アキの挙動を、よりDTPソフトに近い挙動へ改善するjQueryプラグイン。 約物アキ量とは、日本語の括弧や句読点のあとに入る余白を指す。ブラウザではこの約物アキ量が常に半角で固定されてしまうが、そうすると約物が連続したときに余白が空きすぎてしまう問題がある。 DTPの世界では、こういった広すぎるアキは詰めるのが普通だ。そのため、Webと書籍の組版を見比べると、たとえフォントが同じでもWebの方がスカスカしたダサい組版になってしまう。 現状は最新のブラウザにしか対応していないものの、font-feature-settingsという新しいCSSプロパティで、この約物のアキをとることができるようになった。しかし、全部の約物へ一律にこれを適用すると、本来必要な箇所のアキまでなくなってしまう。 こういった訳で、約物の前後関係を計算し、必要なところにだけfont-feature-settingsを適用できるスクリプトを作ることにした。 仕組み Blast.jsで文字を1文字づつspan要素に分解する 1文字づつ文字列を調べ、辞書にある文字クラスと一致していたら特別な約物クラスを付与する 前後にほかの約物クラスがある約物クラスには、その前後関係を約物の前後関係クラスとして付与する 1文字づつY座標を調べ、行頭文字と行末文字を検出し、特別な行頭・行末クラスを付与する 約物クラス、約物の前後関係クラス、行頭・行末クラスへ、CSS側でfont-feature-settings: "halt" 1;が特定のコンテキストのときにだけ適用されるようにする。これにより、「閉じ括弧の直後にある開き括弧」や、「読点の直後の閉じ括弧」といった条件をでアキ量を減らせる CSSの影響により、行頭だった文字が前の行に追い込まれてしまう場合がある。このときはさらに追い出しクラスを付与し、強制的に次の行へ追いこまれた文字を押し返す そうすると1文字分近いアキが行末に残ってしまうので、そのアキをその行に含まれる文字の字間で均等に吸収する DOMを大量に生成したり、インラインCSSの記述をゴリゴリやっているため、パフォーマンスはあまりよくなさそう……。 実装の詳細はライブデモも参照。 参考サイト 今回はじめてjQueryプラグインを自作してnpmに公開してみた。やってみるとどちらも意外と簡単だった。なお、最近のjQueryプラグインはcommonJS対応していないとwebpackなどからrequireできない。せっかくなのでrequireできる仕様にした方が良いだろう。(ただし、依存しているblast.jsはcommonJS未対応……。) jQueryプラグインのCommonJSモジュール化からnpmに公開するまでの方法 | maesblog 初めてのnpm パッケージ公開 - Qiita また、npmのバージョン番号ルールとして採用されているセマンティック・バージョニングというものも始めて知った。一度公開すると二度とバージョン番号を下げてはいけない、ブレーキングチェンジがある場合はバグフィックス扱いでバージョンを上げてはいけないなど、ちゃんとしたルールがあるので読んでおきたい。 セマンティック バージョニング 2.0.0 - Semantic Versioning ダウンロード NPM: jquery.yakumono GitHub: hokkey/jquery.yakumono: 日本語組版で役物のアキ量を調整するためのjQueryプラグイン ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・動画・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2017年2月12日
CSSのfilterプロパティを使うと、YouTubeの動画に後からぼかし効果を加えることができる。 animationプロパティと組み合わせてブラー効果を周期的に変化させるようなデモを作ってみた。 FPSゲームでダメージを食らって死にそうなときの表現に似ている。 デモ See the Pen Blur CSS Animation on YouTube Video by y_hokkey (@hokkey) on CodePen. 互換性が低い手法 面白いので使ってみたくなるが、クロスブラウザでの動作がかなり怪しい。PCでもSPでも万全に使用できる雰囲気ではないので、仕事の案件で使うのは難しそうだ。残念。 2016年3月での検証結果 Chrome/Safari/Firefoxで動作 IE非対応 Android4.4.4で動作 iPhoneで一度フルスクリーン状態になるとそれ以降正常に適用されない。MobileSafariの仕様で自動的にフルスクリーン再生に移行してしまう為、実質的に使えない iPadでは動作
「Remixing Vol.3 with オールアバウト and LIG」へ登壇した際に初めて公開したスライドです。 Web制作で画面要素のコンポーネント化をすすめることによるメリットと、実践的なコンポーネントの実装手法について説明しています。 スライド スライド(一部)
社内勉強会用に作成したスライドです。プログラミングに親しくないWebデザイナーなどを対象に、Sassで登場するプログラマブルな機能をやさしく解説することを意図しています。 スライド スライド(一部)
オープンソースのDAMシステム「ResourceSpace」のためのカスタムテーマです。 デフォルトでインストールされている「whitegry」テーマをベースに、特にレスポンシブデザインプラグインをONにしたときの外観を見やすいものに置き換えることを意図しています。 なお、ResourceSpaceについては拙作のQiita上の記事で詳しく紹介しています。 オープンソースのDAMシステム、ResourceSpaceのまとめ - Qiita オリジナル版whitegryテーマとの比較: ダウンロード https://github.com/hokkey/whitegry_plus ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2015年9月23日 コメント デザイン資料の収集や管理をする上で、ResourceSpaceをかなり便利に使っています。 ただ、このソフトはイマイチ画面のデザインがイマイチで、見辛く、使い辛い部分も多いのが難点です。 このテーマでは、デフォルトのテーマをベースに、細かい部分で使い勝手の向上や、見栄えの改善を行っています。
