ansaurus

Question

jQuery CSS font-size

Answer 1

+1 A:

You want .filter(). For most elements this should work:

$(".myClass").filter(function()
{
    var el = $(this);
    el.css("white-space", "nowrap");
    var lineHeight = el.height();
    el.css("white-space", "");
    return el.height() > lineHeight;
}).css("font-size", "10pt");

Dealing with tables, all the cells in a row have the same height, so check the value of a child element. Eg, wrap everything in a div. However, if you must act on a <td> directly:

$(function()
{
    $(".myClass td").filter(function()
    {
        var el = $(this);
        el.closest("tr").andSelf().css("white-space", "nowrap");
        var lineHeight = el.height();
        el.css("white-space", "normal");
        var textWraps = el.height() > lineHeight;
        el.closest("tr").andSelf().css("white-space", "");
        return textWraps;
    }).css("font-size", "10pt");
});

gilly3 2010-10-08 19:08:15

Hi Gilly, How would this code know that content is moving into the second line?

t3ch 2010-10-08 19:16:26

Assuming that the height of one line of text is 20px, if the height of the div is greater than 20px, the text has wrapped. Do you need this to work even if you don't know the height of one line of text?

gilly3 2010-10-08 19:27:17

Yes gilly, the most basic req is, no matter what the height is, as soon as the text goes to second line, the font needs to get smaller in order to restrict the content in one line. Current td width is 172 if thats of any help.

t3ch 2010-10-08 19:40:08

Thanks for this solution Gilly :) but it would be a pain to do it cell to cell for the entire row :(

t3ch 2010-10-08 19:52:36

I don't know if it's any more simple, but if you force the cell to display only one-line of text (`white-space: nowrap`), then check the length of the text-element against the length of the cell, would that make it any easier? Or is it one of those six-of-one/half-a-dozen-of-another situations?

David Thomas 2010-10-08 19:53:16

Hey David, give me one minute and I will try your solution.

t3ch 2010-10-08 20:02:01

David, tried your suggestion, it works but it pushes the content of next td towards right of the screen.

t3ch 2010-10-08 20:22:23

@David - good call. That's simpler.@t3ch - Do you mean that you have straight text inside your table cells, with no containing elements? And you can't change that?

gilly3 2010-10-08 20:24:22

@ gilly, David, just to make things simpler for any other person trying for the same problem, I posted the HTML code fragment. I want to make this functionality work for td's with class = code

t3ch 2010-10-08 20:47:12

Answer 2

A:

var newFontSize = 8
if $('td').filter(function() {
    return $(this).height() >  20 
}).css("font-size", newFontSize);

Play with the height > 20 and newFontsize to get what you want.

Roadie57 2010-10-08 19:11:46

Thanks folks, I didnt get one thing in here. We are comparing the height with 20? How would the code know that content is going to shift into the second line?

t3ch 2010-10-08 19:13:34

20 is arbitrary. You should determine the height of one line, and replace 20 with the actual height of a line. Do you want this two work anywhere, without having to know the height of a line in advance?

gilly3 2010-10-08 19:17:27

Sorry didnt look at it in detail. So you are comparing current height ($this.height()) with height????

t3ch 2010-10-08 19:21:24

Test to find out what value height jumps to when lines are wrapped.

Roadie57 2010-10-08 19:31:01

so heres another question, these td's are generated dynamically and they have different parent div's, so one td's content can be in one line, where as others can be in 2 lines. How to find out those specific td's where content is in 2 lines.

t3ch 2010-10-08 19:47:10

That's what the filter function is an attempt to do. But I think it will actually return any other tds in the same row that got taller due to overlength text. but it should not affect tds other than those that height was affected. If you know class or id then add that to the $('td') selection item

Roadie57 2010-10-08 20:08:13

@Roadie57 - Each td in a row will have the same height. If only one cell has wrapping text, you don't want to decrease the font of all the other cells in that row.

gilly3 2010-10-08 20:44:17

Answer 3

A:

There isn't a straightforward way to get the width (in pixels) of text content. You can however get a reasonable estimate by multiplying the number of characters by the average pixel width of each character - this will vary depending on the font, and works best for fixed-width fonts like Courier. This also assumes that all the content is simple text without additional formatting.

Most fonts have a character width less than the height, so assuming width = height will definitely work.

Example:

var fontSize = parseInt($('.my-td-class').css('font-size')); // get default font size

function updateFont() {
  var e = $('#some-element');
  while (e.text().length * fontSize > e.width()) {
    fontSize *= 0.8;  // reduce to 80%
    e.css('font-size', fontSize + 'px');
  }
}

Edit: Based on the other answers, you could apply this technique to the height as well. Just make sure that the width/height comparison reflects the current font size and not any hard-coded value.

casablanca 2010-10-08 19:21:14

Hi casablanca, will this technique work if I have my font defined in em? Current size is 1em, if content goes to second line, I want to make it 0.8em.

t3ch 2010-10-08 19:38:41

@t3ch: I've updated the code so that it gets the default font size when the page is loaded, and scales to 80% whenever the line doesn't fit.

casablanca 2010-10-08 20:09:11

@casablanca, thanks. I am confused on one thing. Will this code work on all the td's with a particular class? (I mean to say, it will check through all the td's? if the height is more than one line then make the font smaller, else leave it alone.)

t3ch 2010-10-08 20:24:33

Yes, you can run the function any way you want, separately for each `td` if you wish. For example, you could do `$('.some-class').each( ... )` and call the function within `each`.

casablanca 2010-10-08 22:14:34

ansaurus

tags:

views:

answers:

jQuery CSS font-size

related questions