👨🏽‍🏫 🙏🏽 ❓ わかりやすいテキスト列 ⬆️ ⏱️ 🏫

最近、「フォントズームとレイアウト」というタイトルの投稿で、著者は、幅がピクセル単位で固定されている列でフォントサイズが変更されるとどうなるかについて懸念を表明しました。現在はページ全体をズームするのが慣例ですが、これが常に正しいのかどうかはわかりません。ページのピクセルが画面のピクセルに対応しなくなり、エンティティの不健康な増殖が発生します。

さらに、私の練習では、サイズを増やさずにウィンドウの幅全体にテキストを分散させるという、あるスクロールコールから別のスクロールコールまでより多くのテキストを画面に収めたいという要望にしばしば遭遇しました。

これらの考慮事項から、そのような可能な解決策が生まれました。デフォルトでは、行に読みやすいと思われるいくつかの文字が含まれるように、テキストの列の幅を修正します（ポリグラフ作成者とWebデザイナーは特定の数ではなく、ポイントではなく）幅を調整するためのインターフェイスを追加します。たとえば、列の右の境界線をドラッグし、ダブルクリックして100％で開いて開く（および幅はブラウザーウィンドウの幅によって決定される）か、元の幅に戻すことができます。

これを行うには、 jQuery UI Resizableプラグインを使用します。 jquery-ui-1.8.12.custom.css

、 jquery-1.5.1.min.js

およびjquery-ui-1.8.12.custom.css

ファイルをページに接続し、独自のstyle.css

およびonReady.js

ます。

列は次のように定義されます。

 <div id="content" class="ui-widget-content"></div>

スタイルシートで、次のように記述します。

 div#content{ width: 45em; margin-left: auto; margin-right: auto; padding: 1ex 1em; border-right: thin dashed #444444; }

そして、スクリプトファイルで：

 $( function(){ $("#content").attr("start_width", $("#content").width()+"px"); $("#content").resizable({ handles: "e", start: function(){ $("#content").removeAttr("expanded"); } }); $("#content div.ui-resizable-handle.ui-resizable-e").dblclick( function(){ if($("#content").attr("expanded")) $("#content").width($("#content").attr("start_width")).removeAttr("expanded"); else $("#content").width("auto").attr("expanded", "expanded"); } ); } );

デフォルトでは文字で許容される特定の幅を持つ列を取得しますが、ユーザーは（想像上のニーズの枠組み内で）自分の心が望むものを使用できます。

UPD：パブリックのリクエストにより、デモ。

わかりやすいテキスト列

More articles: