Display pIxel width data for each character in browser font

Question

I have a table column that should be limited to a specific width - for example, 100 pixels. Sometimes the text in this column is wider than this and does not contain spaces. For example:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy 

I would like to calculate the width of the text server side and add an ellipsis after the correct number of characters. The problem is that I have no data about the displayed text size.

For example, assuming the browser was Firefox 3 and the font was 12px Arial. What will be the width of the letter "a", the width of the letter "b", etc.?

Do you have data showing the pixel width of each character? Or a program to create it?

I think a smart one-time javascript script could do the trick. But I don’t want to waste time reinventing the wheel if someone else did it. Of course, I am not the first person to solve this problem.

Answer 1

It will be not only impossible for the server side, but it does not make sense. You are not using the browser that your client will use, and you do not know which client-side font settings will override any style information that you assign to a piece of HTML. You might think that you are using absolute positioning pixels in your style properties, but the client can simply ignore them or use some kind of plugin to enlarge everything because the client uses a high resolution per inch screen.

Using fixed widths is usually bad.

Answer 2

How about overflow: scroll?

Answer 3

Ext JS has a module that will do just that.

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

I am sure there are other libraries available that do this too.

Answer 4

It is very difficult to make the server side. You will never know which fonts were installed by users, and there are many things that affect the display of text.

Try this instead:

 table-layout: fixed; 

This ensures that the table will never be larger than the size you specify.

Answer 5

Here is my client solution that I came across. This is pretty specific to my application, but I will share it here if someone is facing the same problem.

It works a little faster than I expected. And he assumes that the contents of the cells are only textual: any HTML format will be deleted during the reduction process.

This requires 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(); } } }); } 

Answer 6

This is almost impossible to do on the server side. In addition to the problem of people with different fonts installed, do you also have kerning (the letter "f" will take up different space depending on what is next to it) and font rendering options ("cleartype on?") Large fonts? )

Answer 7

You can put text in an invisible range and read that the width spans, but basically it looks like someone trying to sabotage your site, and so I would recommend banning entries with words longer than one tenth, for example, 30 characters without spaces (so that the links are longer!)

- but a simple approach is to place a block element inside a table cell:

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

This will effectively stop the stack! o]

Answer 8

There is nothing you can do to calculate it. All you need to work with is the browser identifier string, which may or may not tell you the exact user operating system and browser. You can also “ask” (via a font tag or CSS) for a particular font that will be used to display text, but there is no guarantee that the user has this font installed. In addition, the user could have a different DPI setting at the operating system level or could make the text bigger or smaller using the browser zoom function or even use his own stylesheet.

Answer 9

If you're fine with this, don't work in FireFox, why not just use CSS? A table with a table layout: fixed, the column in question has an overflow: hidden; text overflow: ellipsis; white-space :. Nowrap

Answer 10

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

This is a new css3 feature.

Answer 11

Some users have larger or smaller default font settings. You cannot do this on the server. You can measure it only after the browser displays the page.

Answer 12

Since the font size can be easily changed on the browser side, your calculation on the server side becomes invalid very easily.

A quick fix on the client side will be to style your cells with an overflow attribute:

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

A better alternative is to truncate your server-side string and provide a simple javascript tooltip that can display a longer version. The expand button can also help display the result in an overlay div.

Answer 13

What you want is & lt; wbr> tag. This is a special HTML tag that tells the browser that a word can be broken here if a wrapper is required. I would not enter text into the persistent storage, because then you link your data with where / how you will display this data. However, it is perfectly acceptable to introduce the server side of tags into code that is view-oriented (for example, with a JSP tag or possibly in a controller). This is how I do it. Just use some regular expression to find words that are longer than X characters and insert this tag into each X character with such words.

Update: I looked around and it looks like wbr is not supported in all browsers. First of all, IE8. I did not check it myself. Perhaps you can use overflow: hidden as backups or something like that.