CODEWITHSUNDEEP
cssfont-size
circusdei
circusdei

Reputation: 1967

Can font-size be a % of container size in css/css3?

I have a container:

<div id="container"><h1>LONG TITLE LINE</h1></div>

and css:

#container {
    width: 50%;
    height: 50%;
}

#container h1 {
    font-size: XXXXXX;
}

"XXXXXX" <-- where i want the font size to be based on the width of the page/container.

QUESTION: is it possible to have the font-size of the h1 based on the width of the page? in css3? i'm sure it can be done using JS, but like to avoid that if it is possible.

Upvotes: 7

Views: 6887

Answers (5)

Martijn Scheffer
Martijn Scheffer

Reputation: 691

My solution creates a CSS variable that expresses the height of the container relative to the viewport, in "vh" units, this variable can then be used with the CSS3 "calc" function to calculate font height as a percentage of the height of the container.

the size of the container is measured every time the viewport (window) is resized

<html>
        <head>
            <style>
                .container {
                    width:100%;
                    /*
                        any rules you like to set the dimensions of the container
                    */
                    top:40px;
                    height:30vh;

                    border:1px solid red;
                    white-space:nowrap;
                }
            </style>
            <script>
                    function setCSSVariableAccordingToElementHeightRelativeToViewPort(elementClassName, cssVariableName, immutableElement)
                    {
                        var element
                        /*
                            the "immutableElement" parameter is
                                true when the container is never recreated,
                                false if its generated dynamicaly
                        */
                        if(immutableElement === true) {
                            element = document.querySelector("." + elementClassName)
                        }                   

                        var onResize = function() {
                            if(immutableElement !== true) {
                                element = document.querySelector("." + elementClassName)
                            }

                            if(element != undefined) {
                                var elementHeight = element.offsetHeight
                                var elementVH = (elementHeight / window.innerHeight) * 100
                                element.style.setProperty(cssVariableName, elementVH + "vh")
                            }
                        }
                        onResize()
                        window.onresize = onResize
                    }
            </script>
        </head>
        <body>
            <div class="container">
                <span style="font-size:calc(var(--container-vh) * 0.25)">25%</span>
                <span style="font-size:calc(var(--container-vh) * 0.50)">50%</span>
                <span style="font-size:calc(var(--container-vh) * 1.00)">100%</span>
            </div>
        </body>

        <script>
            setCSSVariableAccordingToElementHeightRelativeToViewPort("container", "--container-vh", true)
        </script>
    </html>

JSFiddle

Upvotes: 0

web-tiki
web-tiki

Reputation: 103790

An other option dependng on your layout is to use vw units :

vw : 1/100th of the width of the viewport.(source MDN)

If your #container width is set as a percentage of the viewport, font-size will adapt to it's width :

DEMO

CSS :

#container h1 {
    font-size: 5vw;
}

Browser support for vw units is IE9+, see canIuse for more info.

Upvotes: 6

adamdport
adamdport

Reputation: 12613

I don't see why this couldn't be accomplished using media tags. Depending on how granular you wanted to make it, you could do something like this: 

@media only screen and (min-width: 1000px){
    #container h1 { font-size:42px; }
}
@media only screen and (max-width: 1000px){
    #container h1 { font-size:40px; }
}
@media only screen and (max-width: 900px){
    #container h1 { font-size:35px; }
}
@media only screen and (max-width: 800px){
    #container h1 { font-size:30px; }
}
@media only screen and (max-width: 700px){
    #container h1 { font-size:25px; }
}
@media only screen and (max-width: 600px){
    #container h1 { font-size:20px; }
}
@media only screen and (max-width: 500px){
    #container h1 { font-size:15px; }
}

See the JSFiddle here for a demo.

Upvotes: 2

Jason Goldstein
Jason Goldstein

Reputation: 1127

I don't think it's possible in CSS, but this might be interesting to you:

http://fittextjs.com/

Upvotes: 4

Nate B
Nate B

Reputation: 6356

Not the way you are saying. You can, however, do the opposite. Have the width of the page dependent on the font size, if you declare a base font size in ems, then use em values for your layout. Then, the width would increase if you increased the size of the text.

Upvotes: 3

Related Questions