Doesn't play nicely with text transformations.

[acleancoder]

Resizing on items that have 'font-weight:lighter; letter-spacing: 0; text-transform: uppercase' produces strange resize results.

e.g.

.js_bigtext { width: 100%; margin: 22px 0 0 0; }
h1 { display: block; width: 100%; font-weight: lighter; letter-spacing: 0; text-transform: uppercase; }

<div class="js_bigtext">
    <h1>Title Here</h1>
</div>

$('.js_bigtext').bigtext({
    childSelector: '> h1'
});

[etuan]

It would be ideal if the resizing happened after the css was applied... I'm having the same issue.

[philfreo]

👍

[philfreo]

Interesting... it works in some cases for text-transform: uppercase;, but not all.

    <header>
        <h1>Test Test Test</h1>
        <h2 style="text-transform:uppercase;">Foo Foo</h2>
        <h2>Foo Foo</h2>
    </header>
    <script>
        BigText.DEFAULT_CHILD_SELECTOR = '> *';
        $('header').bigtext();
    </script>

If I apply the text-transform directly on the <h2> then it works correctly, but if I rely on a style tag to capitalize the h2 (.jumbotron header h2 { text-transform: uppercase; }) then it gets sized too large.

[zzarazza]

I was going to bang my head against the wall over this, but the suggestion to move text-transform: uppercase to the element directly, without any cascade, worked like a charm. I didn't have to put it as inline style too, just added an ID to the element that was big-texted.