SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Estimating Line Breaks

    If I have a div that's 300px by 20px, is there a function that calculates whether a string will display with a line break, given font-size of 21px?

    If not, I'll have to create some code, but if it's already available, that's even better

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are using a monospace font it's quite simple: 300/21=14.3 letters. If your string is longer than 14 characters it will break. If your font is not monospace it is practically impossible to predict on the server side at least. Perhaps with javascript you could find the computed length of the text in the browser.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll have to check that out. Thanks jonas-e.

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hopefully there is an easier way, but this "off the cuff" example should help you get started.

    It displays the rendered width and height of a string based on its css styles. If you change the css styles for the string you can see the effect they have on the calculated width and height of the rendered text.
    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #mySpan{
                    display: table-cell;
                    font-family: arial;
                    font-weight: bold;
                    font-size: 2em;
                }
            </style>
            <script type="text/javascript">
                window.onload=function(){
                    var strTesterO = document.getElementById('strTester')
                    var str = "The cow jumped over the moon";
                    var spanO = document.createElement('span');
                    spanO.id = 'mySpan'
                    spanO.appendChild(document.createTextNode(str));
                    strTesterO.appendChild(spanO);
                    alert(document.getElementById('mySpan').clientWidth + "\n"+document.getElementById('mySpan').clientHeight);
                }
            </script>
        </head>
        <body>
            <div id="strTester"></div>
        </body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if you use jQuery on your page the javascript could be even shorter and easier.
    www.jquery.com

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm not familiar with window.onload. I understand what it does in the script, but can't find a reference that says onload is a property of window. Am I thinking about it correctly?

  7. #7
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's lots of references to window.onload on Google.

    Basically, the onload event for the window is triggered when the page has finished loading after which the code within the function is executed.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    If I have a div that's 300px by 20px, is there a function that calculates whether a string will display with a line break, given font-size of 21px?

    If not, I'll have to create some code, but if it's already available, that's even better
    The very best solution that I've come across for this is to use a hidden copy of that div, where you put the string in that hidden copy and work out if a line break occurs in that hidden div.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seams to me that this thread has gradually turned in to a talk about javascript options rather than php ...
    @nichemtktg, you might want to repost your question in the javascript forum.

  10. #10
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jonas-e View Post
    And if you use jQuery on your page the javascript could be even shorter and easier.
    I doubt it. If you look at the "back end" code that is run by jquery it'll most likely be a lot more lines than the handful of plain javascript lines in the demo.

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    I doubt it. If you look at the "back end" code that is run by jquery it'll most likely be a lot more lines than the handful of plain javascript lines in the demo.
    I guess it depends. I prefer the simplicity of jQuery which might be easier to understand for someone with little js knowledge:
    Code JavaScript:
    $(document).ready(function(){
      $('#strTester').html('<span id="mySpan">The cow jumped over the moon</span>');
      var mySpan = $('#mySpan')[0];
      alert($(mySpan).width()+'\n'+$(mySpan).height());
    });

    Remember to include this in your page:
    HTML Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    And to check out the documentation:
    http://docs.jquery.com/
    In this case particularly:
    http://api.jquery.com/category/manipulation/

    I trust that the jQuery team has performance as a top priority. Using $(document).ready() is more generic than using window.onload because you can use the first more times but the latter only once on a page.

  12. #12
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jonas-e View Post
    I prefer the simplicity of jQuery which might be easier to understand for someone with little js knowledge:
    I see way too many people (and I'm not saying you're one of them) try to take the "jquery shortcut" to learning javascript.

    All jquery is, is a bunch of javascript functions that someone else has pre-written for you. There is nothing at all you can do with jquery that you cannot do with just plain javascript.

    Many noobies try to take the jquery shortcut and more often than not when they get stuck they have no, or next to no, javascript knowledge to help them get unstuck and so they end up in forums like this one looking for someone to drag them out of the coding quicksand they fell into. Imo noobies would generally be much better off learning plain javascript first to a reasonable level of understanding before "playing" with jquery otherwise they will mostly likely end up continually floating around forums looking for help - but that's just me

  13. #13
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Bilthoven, Netherlands
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @webdev1958: You're probably right. The reason why I appreciate jQuery so much, is because I know how tedious the same tasks are in plain js - because I learned that first ..

  14. #14
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "tedious" is a relative term and so is subjective.

    I find javascript relatively straight forward and normally don't waste time using jquery when the same task can be run with less code using plain javascript.


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
  •