0

I have a div with some standard width/height.. What css parametrs should i know, to calculate how many letters the div fit with no overflow? I think that the following parametrs are neccessery..

  1. font-size
  2. text-indext
  3. letter-spacing
  4. line-height

Then how can i calculate the max number of letters the div fit?

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Chris P
  • 2,059
  • 4
  • 34
  • 68
  • 4
    Unless you are using a fixed-width font, it is dependent on which letters are used. – James Montagne Dec 15 '11 at 19:23
  • Ok, i fill the div with random text, to see about how many letters.. That's trick doesn't work into MAC pc of my friend.. The text overflow in MAC.. I try to use em instead of px.. So do em.. Any help? – Chris P Dec 15 '11 at 19:28
  • Check this. And use Javascript : http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript – Roko C. Buljan Dec 15 '11 at 19:38
  • I can't use javascript.. I want this info for php to substr the html version of an article to show this info into a slider.. It will be very bad practice if i send all the article into the client to modify it with javascript – Chris P Dec 15 '11 at 19:42
  • Random text will give you random results. And using em does not help, since em is the height of the font, not the height or width of any character. For monospace font, you could find out the advance width of the font and use it, but this requires a study of a specific font. It would probably be best if you described the original problem: why do you think you need to find out the maximum? – Jukka K. Korpela Dec 15 '11 at 19:43
  • @JukkaK.Korpela just look over.. I want this info to take the neccessery part of a article,and put it into my main page (slider) – Chris P Dec 15 '11 at 19:45
  • @roXon if i send 200 characters from php, it will works.. then calculate with javascript how many width the inner div has.. compare it with the outer width, and if it's bigger what i must do? – Chris P Dec 15 '11 at 19:51

3 Answers3

3

How many characters can be fit into a div is very difficult to measure because different browsers have different rendering methods, different osses and even graphic adapters may render antialiasing slightly different. Another factor whic may play a role are the pixels per inch, the output display can show. Beside this, the font itself and the text plays a role, because you normally won't deal with fixed with fonts. So you need to know a lot about used hardware, software and in-depth font parameters, which is motsly out of scope from within javascript.

Anyhow there might be a way...

Depending on what you want to know you may use a hidden tag with fixed width and height and the scrollLeft and scrollTop-Properties to find out if the text exceeds the tag dimensions. This can be achieved by setting the scrollLeft and/or the scrollTop-Properties to very high values (e.g. 99999) which will then replaced by the browser with the real values. These values are 0 or greater than 0. If they are greater than 0, the value represents the number of pixels, the text will overflow.

Important for the hidden field is, that it must be added to the document node tree (with appendChild)

You might create a loop to fill in characters (or your text) into your hidden filed which exactly has the same properties (use cloneNode(true)) as the source tag/field. Within the loop you'll check the scrollLeft/scrollTop for overflows. If it overflows, you'll have the maximum text, the tag can show. To speed up things a bit you might want to move the hidden tag out of the browser view (e.g. left: 10000px;).

After measuring you may remove the hidden tag from the node tree. Be careful with extensive use - the implementation can be relatively fast - but if you want to perform dozens of checks on the client side in frontend-situations, the user experience may decrease rapidly depending on browser type, processor speed and system load on the client side.

Axel Napolitano
  • 31
  • 2
0

You can use getClientRects() on objects that already have been drawn on the screen, but I assume you want to calculate this before rendering, yes?

Edit: Oh, I just noticed that you said you can't use Javascript. Sorry, I assumed you did mean with Javascript. That changes the problem.
Server side, you won't know which font the browser will use, whether it will round off the width of each character to whole pixels or not, etc.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Maybe, that's i was looking for... example for this will be something like: `#slider_info{width:400px;height:300px;font-size:50%;}` ??? i use this font `font-family:"lucida grande",tahoma,verdana,arial,sans-serif;` – Chris P Dec 15 '11 at 19:32
0

First let's assume you have a fixed css on the divs:

width
height
line-height
font-size
font-family
etc.

I would write some javascript to fill this div many times with different text (maybe pulled form actual articles) and do this in different browsers. Each time calculate the maximum number of characters that fill, but do not overflow the div. Then you have an upper bound on the number characters you need to send to always fill the div. Truncate each article in your slider to that number. You could add 10 characters if you want to ensure overflow and then use overflow hidden or ellipses or whatever.

Brett Pontarelli
  • 1,718
  • 15
  • 29
  • I can't think something better, so i will try to do with this method, and click this answer as accepted!! – Chris P Dec 15 '11 at 20:20
  • http://jsfiddle.net/xPucC/5/ Something like that will help other simillar problem for future use...!!! – Chris P Dec 15 '11 at 21:01