Auto-adjust font-size in defined DIV with changing text

Question

I want to auto-translate a text on my website by exchanging it with the same sentence in another language every few seconds, but this is not where my problem lies.

I already got the JS for this set-up, it looks like this:

 jQuery(function ($) { var languages = ["¡Hola, me llamo X! Bienvenido a mi página web.", "Hallo, ich heiße X. Willkommen auf meiner Webseite.", "你好, 我叫 X。欢迎来到我的网站。"]; var counter = 0; var $exc = $('#translate') setInterval(function () { $exc.text(languages[counter++]); if (counter >= languages.length) { counter = 0; } }, 1600) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <h2 id="translate">你好, 我叫 Jan。欢迎来到我的网站。</h2> 

Now I want to adjust the font-size of my h2 to always fit 1 line to prevent shifting the following text further up and down, when the text-length changes. Looks especially bad on mobile.

I tried using the open-source JS "jtextfill", but it doesn't work.

Answer 1

The idea of changing font-size of text is not hard here.

1. Save default (current) font-size of text to some variable.
2. After applying translation apply default font-size
3. Compare width of container (in our case it will be body , but you can change it) and width of text element ( #translate in current case).
4. If width of text element is bigger than width of container decrease font-size by some value (for example by 0.1px ) and go to step 3. If no then that's all.

Don't forget to make you h2 inline block to make it width defined by content and add white-space: nowrap to prevent text moving to next line and allow our calculations.

Demo:

 jQuery(function ($) { var languages = ["¡Hola, me llamo Jan! Bienvenido a mi página web.", "Hallo, ich heiße Jan. Willkommen auf meiner Webseite.", "你好, 我叫 Jan。欢迎来到我的网站。"]; var counter = 0; var $exc = $('#translate'); var defaultFontSize = parseFloat($exc.css("font-size")); function adjustFontSize() { var fontSize = defaultFontSize; $exc.css("font-size", fontSize + "px"); while ($("body").width() < $exc.width()) { fontSize -= 0.1; $exc.css("font-size", fontSize + "px"); } }; adjustFontSize(); setInterval(function () { $exc.text(languages[counter++]); adjustFontSize(); if (counter >= languages.length) { counter = 0; } }, 1600) }) 

 body { /* just 300px width for demo */ width: 300px; /* just styles for demo */ border-right: 1px dotted gray; height: 100vh; margin: 0; } #translate { /* take width and disable line wrapping */ display: inline-block; white-space: nowrap; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <h2 id="translate">你好, 我叫 Jan。欢迎来到我的网站。</h2> 

Answer 2

using it looks like this:

 p { font-size: 4vw; } 

Answer 3

Hope this will work:

http://simplefocus.com/flowtype/

$('h2').flowtype({
 minFont : 10,
 maxFont : 40,
 minimum : 500,
 maximum : 1200,
 fontRatio : 70
});