?
Solved

autosize / scale text to fit width per line

Posted on 2005-05-02
5
Medium Priority
?
752 Views
Last Modified: 2008-01-09
I am trying to design a label with the first name and last name on the first line, and say there city/state on the second.  the width of the label is 400 px, i am trying to figure our a way in css or something else to auto scale the text up or down so that it all fits on one line.  i.e. joe evans might be say font size of 40 to fit the width but martha spielberg but only be 30 px.  Also i guess i will need to keep in mind the total height of the label i.e. 400 px wide x 200 px high.  

Any suggestions on how to do this would be appreciated... Also running the app in Coldfusion if you need to know this!

Thanks,
Bruce
0
Comment
Question by:polobruce
  • 4
5 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13911777
It is as far as I know impossible to scale the font size by only CSS.

You can use javascript to set the font size dynamically as in the example below:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
    <title>This is the title</TITLE>
    <style type="text/css">
    html{
        height:100%;
    }
    body{
        height:100%;
        text-align:center;
        width:100%;
        padding:0px;
        margin: 0 auto;
    }
    .myDiv{
        width:400px;
        height:200px;
        border:1px solid #000000;
        margin:0 auto;
        background-color:#EEEEEE;
    }
    .myDiv span{
        white-space: nowrap;
        line-height:200px;
    }
    </style>
    <script type="text/javascript">
   
    function resizeLabel(){
        var obj = document.getElementById('textLabel');
        var maxWidth = 400;
        var timeoutCounter=0;
        var theWidth = obj.offsetWidth;
        while(timeoutCounter<100 && theWidth<maxWidth){
            obj.style.fontSize = obj.style.fontSize.replace('px','')/1 + 1;
            theWidth = obj.offsetWidth;
            timeoutCounter++;
           
        }
        obj.style.fontSize = obj.style.fontSize.replace('px','')/1 - 1;
           
    }
   
    window.onload=resizeLabel;
    </script>
</head>
<body>
    <div class="myDiv">
        <span id="textLabel">martha spielberg</span>
    </div>
</div>
</body>  
</HTML>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13911804
You can replace the function in the previous example with this one if you also want to have a max height:



    function resizeLabel(){
        var obj = document.getElementById('textLabel');
        var maxWidth = 400;
        var maxHeight = 180;
        var timeoutCounter=0;
        var theWidth = obj.offsetWidth;
        var theHeight = obj.offsetHeight;
        while(timeoutCounter<200 && theWidth<maxWidth && theHeight<maxHeight){
            obj.style.fontSize = obj.style.fontSize.replace('px','')/1 + 1;
            theWidth = obj.offsetWidth;
            theHeight = obj.offsetHeight;
            timeoutCounter++;
           
        }
        obj.style.fontSize = obj.style.fontSize.replace('px','')/1 - 1;
           
    }

btw: the timeoutCounter is something I put in to avoid inifinite loop. Should never happen, but just in case.

Batalf
0
 

Author Comment

by:polobruce
ID: 13912180
Looks great and works with one line, the only question i have is how do i go about using this function on multiple lines but staying within the height restriction.   i know i could just duplicate your function and rename but is there a way i could list the id's in the javascript function that i want autosized and then have it autosize them (i.e. textlabel1, textlabel2, textlabel3)?


Thanks btw for your quick response!

Bruce
0
 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 13912567
Something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
    <title>This is the title</TITLE>
    <style type="text/css">
    html{
        height:100%;
    }
    body{
        height:100%;
        text-align:center;
        width:100%;
        padding:0px;
        margin: 0 auto;
    }
    .myDiv{
        width:400px;
        height:200px;
        border:1px solid #000000;
        margin:0 auto;
        background-color:#EEEEEE;
    }
    .myDiv span{
        white-space: nowrap;
        line-height:200px;
    }
    </style>
    <script type="text/javascript">
   
    function resizeLabel(theID){
        var obj = document.getElementById(theID);
        var maxWidth = 400;
        var timeoutCounter=0;
        var theWidth = obj.offsetWidth;
        while(timeoutCounter<100 && theWidth<maxWidth){
            obj.style.fontSize = obj.style.fontSize.replace('px','')/1 + 1;
            theWidth = obj.offsetWidth;
            timeoutCounter++;
           
        }
        obj.style.fontSize = obj.style.fontSize.replace('px','')/1 - 1;
           
    }
   
    function resizeLabels(){
          resizeLabel('textLabel');
          resizeLabel('textLabel2');
          
    }
   
    window.onload=resizeLabels;
    </script>
</head>
<body>
    <div class="myDiv">
        <span id="textLabel">martha spielberg</span>
    </div>
    <div class="myDiv">
        <span id="textLabel2">My name</span>
    </div>
</div>
</body>  
</HTML>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13912580
This is an example how you could do it if you need support for multiline:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
    <title>This is the title</TITLE>
    <style type="text/css">
    html{
        height:100%;
    }
    body{
        height:100%;
        text-align:center;
        width:100%;
        padding:0px;
        margin: 0 auto;
    }
    .myDiv{
        width:400px;
        height:200px;
        border:1px solid #000000;
        margin:0 auto;
        background-color:#EEEEEE;
    }
    .myDiv span{
       

    }
    </style>
    <script type="text/javascript">
   
      function resizeLabel(labelID){
        var obj = document.getElementById(labelID);
        var maxWidth = 400;
        var maxHeight = 180;
        var timeoutCounter=0;
        var theWidth = obj.offsetWidth;
        var theHeight = obj.offsetHeight;
        while(timeoutCounter<400 && theWidth<=maxWidth && theHeight<=maxHeight){
            obj.style.fontSize = obj.style.fontSize.replace('px','')/1 + 1;
            theWidth = obj.offsetWidth;
            theHeight = obj.offsetHeight;
            timeoutCounter++;
            for(var no=0;no<=10;no++){    
                  if(theWidth/1>=maxWidth/1){
                        obj.style.width = (maxWidth-5) + 'px';      
                        obj.style.fontSize = obj.style.fontSize.replace('px','')/1 + 1;      
                        theHeight = obj.offsetHeight;
                        theWidth = obj.offsetWidth;
                        if(theHeight>maxHeight){
                              obj.style.fontSize = obj.style.fontSize.replace('px','')/1 - 1;
                              break;
                        }
                  }
                  if(theWidth<maxWidth && theHeight<maxHeight)break;
            }
        }
        obj.style.fontSize = obj.style.fontSize.replace('px','')/1 - 1;
           
    }
   
    function resizeLabels(){
          resizeLabel('textLabel');
          resizeLabel('textLabel2');
          
    }
    window.onload=resizeLabels;
    </script>
</head>
<body>
    <div class="myDiv">
        <span id="textLabel">I'm just testing this feature.</span>
    </div>
    <div class="myDiv">
        <span id="textLabel2">The quick brown fox jumps over a lazy dog</span>
    </div>
</div>
</body>  
</HTML>
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question