SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Resize text to fit div

    Hi all

    I've come across an application that needs me to fit an undetermined amount of text into a set size div, the finished page is for printing so the div cannot scroll etc.

    My thought is that I can use a JS loop to check the height of the div (after inserting the text), then reduce the text size until the div is back to its intended height.

    Anyone already cracked this nut ?? My JS isnt as good as my PHP.

    TIA
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That sounds sensible. Give the DIV height:auto in the CSS and use a while loop:
    Code Javascript:
    var fsize = 4; // starting font size (in ems)
    while (div.offsetHeight > 300) { // 300px is target height
      fsize -= 0.1;
      div.style.fontSize = fsize + 'em';
    }

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think its going to be that easy.
    If you do reduce the text size, remember the inline style will trump any media=print stylesheet you have set,
    so the printed output is going to vary according to the users window size.

  4. #4
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles, I'll give it a go.

    @mrhoo
    The application is for protected backoffice use only, it always appears in a popup printlayup window that the user double checks before pressing the print button, so I have more control over the proceedings than an open public application, hence I can also be sure that all users will have JS enabled to start with.

    Thanks
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •