0

I need to have a script that will adjust the width of the font size to fill the width of the parent. There maybe several containers with text withing that parent div. They are spaced from each other with an equal width margin.

So, somehow I need to iterate through font sizing, increasing the size by 1px and checking if the new width of all spans and their spacers fit within the parentContainer...

Here's what I've got so far.

<style>
    span {
        margin-right:20px
    }
</style>

<div id="parentContainer">
    <span>some text</span>
    <span>more text</span>
    <span>another text</span>
</div>

<script>
    $("#parentContainer span:last-child").css("margin-right","0");

    function adjustFonts() {
    var myText = $("span").length, // count text containers
        spacersWidth = (myText - 1) * 20, // margin on the right side 
        availWidth = $("myText").innerWidth(),
                defaultFontSize = 11;

    var fontSize = ???

    $("myText").css("font-size", fontSize +"px");

}

adjustFonts();

$(window).resize(function() {
    adjustFonts();
});
</script>

enter image description here

santa
  • 12,234
  • 49
  • 155
  • 255
  • Depending on the rest of your design, you might be better off using [vw width units](http://css-tricks.com/viewport-sized-typography/) instead. – Blazemonger Sep 10 '13 at 19:40
  • 1
    possible duplicate of [Auto-size dynamic text to fill fixed size container](http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) – Blazemonger Sep 10 '13 at 19:41
  • `text-align: justify;` adds letter- and word spacing to make each line fill its parent's width like you see in a newspaper. – Ross Allen Sep 10 '13 at 19:42
  • @Blazemonger While it may look similar at first, my case is considerably different. I have a combination of several containers with text and fixed spacing between... – santa Sep 10 '13 at 19:52
  • Might be worth looking at https://github.com/simplefocus/FlowType.JS/blob/master/flowtype.js – geedubb Sep 11 '13 at 09:31
  • @geedubb Unfortunately I don't know the width of the container. I think I need to go back to my idea of incrementing the size by 1px, calculating all and if it's still less, do another round, however, stop as soon as it exceeds the total allowed width. – santa Sep 13 '13 at 14:56

0 Answers0