relative font sizing based on parent element

Question

relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining 20%. However, I have encountered an issue where height: 80% works well for the image but font-size: 20% does not work as expected for the text. Using vm or vh is not a viable solution since the size is not directly related to the screen size.

html css font-size

Answer 1

Answer №1

I stumbled upon a helpful link that you might find useful: LINK

flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.05;
        divs[i].style.fontSize = relFontsize+'px';
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};

@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
}

body, html {
    height:100%;
    width:100%;
    font-family: "San Francisco";
    font-weight: 200
}
.flexFont {
    height:8em;
    width:75%;
    background-color:#eeeeee;
    padding:1%;
    margin: 10px;
}

.smaller {
    font-size: 0.7em;
    background-color:red;
    width: 10em;
}

<div class="flexFont">
    <h2>This is FlexText:<br>Autoscaling by DIV width</h2>
    <div class='smaller'>... scaled by 0.7em</div>
</div>

<div class="flexFont">
    <p>Font size scales parallel to the container width.<br>Change window size to test.<p>
</div>

If you're looking to achieve this without VM/VH, a combination of javascript and CSS like the code provided above should assist in reaching your desired outcome.

Answer 2

I stumbled upon a helpful link that you might find useful: LINK

flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.05;
        divs[i].style.fontSize = relFontsize+'px';
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};

@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
}

body, html {
    height:100%;
    width:100%;
    font-family: "San Francisco";
    font-weight: 200
}
.flexFont {
    height:8em;
    width:75%;
    background-color:#eeeeee;
    padding:1%;
    margin: 10px;
}

.smaller {
    font-size: 0.7em;
    background-color:red;
    width: 10em;
}

<div class="flexFont">
    <h2>This is FlexText:<br>Autoscaling by DIV width</h2>
    <div class='smaller'>... scaled by 0.7em</div>
</div>

<div class="flexFont">
    <p>Font size scales parallel to the container width.<br>Change window size to test.<p>
</div>

If you're looking to achieve this without VM/VH, a combination of javascript and CSS like the code provided above should assist in reaching your desired outcome.

Answer 3

Answer №2

When using a percentage value for the font-size property, it adjusts the font size based on the current font size of the document rather than taking up a percentage of the container's size. You can learn more about this by visiting CSS Font-Size: em vs px vs pt vs percent.

For instance:

/* Set the current font-size for the document */ 
html {
  font-size: 20px;
}

/* This will result in a font size of 4px for content inside this div */
div {
  font-size: 20%;
}

Answer 4

When using a percentage value for the font-size property, it adjusts the font size based on the current font size of the document rather than taking up a percentage of the container's size. You can learn more about this by visiting CSS Font-Size: em vs px vs pt vs percent.

For instance:

/* Set the current font-size for the document */ 
html {
  font-size: 20px;
}

/* This will result in a font size of 4px for content inside this div */
div {
  font-size: 20%;
}

relative font sizing based on parent element

Answer №1

Answer №2

Similar questions

Comparing ASP MVC and PHP for uploading files: which is better?

What is the best way to eliminate extra space at the bottom of glide.js?

Extracting table data using regular expressions in Import.io is a powerful method to retrieve specific values

CSS: Adjusting the vertical position of text without affecting the background

Conceal the HTML element within a subscription

Tips for positioning footer text to the left and right, similar to Google's style

Changing colors in the rows of a table

Tips on how to transform an <input type="text"> element into a <tr> element using jquery

What is the best way to conceal the dt tag when the dd tag contains no value

What is the procedure for extracting data from a JSON file within an HTML document?

unable to adjust the maximum height limit

What is the best way to re-render a component immediately following an update in React?

Issues with clicking on the ion-tab icon in AngularJS are hindering the functionality

Extracting Data from HTML Using VBA

Adjust the background shade of specific characters within an input text field

It's possible for anyone to enhance the appearance of the Download button by adding styles without compromising its functionality

Comparing Traditional Tables to Div Tables

Automatically omitting a selector that mimics a switch

SQL queries can be used in Node.js to fetch data from various tables and display it on an HTML page

Is there a way to make sure all source code is aligned to the left?