search

xles / hyphenator

Automatically exported from code.google.com/p/hyphenator
GNU General Public License v3.0
0 stars 0 forks source link

How to get the right height of element after hyphenation? #161

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
Hello,

when the text is in a div with css-style "height:auto;" and the number of rows 
changes after hyphenation the height is not the right one.

In my case I have a very small div-box (width:126px;) with big font 
(font-size:20px;line-height:30px;). If there is just one longer word which is 
separated through hyphens the height of my element still is the same as without 
hyphens.

Example:

"Lastenhebemaschine" 
(one line, 30px height, but runs out of the div (overview:hidden;))

after Hyphenator
"Lastenhebe-
maschine" 
(two lines, 30px height - but the element looks like 60px height)

I tried to get the height like this:

via JS:
document.getElementById("myid").offsetHeight;
document.getElementById("myid").height;
via JQuery:
$("#myid").height();

Every time the same output: height = 30px.

I use Hyphenator 4.0.0

Is there a solution to get the right height?

Thanks

Original issue reported on code.google.com by s...@stegenwaller.de on 15 Jun 2012 at 7:55

GoogleCodeExporter commented 9 years ago 
Hi

You most likely didn't wait for Hyphenator.js to finish!

There's a callback function called when Hyphenator.js has finished its tasks: 
http://code.google.com/p/hyphenator/wiki/en_PublicAPI#property_onhyphenationdone
callback

So this works fine:

{{{
<!DOCTYPE html>
<html lang="de">
    <head>
        <style>
            div {
                width:126px;
                font-size:20px;
                line-height:30px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="./Hyphenator.js"></script>
        <script>
            Hyphenator.config({
                onhyphenationdonecallback: function () {
                    var
                    jQ = $("#myid").height(),
                    oh = document.getElementById("myid").offsetHeight,
                    he = document.getElementById("myid").style.height;
                    alert(jQ + ' ' + oh);
                }
            });
            Hyphenator.run();
        </script>       
    </head>
    <body>
        <div id="myid" class="hyphenate">Lastenhebemaschine</div>
    </body>
</html>
}}}

BTW: Afaik there's no document.getElementById("myid").height;

Mathias

Original comment by mathiasn...@gmail.com on 15 Jun 2012 at 3:32