東京のWeb制作会社LIGLIGならできるおもしろいこと。Webサービスシェアこんにちは。カートン買いでライターが溜まっているライターの内藤です。先日、とある案件で「pタグの部分、両端揃えした方がきれいに見えない?」という話が出て、FirefoxとIE10は問題なかったのですが、WebKit系(ChromeとSafari)が対応していないことに今更気づき、何とかできないものかと思ったのがこの記事の経緯です。inter-ideograph;(IE用)がWebKit系だと綺麗に見えないぜ!ということです。slabText試してみた研究してみた自作の幅調整jQueryとその解説プロトタイプ1プロトタイプ2この問題の最新事情まとめブラウザによる両端揃えの見え方違いまずは比較して見てみましょう。*/}いつも悩ませてくれるIEも、実はこの問題には軽く対応してくれています!しかも、フォントのアンチエイリアスも効いていてきれいなんです。justify;}Σ(゚д゚lll)ガーン。justify;は効いています。いうわけで問題点は、全角・半角が混じった際、WebKit系のChromeやSafariは両端揃えをしてくれない!ということです。(違っていたらご指摘ください。)参考になったjQueryコード何とかならないものかと調査したところ、以下のものを見つけました。FitTexthttp://fittextjs.com/主にレスポンシブサイトの見出しを両端揃えにするためのjQueryです。要するに、両端揃えと言っても、文字間のスペースだけではなくて文字の大きさで調整してしまおうという代物です。下記リンクに日本語の解説があります。Stronghold:http://zxcvbnmnbvcxz.com/jquerytips-text-fitplugin/WordPress用にslabTextがプラグイン化されていたhttps://wordpress.org/plugins/wp-slabtext/これは、「||」という区切り文字列を入れることによって、日本語が入っても意図した場所で改行できるというものです。※2014年11月現在、2年間アップロードがされていません。試してみたslabTextをそのまま試してみました。見だしタグはきれいになりましたが、pタグに入れた長い文章は全然ダメでした。slabTextのソース(というより、開発者の方のページのソース)を解析してみると、「改行用の文字列を見つけたら、そこまでの文章をspanで囲っている」というものでした。wpstxt-5">両端揃えにする</span></h1>次に、slabTextのソースコードを読み解くと、なんかものすごくナイスアイディアが入っていました。emH;};これ、すげー頭いい!ダミーで半角スペースの表示を作り、その高さを測ってダミーを消してから、その高さを返す関数なんですが、すげー使えそう!(え?普通なんですか?)自作の幅調整jQueryとその解説そもそも見出しじゃないし、文字サイズはそのままにしたいし......というわけで、仕方ないので自作するのでした......。プロトタイプ1流れは以下の通り。親要素の幅を文字サイズで割って、1行に入る仮の文字数を出す。親要素の幅を文字数で割って、仮の字間(letter-spacing)を出す。文章を1行ずつに分割。最終的な文字数に合うように字間を調整して、spanでletter-spacingを設定して出力していく。words[wordIndex]<pre>[code].match(/[。while1$this.html(lineText);});};})(jQuery);使い方はこちら。ダミーにpタグを使うので、対象となるpタグにはクラス名やidをつけて動作させてください。class="sample">今IT業界は成熟期に入ろうとしています。我々LIGのミッションは、このユビキタス社会にイノベーションを起こす為のビジョンをコミットし、WinWinの関係でソリューションパートナーとしてクライアントのサービスをマネタイズし、常にユーザーエクスペリエンスをソーシャルな形でローンチし、IT革命、いわゆるWeb2.0時代の幕開けを象徴するかのようなグローバルでありながらもクラウドなサービスをアジャイルな形で開発、提供していくことがもっともプライオリティの高いプロジェクトだと考えています。-1){$(".sample").adaptText();}});</script>結果はこちら。だめじゃん!禁則処理はいけてるはずなのに......というわけで、デベロッパーツールを見てみると禁則処理とかは大丈夫。字間もそこそこ調整されてるのに、何故......。処理重くなるけどそれでもやるもう、一行の文字数とかカウントしないでやってみるってどうなんでしょう。親要素の幅を文字サイズで割って、1行に入る仮の文字数を出す。親要素の幅を文字数で割って、仮の字間(letter-spacing)を出す。文章を1行ずつに分割。現在の文章に次の文字を足した横幅が親要素の横幅以上になる場合、禁則処理を行い、1行の文字数に合うように字間を調整して、spanでletter-spacingを設定して出力していく。words[wordIndex]<pre>[code].match(/[。while1$this.html(lineText);});};})(jQuery);期待に胸膨らませ。デベロッパツールだとこんな感じです。なんか字間の計算がおかしいですか?すみません、数学苦手だったんです......。この問題の周辺事情この件は、電子書籍業界ではかなり以前から問題になっているらしく、下記のブログでも2010年に触れられています。電子出版の方面W3Cのドラフト等々の情報もあります。CSS組版ブログ:http://blog.antenna.co.jp/CSSPage2/archives/9また他にも、下記ブログでは「半角文字を全ての文字の間に入れ込むことで両端揃えを実現」していらっしゃるのですが、今回は「見た目」と「内容(文章として成立する)」の両立が欲しかったので、この方法は採りませんでした。高橋文樹.com:http://takahashifumiki.com/web/design/962/まとめWebKit系で全角・半角が混じった文章を両端揃えするのはとても難しそうです。「Chrome/Safariでガタガタなんですけど何とかなりませんか」とクライアントさんから言われたら、「こんなこともしたんですけど、ブラウザの仕様上、やっぱりダメみたいなんです......。」と説明してみましょう。なにかの参考になったら幸いです。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。