AAをスマホで見た時に横にはみ出すのを修正

このサイトはではアスキーアートの表示にはAAが途中で改行されないようにwhite-space:preというスタイル指定をあてております。この指定を行えば空白と改行が書いたまま表示されるので、AAを表示する場合はだいたいみんな似たようなことをしていると思うのだけど、こいつがスマホなんかでレスポンシブデザインをするときに、横にはみ出してしまって非常にめんどくさい。

responsible_over

途中で改行されないように指定しているため、文字がスマホの表示横幅をはみ出してしまい横スクロール領域が発生してしまう。

pc_over

PCなら横幅がそれなりにあるのではあまり問題にはならないけれど、ボックス領域を超えてしまうような横に長いAAだと同様のことが起こってしまう。、

こいつを解決してやろうというのが今回のお題

さて、問題はどう解決するか。いくつか方法はありそうですが、今回はテキストが入っているBOXの横幅と、テキスト自体の横幅を取得してテキストの横幅がBOXの横幅より大きい場合に、テキストのfont-sizeに「BOXの横幅/テキストの横幅」をかけてやって求めた値を、font-sizeとして再設定してやるという方法をとってみたいと思います。例えば、BOX横幅が300。テキスト横幅が500。フォントサイズが12pxの場合は、12 * 300 / 500 = 7.2で、フォントサイズを7.2pxに再設定してやるという感じです。

ということで早速コードを。ちなみにjQueryを使用。アスキーアートのコンテナには.aaというクラスがついている想定です。


jQuery(document).ready(function($){    
    $('.aa').each(function(){
        var w1 = $(this).width();                // BOXの横幅を取得
        var pos = $(this).css("position");       // 現在のpositionを保存
        $(this).css({position:"absolute"});      // absoluteに変更
        var w2 = $(this).width();                // テキストの横幅を取得
        $(this).css({position:pos});             // positionをもとに戻す
        if(w1 < w2){                             // テキスト横幅のほうが大きい
            var fs = $(this).css("font-size");   // テキストのフォントサイズを取得
            var lh = $(this).css("line-height"); // 行の高さも取得
            var re = /([\d|\.]+)([^0-9|^\.]*)/;  // 数値と単位にわける準備
            var fsmt = fs.match(re);             // ↑を実行。例えばfsが12pxなら fsmt={12px,12,px}となる
            var fssz = fsmt[1] * w1 / w2;        // フォントサイズに比率をかける
            var lhmt = lh.match(re);             // 行高さもにも
            var lhsz = lhmt[1] * w1 / w2;        // 同様の処理を行う
            // 計算したフォントサイズと行高さを設定して終了
            $(this).css({"font-size":fssz+fsmt[2],"line-height":lhsz+lhmt[2]});
        }
    });
});

もうちょっと華麗なやり方がありそうですがひとまずこれで、最初に例にあげたAAの場合は以下のようになります

pc_fit

はみ出ないでジャストフィットしてます

responsible_fit

こっちはスマホ想定。横長のやつは極小になってます。

以下はサンプルに使ったAAの実際のデータ。iPhoneでしか確認してないので他のスマホで見てはみ出していないかは不明。まぁはみ出してたらはみ出してたでこまけぇこたぁいいんだよ!!

             /)            ///)           /,.=゙””/    /     i f ,.r=’”-‐’つ____   こまけぇこたぁいいんだよ!!   /      /   _,.-‐’~/⌒  ⌒\     /   ,i   ,二ニ⊃( ●). (●)\    /    ノ    il゙フ::::::⌒(__人__)⌒::::: \       ,イ「ト、  ,!,!|     |r┬-|     |      / iトヾヽ_/ィ”\      `ー’´     /

             /)            ///)           /,.=゙””/    /     i f ,.r=’”-‐’つ____   こまけぇこたぁいいんだよ!!こまけぇこたぁいいんだよ!!こまけぇこたぁいいんだよ!!こまけぇこたぁいいんだよ!!   /      /   _,.-‐’~/⌒  ⌒\      /   ,i   ,二ニ⊃( ●). (●)\    /    ノ    il゙フ::::::⌒(__人__)⌒::::: \       ,イ「ト、  ,!,!|     |r┬-|     |      / iトヾヽ_/ィ”\      `ー’´     /