javascript - ブラウザのフォントの各文字のレンダリングされたピクセル幅データ

Question

特定の幅 (たとえば 100 ピクセル) に制限する必要があるテーブル列があります。その列のテキストがこれよりも幅が広く、スペースが含まれていない場合があります。例えば：

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

サーバー側のテキストの幅を計算し、正しい文字数の後に省略記号を追加したいと思います。問題は、レンダリングされたテキストのサイズに関するデータがないことです。

たとえば、ブラウザが Firefox 3 で、フォントが 12px Arial であるとします。文字「a」の幅、文字「b」の幅などは?

各文字のピクセル幅を示すデータはありますか? またはそれを生成するプログラム？

巧妙なワンタイム JavaScript スクリプトでうまくいくと思います。しかし、他の誰かがすでにこれを行っている場合、車輪の再発明に時間を費やしたくありません。この問題に直面したのは私が初めてではありません。

score 3 · Accepted Answer

3

オーバーフロー：スクロールはどうですか？

于 2008-10-02T14:52:52.700 に答える

score 3 · Accepted Answer

Ext JS has a module to do just that

TextMetrics Provides precise pixel measurements for blocks of text so that you can determine exactly how high and wide, in pixels, a given block of text will be.

I am sure that there are other libraries available out there that do it as well.

score 2 · Accepted Answer

これはサーバー側では不可能であるだけでなく、意味もありません。クライアントがどのブラウザーを使用するかはわかりません。また、クライアント側のどのフォント設定が、HTML に割り当てたスタイリング情報を上書きするかもわかりません。スタイルプロパティで絶対配置ピクセルを使用していると思うかもしれませんが、クライアントは高 dpi 画面を使用しているため、単純にそれらを無視するか、何らかのプラグインを使用してすべてをズームしている可能性があります。

一般に、固定幅を使用することはお勧めできません。

score 1 · Accepted Answer

サーバー側で行うのは非常に困難です。ユーザーがどのフォントをインストールしたかを知ることはできませんし、テキストの表示に影響を与えるものはたくさんあります。

代わりにこれを試してください：

table-layout: fixed;

これにより、テーブルが指定したサイズよりも大きくなることはありません。

score 1 · Accepted Answer

これが私が思いついたクライアント側のソリューションです。これは私のアプリケーションに固有のものですが、他の誰かが同じ問題に遭遇した場合に備えて、ここで共有しています。

思っていたよりも少し速く動作します。また、セルの内容はテキストのみであると想定しています。HTML の書式設定は、短縮プロセスで消去されます。

jQuery が必要です。

function fixFatColumns() {
  $('table#MyTable td').each(function() {
    var defined_width = $(this).attr('width');
    if (defined_width) {
      var actual_width = $(this).width();
      var contents = $(this).html();
      if (contents.length) {
        var working_div = $('#ATempDiv');
        if (working_div.is('*')) {
          working_div.html(contents);
        } else {
          $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>');
          working_div = $('#ATempDiv');
        }

        if (working_div.width() > defined_width) {
          contents = working_div.text();
          working_div.text(contents);
          while (working_div.width() + 8 > defined_width) {
            // shorten the contents of the columns
            var working_text = working_div.text();
            if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1);
            working_div.text(working_text);
          }
          $(this).html(working_text+'...')
        }

        working_div.empty();
      }

    }
  });

}

score 0 · Accepted Answer

必要なのは <wbr> タグです。これは特別な HTML タグで、折り返しが必要な場合にここで単語を分割してもよいことをブラウザに伝えます。永続的なストレージのためにテキストに挿入しません。なぜなら、データをそのデータを表示する場所/方法と結合しているためです。ただし、サーバー側のタグをビュー中心のコード (JSP タグや場合によってはコントローラーなど) に挿入することはまったく問題ありません。それが私がそれをする方法です。正規表現を使用して X 文字より長い単語を見つけ、そのような単語に X 文字ごとにこのタグを挿入します。

更新: いろいろ調べてみたところ、wbr はすべてのブラウザーでサポートされているわけではないようです。最も注目すべきはIE8です。私はこれを自分でテストしていません。おそらく、overflow:hidden をバックアップなどとして使用できます。

score 0 · Accepted Answer

これをサーバー側で行うことは基本的に不可能です。人々が異なるフォントをインストールしているという問題に加えて、カーニング (文字 "f" は、その隣にあるものに応じて異なる量のスペースを占有します) とフォントレンダリングオプション (cleartype はオンですか? "大きなフォント"?)。

score 0 · Accepted Answer

テキストを目に見えないスパンに入れて幅全体を読むこともできますが、基本的にこれは誰かがあなたのサイトを妨害しようとしているように見えます.リンクは長くなります!-)

-- しかし、簡単な方法は、テーブルセル内にブロック要素を配置することです。

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

これにより、テーブルが散らかるのを効果的に止めることができます!o]

score 0 · Accepted Answer

それを計算するためにサーバー側でできることは何もありません。操作する必要があるのは、ブラウザ識別文字列だけです。これにより、ユーザーのオペレーティングシステムとブラウザが正確にわかる場合とわからない場合があります。テキストの表示に特定のフォントを使用するように (font タグまたは CSS を介して) 「要求」することもできますが、ユーザーがそのフォントをインストールしているという保証はありません。さらに、ユーザーはオペレーティングシステムレベルで異なる DPI 設定を使用したり、ブラウザーのズーム機能を使用してテキストを拡大または縮小したり、独自のスタイルシートを使用したりする可能性があります。

score 0 · Accepted Answer

これが FireFox で機能しないことに問題がない場合は、CSS を使用してみませんか? table-layout:fixed のテーブルを用意し、問題の列に overflow:hidden;text-overflow:ellipsis; を設定します。white-space:nowrap.

score 0 · Accepted Answer

0

http://www.css3.info/preview/text-overflow/

css3の新機能です。

于 2009-01-16T20:30:23.777 に答える

score 0 · Accepted Answer

一部のユーザーは、デフォルトのフォント設定を大きくしたり小さくしたりしています。サーバー上でこれを行うことはできません。ブラウザがページをレンダリングした後にのみ測定できます。

score 0 · Accepted Answer

フォントサイズはブラウザ側で簡単に変更できるため、サーバー側の計算は非常に簡単に無効になります。

クライアント側の簡単な修正は、overflow 属性を使用してセルのスタイルを設定することです。

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

より良い代替手段は、サーバー側の文字列を切り捨て、長いバージョンを表示できる単純な JavaScript ツールチップを提供することです。結果をオーバーレイ div に表示できる「展開」ボタンも役立つ場合があります。

javascript - ブラウザのフォントの各文字のレンダリングされたピクセル幅データ

13 に答える 13

Related

Reference