What This CSS Code Means (Font-Size Division)

What this CSS code means (font-size division)?

Yes. It's a short-hand way of writing font-size and line-height together.

CSS: What/why specify font-size as font-size: 14px/1.31em?

Here is the exact definition of em and px

Ems (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

---

What exactly does this way of writing mean and what problem do I solve by using this way of writing?

When you set your font-size equal to 10px, for example, and you use the 3em. You will get 30px (10*3).

EDIT:

Basically, we can use font: 14/1.31em, which is a short-hand, to set the font-size and line-height.

However, in your case, font-size: 14px/1.31em; doesn't have any short-hand. So, you cannot set it this way. It is a wrong syntax.

See more explanation of "CSS Font-Size"

Font-size CSS parameter looks like font-size:181.25%16px;

It's a syntax error.

Chrome marks it as ignored.

Creating two divs with equal size, but different font-size, in ems

I found a solution that works good for me. I leave the font-size on the parent unchanged, instead I change the font-size of the children.

HTML:

<div class="blue"><p>blue</p></div>
<div class="small"><p>test</p></div>

CSS:

.normal {
    width: 6em;
    height: 6em;
}
.small {
    width: 6em;
    height: 6em;
}
.small p {
    font-size: .8em;
}

Updated Fiddle (the two divs in the middle).

Can I have 12.5px font size?

A fractional px font size is perfectly valid.

Modern browsers perform layout with device-independent floating-point values, and there are few-to-no differences between running on a high resolution (2x, 1.25x, etc.) display and setting the zoom level in a browser.

You should be aware that certain values are rounded to whole pixels, such as borders, and this difference might manifest in subtle ways.

As an illustration, Firefox reports 1px for the computed border width of all these, while Chrome does not. A box made purely of border width might layout differently in Firefox and Chrome — there's a tradeoff at play here.

Also as an illustration, do a Find in Page for "px" and look at the ragged border of the highlight — it smoothly moves to the right rather than jumping at a certain point.

Edit: And Safari (on Mac) is indeed the odd one out, apparently rounding the font size to a whole number for display (but the computed value is still fractional).

document.querySelectorAll('span').forEach(span => {

  const {width, height} = span.getBoundingClientRect();

  span.textContent += `\t${width}x${height}`;

  const {borderTopWidth} = getComputedStyle(span);

  span.textContent += `\t${borderTopWidth}`;

});

span {

  border: 0.08em solid silver;

  white-space: pre-wrap;

}

<div style="font-size:12.0px"><span>font-size:12.0px</span></div>

<div style="font-size:12.1px"><span>font-size:12.1px</span></div>

<div style="font-size:12.2px"><span>font-size:12.2px</span></div>

<div style="font-size:12.3px"><span>font-size:12.3px</span></div>

<div style="font-size:12.4px"><span>font-size:12.4px</span></div>

<div style="font-size:12.5px"><span>font-size:12.5px</span></div>

<div style="font-size:12.6px"><span>font-size:12.6px</span></div>

<div style="font-size:12.7px"><span>font-size:12.7px</span></div>

<div style="font-size:12.8px"><span>font-size:12.8px</span></div>

<div style="font-size:12.9px"><span>font-size:12.9px</span></div>

<div style="font-size:13.0px"><span>font-size:13.0px</span></div>

<div> </div>

Change font size in a div

As mentioned in the comments the issue is with the var $affectedElements = $("#bodytext"); selector. This selector is only selecting the blockquote element, because it is the only direct sibling of the #bodytext element.

This means you are only changing the font size of the blockquote element. The dom of a browser has a cascading effect, which CSS adheres to. Therefore if you apply a font size of 13px to the blockquote element, but then apply an inline style further down in the dom to one of the blockquote elements siblings then that inline style will take precedence.

What I have done below is add a * selector to the $("#bodytext") selector, which will select all the elements inside of the #bodytext. I have done this to show that the issue is with the selector. However I would recomend thinking of a better way of selecting the specific elements you need or removing the inline styles in the HTML.

NOTE: The only changes I made to the HTML was to clean up the broken tags.

var $affectedElements = $("#bodytext *"); // Can be extended, ex. $("div, p, span.someClass")

// Storing the original size in a data attribute so size can be reset

$affectedElements.children().each( function(){

  var $this = $(this);

  $this.data("orig-size", $this.css("font-size") );

});

$("#btn-increase").click(function(){

  changeFontSize(1);

})

$("#btn-decrease").click(function(){

  changeFontSize(-1);

})

$("#btn-orig").click(function(){

  $affectedElements.children().each( function(){

        var $this = $(this);

        $this.css( "font-size" , $this.data("orig-size") );

   });

})

function changeFontSize(direction){

    $affectedElements.children().each( function(){

        var $this = $(this);

        $this.css( "font-size" , parseInt($this.css("font-size"))+direction );

    });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<button id="btn-decrease">A-</button>

<button id="btn-orig">A</button>

<button id="btn-increase">A+</button>

<div id="bodytext">

  

<blockquote>

    <h1 dir="ltr" align="center">

    <span style="font-size: 35pt" lang="ar-sa">title page</span></h1>  

  <p class=MsoNormal dir=ltr style='text-align:justify'><b>

  <font size="5">4. some text: " more text</font></b><font size="5"><span

lang=ar-eg> <b>more words</b></span><b>"</b></font><b><font size="5">[6].</font></b></p>

  <p class=MsoNormal dir=ltr style='text-align:justify'>

  <font size="5">new sentence..................</font>

  <font style="font-size: 18pt" SIZE="5">

  <a style="font-size:18pt;" href="http://example.com/file.html">a link</a></font><font size="5">texttexttext.......</font><font SIZE="5" face="Times New Roman">

  <span lang="AR-EG" style="font-size: 18pt; ">

  <a href="http://www.example.com/file.php">a link</a></span></font><font size="5">words words words words words ..</font></p>

  <h2 dir=ltr> </h2>

 <h2 dir=ltr><b><span style="font-size: 22pt; font-style: normal">

 <a name="text">other text</a></span></b></h2>

  <p class=MsoNormal dir=ltr style='text-align:justify'><b>

  <font size="5">"final words....</font></b><font size="5"><b>"</b></font><b><font size="5">[7].</font></b></p>

  </blockquote>   

</div>

jQuery CSS font-size

You want .filter(). For most elements this should work:

$(".myClass").filter(function()
{
    var el = $(this);
    el.css("white-space", "nowrap");
    var lineHeight = el.height();
    el.css("white-space", "");
    return el.height() > lineHeight;
}).css("font-size", "10pt");

Dealing with tables, all the cells in a row have the same height, so check the value of a child element. Eg, wrap everything in a div. However, if you must act on a <td> directly:

$(function()
{
    $(".myClass td").filter(function()
    {
        var el = $(this);
        el.closest("tr").andSelf().css("white-space", "nowrap");
        var lineHeight = el.height();
        el.css("white-space", "normal");
        var textWraps = el.height() > lineHeight;
        el.closest("tr").andSelf().css("white-space", "");
        return textWraps;
    }).css("font-size", "10pt");
});

Change font of div css

Try this to change each div font by without modifying the html. The idea is to target each give using adjacent sibling eg h2 + div , h2 + div + div, h2 + div + div + div etc. like so

    

    *

    {

     background-color: #ffcc66;

     color: #003399;

     font-family: Comic Sans MS;

     font-size: 14px;

    }

    a

    {

     color: #CC0000;

     text-decoration: none;

    }

    a:visited

    {

     color: #CC0000;

    }

    a:hover

    {

     color: #006600;

    }

    a:active

    {

     color: #CC0000;

    }

    

    h1

    {

     background-color: #3399FF;

     text-align: center;

     margin: 35px;

     border-bottom-style: solid;

     border-bottom-width: thin;

     border-bottom-color: #000033;

    }

    

    h2

    {

     color: red;

     font-weight: bold;

    }

    

    p

    {

     font-family: Georgia;

     color: #003300;

     padding: 15px;

    }

    

    li

    {

     font-family: Arial;

     background-color: #808080;

     font-weight: bold;

     font-size: 18px;

    }

    

    *

{

 background-color: #ffcc66;

 color: #003399;

 font-family: Comic Sans MS;

 font-size: 14px;

}

a

{

 color: #CC0000;

 text-decoration: none;

}

a:visited

{

 color: #CC0000;

}

a:hover

{

 color: #006600;

}

a:active

{

 color: #CC0000;

}

h1

{

 background-color: #3399FF;

 text-align: center;

 margin: 35px;

 border-bottom-style: solid;

 border-bottom-width: thin;

 border-bottom-color: #000033;

}

h2

{

 color: red;

 font-weight: bold;

}

p

{

 font-family: Georgia;

 color: #003300;

 padding: 15px;

}

li

{

 font-family: Arial;

 background-color: #808080;

 font-weight: bold;

 font-size: 18px;

}

h2 + div{

  font-family: Arial;

}

h2 + div + div{

  font-family:  Sakkal Majalla;

}

h2 + div + div + div{

  font-family: Batang;

}

    

    

    <html>

    <head>

    <meta charset="utf-8">

    <title>Test</title>

    <link rel="stylesheet" type="text/css" href="styles.css"/>

    </head>

    

    <body>

    

    <h1>Formatting with CSS</h1>

    

    <p>This is a basic web page to be used as a test for applying  CSS formatting rules.</p>

    

    <h2>Hyperlinks</h2>

    <a href="http://www.google.com/">Link to the Google website</a>

    <br/>

    <a href="http://www.google.com/">Link to the google page on CSS</a>

    

    <h2>List Items</h2>

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 2</li>

    </ul>

    

    <h2>Class examples</h2>

    <div>Example 1 Class CSS</div>

    <div>Example 2 Class CSS</div>

    <div>Example 3 Class CSS</div>

    </body>

    </html>

    

---

Related Topics