SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard jim_morrison3's Avatar
    Join Date
    Apr 2004
    Location
    UK
    Posts
    2,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to calculate text height ?

    Hi, How can i calculate the height of the text using Javascript ?
    Good Luck!
    There are things known and Things unknown
    And in between are the Doors.
    I love hand Coding.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say calculate it by getting the parent control's height but that can't be accurate.

    If you were able to put the text into a span or div that has no other styles set, just a plain div, i'd say you can use the offsetHeight attribute of the parent element.


  3. #3
    SitePoint Wizard jim_morrison3's Avatar
    Join Date
    Apr 2004
    Location
    UK
    Posts
    2,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds cool! i'll give it a try.
    Good Luck!
    There are things known and Things unknown
    And in between are the Doors.
    I love hand Coding.

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var Detector = function(){
    var h = document.getElementsByTagName("BODY")[0];
    var d = document.createElement("DIV");
    var s = document.createElement("SPAN");
    d.appendChild(s);
    d.style.fontFamily = "sans-serif"; //font for the parent element DIV.
    s.style.fontFamily = "sans-serif"; //arial font used as a comparator.
    s.style.fontSize = "72px"; //we test using 72px font size, we may use any size. I guess larger the better.
    s.innerHTML = "mmmmmmmmmml"; //we use m or w because these two characters take up the maximum width. And we use a L so that the same matching fonts can get separated
    h.appendChild(d);
    var defaultWidth = s.offsetWidth; //now we have the defaultWidth
    var defaultHeight = s.offsetHeight; //and the defaultHeight, we compare other fonts with these.
    h.removeChild(d);
    /* test
    * params:
    * font - name of the font you wish to detect
    * return:
    * f[0] - Input font name.
    * f[1] - Computed width.
    * f[2] - Computed height.
    * f[3] - Detected? (true/false).
    */
    function test(font) {
    h.appendChild(d);
    var f = [];
    f[0] = s.style.fontFamily = font; // Name of the font
    f[1] = s.offsetWidth; // Width
    f[2] = s.offsetHeight; // Height
    h.removeChild(d);
    font = font.toLowerCase();
    if (font == "arial" || font == "sans-serif") {
    f[3] = true; // to set arial and sans-serif true
    } else {
    f[3] = (f[1] != defaultWidth || f[2] != defaultHeight); // Detected?
    }
    return f;
    }
    this.test = test;
    }
    For more details visit: lalit dot org


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
  •