Scale text stretch dont work

[scooterbart]

Hello All,

Im bart, and i got the following problem…

Im busy for a woocommerce plugin. PHP based but there are some things that must be done in the frontend client side.

The most of the functions are build in Js

DEMO URL:
http://d3.reprex.nl/product/custom/demo-product/

And HTML output

<script>
jQuery(document).ready(function(){

`$img_path = "<?php echo plugins_url( 'woocommerce-custom-design/assets/');?>";

jQuery('span.top-line').html('<img src="'+$img_path+'images/top-line-red.png" />');
jQuery('div.topText').html(jQuery('#textTop').val()).addClass('redText');
jQuery('span.bottom').html(jQuery('#textBottom').val()).addClass('redText');
jQuery('span.bottom-line').html('<img src="'+$img_path+'images/bottom-line-red.png" />');
`

});
&lt;/script&gt;

Output client side when keyup():

<script>
<div class="logo" style="
"><span><img src="http://d3.reprex.nl/wp-content/plugins/woocommerce-custom-design/assets/images/top-line-red.png" /></span>

<div><div><span style="letter-spacing: 51.1111px">urk</span></div></div>

<span><img src="http://d3.reprex.nl/wp-content/plugins/woocommerce-custom-design/assets/images/bottom-line-red.png" /></span></div>
</script>

• The problem is that the function right now based on letter-spacing.
• Is there a way to make a function that calculates like this?

http://codepen.io/nickwalgers/pen/wGXrXR

so there is a max-width
and min-width

Maybe to early? but verry thanks to take a look at this ish..

kind regards

[scooterbart]

Sorry Jquiry

<script>

jQuery.fn.strech_text = function(){
    var elmt          = jQuery(this),
        cont_width    = elmt.width(),
        txt           = elmt.html(),
        one_line      = jQuery('<span>' + txt + '</span>'),
        nb_char       = elmt.text().length,
        spacing       = cont_width/nb_char,

`    txt_width;

    elmt.html(one_line);
txt_width = one_line.width();

if (txt_width < cont_width){
    var  char_width     = txt_width/nb_char,
         ltr_spacing    = spacing - char_width + (spacing - char_width)/nb_char ; 
         ltr_transform    = spacing - char_width + (spacing - char_width)-nb_char ; 
        console.log(ltr_spacing);
        console.log(ltr_transform);
    one_line.css({'letter-spacing': ltr_spacing});
    one_line.css({'transform': ltr_transform});
} else {
    one_line.contents().unwrap();
    elmt.addClass('justify');
}
`

};

});

</script>

[Author]

Posts