4

私は (tumblr 経由で) ブログを作成しています。ページのタイトルを自動的にスケーリングして、使用可能なスペースを水平方向に埋め、同時にコンテンツを少し押し下げたいと考えています。

（スケールとは、フォントサイズとおそらく単語間隔の変更を意味します）

ページ タイトルはすべて 4 語の長さになるため、おそらく 16 ～ 40 文字になります。

私はhtmlについてほとんど知らないので、私を助けてくれる人には非常に感謝しています. 乾杯！

4

1 に答える 1

2

注意 :これは純粋な html/css ソリューションではありません.. html と css だけでそれを行うことはできないと思いますので、javascript を集中的に使用します。また、jquery を使用してそれを実行していますが、そこにある JavaScript ライブラリのいずれかで簡単に再現できます。(私は主に 2 つの理由で JavaScript ライブラリを使用しています。1 つ目は、これらのライブラリがもたらすクロスブラウザーの互換性と、よく練られたショートカット/ユーティリティ関数です。2 つ目の理由は、これらのライブラリが持つプラグインの量が多いことです。ほとんどの状況を処理したり、ウェブサイトに無料のアイキャンディーをもたらしたりするため)

こんにちは、これに対する「すぐに使える」ソリューションは見つかりませんでしたが、iPhone開発でいつも気に入っていたものであり、Web開発で見逃していたので、試してみることにしました

これが私の解決策です。完璧ではありませんが、ちょっとうまくいきます:p。難しいことはないと思いますが、時間がかかりました。とにかく、いつか使うかもしれないと思います...またはその過程で得た知識...

この質問からインスピレーションを得て、テキスト サイズが収まるまで増減するループに基づくソリューションを示します。しかし、各テキストのサイズを変更するためのループには満足できず、試行錯誤する代わりに直接計算できると確信していました。

ウィンドウのサイズ変更処理についても、ここからインスピレーションを得ています。

ここでチャットを停止します。コードは次のとおりです。

<script type="text/javascript">
    var timer_is_on=0;
    jQuery.event.add(window, "load", loadFrame);
    jQuery.event.add(window, "resize", resizeFrame);

    function loadFrame() {
        $(".sc_container").each(function(){
            var $sc = $(this).children(".sc")
            $sc[0].orig_width=$sc.width();
            //console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
        });

        resizeFrame() 
    }

    function resizeFrame() 
    {
        $(".sc_container").each(function(){
            var $sc = $(this).children(".sc")
            var wc = $(this).width();
            var scale = 0
            if (wc > $sc[0].orig_width) {
                scale = wc / $sc[0].orig_width; 
            } else {
                scale = - $sc[0].orig_width / wc;   
            }

            //console.log("applying scale : "+scale+" for "+$sc[0])
            $sc.css("font-size",scale+"em")

        });
    }

</script>
</head>
<body>
<div id="container">
    <div class="sc_container">
        <div class='sc'>SOME SUPER TITLE !</div>
    </div>
    <div class="sc_container">
        <div class='sc'>ANOTHER ONE !</div>
    </div>
    <div class="sc_container">
        <div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
    </div>
    <div> And some normal content</div>
</div>

そしてこちらがテストページ

それは本当に堅牢ではありません..ウィンドウの幅が400ピクセル未満の場合はうまく機能しません.MacのSafari、Firefox、Chromeでのみテストしました。

少しトリッキーな部分は、複数のテキストで動作するようにしたかったため、$(".sc_container").eachcss クラス ".sc_container" を持つすべてのオブジェクトで実行されるループです。

最後のトリックは、css 'em' ユニットの力を使用することです。たとえば、'3em' は元のテキスト サイズの 3 倍を意味するため、ここではこれを使用して元のテキスト サイズから目的のテキスト サイズにスケーリングできます。そのため、元のテキスト幅をDOMオブジェクト自体に保存し、$sc[0].orig_width=$sc.width();後でサイズ変更時に計算に再利用しました。そうしないと、複数のサイズ変更後にめちゃくちゃになりました。

皆さんはそれについてどう思いますか?

于 2011-04-24T00:15:26.147 に答える