Html scale text to window

How to Dynamically Scale Text Size Based on Browser Width

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

• vw (% of the viewport width)
• vh (% of the viewport height)
• vi (1% of the viewport size in the direction of the root element’s inline axis)
• vb (1% of the viewport size in the direction of the root element’s block axis)
• vmin (the smaller of vw or vh )
• vmax (the larger or vw or vh )

1 v* is equal to 1% of the initial containing block.

As you can see, when the viewport width increases, so do the font-size , without needing to use media queries.

These values are a sizing unit, just like px or em , so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you’ll likely need a fallback, such as:

p font-size: 16px; 
font-size: 4vw;
>

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here’s a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here’s an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed ‘molten leading’ to adjust the line-height as well. Molten Leading in CSS

Is it possible to dynamically scale text size based on browser width?

Set your font size when the window is resized with a little javascript. (I’ve used jQuery for convenience here:

$( document ).ready( function() var $body = $('body'); //Cache this for performance
 
var setBodyScale = function() var scaleSource = $body.width(), 
scaleFactor = 0.35, 
maxScale = 600, 
minScale = 30; //Tweak these values to taste
 
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
 
if (fontSize > maxScale) fontSize = maxScale; 
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
 
$('body').css('font-size', fontSize + '%'); 
>
 
$(window).resize(function() setBodyScale(); 
>);
 
//Fire it when the page first loads: 
setBodyScale(); 
>);

Because your font size is set in em’s (perfect) adjusting the percentage font-size of the body element acts as a universal ‘text zoom’. This will scale any text set in em’s — if you want to be more specific, you could set the percentage font-size on a that surrounds just the elements you want to scale.

Here’s a quick example: http://www.spookandpuff.com/examples/dynamicTextSize.html

Pure CSS to make font-size responsive based on dynamic amount of characters

Note: This solution changes based on viewport size and not the amount of content

I just found out that this is possible using VW units. They’re the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:

p font-size: 30px; 
font-size: 3.5vw;
>

Increase font-size to full width of screen

in gumroad its not a text its an image
but if you want to control your font size you can use
font-size: clamp(min size , 2vw, max size)
for example font-size: clamp(14px, 2vw, 20px)
you can read more here https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

Dynamically Resize Text Based on Container Width

window.resize is the correct event but it doesn’t fire on page-load. You can however just add .trigger(‘resize’) to your code to make it fire on page-load:

$(window).bind('resize', function() var containerSize = $('.container').width(), 
textPercentage = 0.17391304347826086956521739130435, /* 40/230 */ 
textRatio = containerSize * textPercentage, 
textEms = textRatio / 14;
 
$('.container h3').css(fontSize, textEms+"em");
>).trigger('resize');

You are going to want to run this code after document.ready to make sure the width you are getting for the container is correct. You could also place this code at the bottom of your HTML document (which you should do with or without the document.ready event handler) which will make sure the elements are available when you run this code:

//wait for `document.ready` to fire
$(function ()  
//cache the .container and H3 elements 
var $container = $('.container'), 
$h3 = $container.find('h3');
 
//bind event handler to `window.resize` 
$(window).bind('resize', function() 
//get the width of the container 
var containerSize = $container.width(), 
textPercentage = 0.17391304347826086956521739130435, /* 40/230 */ 
textRatio = containerSize * textPercentage, 
textEms = textRatio / 14;
 
$h3.css('fontSize', textEms+"em"); 
>).trigger('resize');
>);

Notice that I cached the H3 element(s) so it/then don’t have to be selected every resize event, because when you actually re-size your browser there are tons of these events that fire.

Источник

Css how to scale text to the right

Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). In this case, CSS pixel size would become much smaller than actual pixel size.

Getting the right font-size on every mobile device

Media queries won’t work. Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). Your goal is to have text that is at the same physical size across all devices that have same physical screen size regardless of pixel density.

Nowadays mobile phones are fitting Ultra HD resolutions in palm size screens whereas older phones had much lower pixel density.

There was no solution to this problem until recently. Recently CSS3 added support for what they call ‘Viewport Sized Typography’. It allows you to set the sizes of things relative to physical screen size. It is explained here.

Having text with same/similar sizes is desirable across devices and you don’t get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.

For example, iPhone 5 has 1136×640 physical pixels, but using chrome’s developer tools’ device toolbar you may see that some elements appear to be much larger than that (say 1300×900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.

If you don’t want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header):

If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.

You should be using Media Queries for different device widths.

@media only screen and (max-width: 768px) < b < font-size: 20px; >> @media only screen and (max-width: 320px) < b < font-size: 10px; >> 

How to scale from right to left in CSS?, By default the transform-origin is 50% 50% , you can reset that to 100% 50% , the first value 100% is x-offset, and the second value 50% is

How can you scale up css font-size as the container maintains aspect ratio?

The easiest solution is not to use font-size as hard coded pixels and to instead just use rem

CSS proportional transform (scale) of div including text, images to fit, All you really need to make this work is to start your CSS with a viewport-percentage unit as the font-size of a root element ( body , :root

CSS proportional transform (scale) of div including text, images to fit width

Yes — this kind of layout can be accomplished by using a foundation of viewport-percentage lengths ( vw or vh units) so that your page scales based on the size of your browser window.

All you really need to make this work is to start your CSS with a viewport-percentage unit as the font-size of a root element ( body , :root , or a wrapper div), and then style everything inside using em units — which will be based on the browser size.

One thing to keep in mind is that em units cascade based on the closest parent element with a font-size specified, so if you want a property to be sized based on the root 1vw without fonts affecting it, use rem units to size relative to the root.

Here’s a very rudimentary example of a layout that will grow/shrink depending on the window width, but maintain its exact layout and positioning regardless.

:root < font-size: 1vw; >.wrapper < display: flex; >.side < flex: 0 0 20rem; font-size: 3em; position: relative; >.side ul < padding-left: 2em; >.side img < position: absolute; top: 20rem; width: 16rem; left: 2rem; >.content

  
List item
  
List item
  
List item

 

Line-height — CSS: Cascading Style Sheets, 6 days ago · The line-height CSS property sets the height of a line box. It’s commonly used to set the distance between lines of text.

Transform scaleX and maintain fixed right position

I’ve made several improvements and here is the result: https://codepen.io/adelriosantiago/pen/RwryoLj?editors=1010

The issue was a missing transform-origin: top right; on the CSS of H2. This sets the origin point where all translations, scale and rotations will be made.

Also originwidth was needed to be calculated inside the mousemove event because it changes every time the transform is calculated.

A few other improvements made are:

• Only one mousemove event is now used.
• String template literals like scale($< scaleX >, $< scaleY >) are used so that it is easier to discern how the string is built.

This further version allows setting a size when the page is loaded first time and no mousemove event has happened yet: https://codepen.io/adelriosantiago/pen/vYLjybR?editors=0111

Text-transform — CSS: Cascading Style Sheets, 6 days ago · The text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or

Источник