Set different width and height to font in css/js

Question

I'm looking for a way to set different width and height separately based on viewport width and height. Is it possible in css or js?

It is certainly possible in js, but it depends on what you need exactly to determine if it can be done in CSS. Can you be more specific about your problem? Please show us code samples. — radiovisual
– radiovisual, Commented Dec 20, 2014 at 16:50
I'm trying to achieve a text which will stay in the same proportions to div in which the text is. Not working example here: jsfiddle.net/s3wabLkL/1 — Luke
– Luke, Commented Dec 20, 2014 at 16:52
Looks like the link that @Musa supplied could be the answer for you. — radiovisual
– radiovisual, Commented Dec 20, 2014 at 16:55
@Musa font-size by viewport units will not keep the proportions. It's scaling only by width or only by height. I've been looking for solution for 4 hours. — Luke
– Luke, Commented Dec 20, 2014 at 16:56

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

For a JS solution, you can use the FlowType.js library.

It will allow you to quickly and easily control the text elements on your page relative to the size of their containing div.

Your example could be setup like this:

$(document).ready(function(){

    // customize the options you pass into the
    // flowtype function in order to get the effects you want
    $('.text_block').flowtype({
     minimum   : 500,
     maximum   : 1200,
     minFont   : 12,
     maxFont   : 40,
     fontRatio : 30
    });
    
});

This example uses jQuery to ensure that all assignments via flowtype are only assigned after the page has loaded.

To activate flowtype, you just need to put this call somewhere before your closing <body> tag:

<script> $('.text_block').flowtype(); </script>

See the flowtype.js website for more information on how to install flowtype, and how to configure it.

Here is a jsfiddle showing your example with the flowtype library assignments.

Hope this helps!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 20, 2014 at 17:16

radiovisual

6,4681 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

radiovisual Over a year ago

You can customize use the flowtype configurations to get the effect you are looking for.

radiovisual Over a year ago

Glad to hear it! Happy coding! =)

Collectives™ on Stack Overflow

Set different width and height to font in css/js

1 Answer 1

For a JS solution, you can use the FlowType.js library.

Here is a jsfiddle showing your example with the flowtype library assignments.

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

For a JS solution, you can use the FlowType.js library.

Here is a jsfiddle showing your example with the flowtype library assignments.

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related