scale()

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a data type.

Try it

This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation).

When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. A negative value results in a point reflection in that dimension. The value 1 has no effect.

Note: The scale() function only scales in 2D. To scale in 3D, use scale3d() instead.

Syntax

The scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.

Values

Cartesian coordinates on ℝ^2	Homogeneous coordinates on ℝℙ^2	Cartesian coordinates on ℝ^3	Homogeneous coordinates on ℝℙ^3
( sx 0 0 sy )	( sx 0 0 0 sy 0 0 0 1 )	( sx 0 0 0 sy 0 0 0 1 )	( sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 )
	[sx 0 0 sy 0 0]

Accessibility concerns

Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide.

Also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

Источник

Css scale text to fit on one line

Here’s an example: Solution: You can use as a unit to set the font size of the text, and this will make it resize according to screen width. for example: on #main-text will give you the result below No it is not actually possible to scale a font size according to available space calculated on ‘container width and how many characters are in container’ with only .css Solution: There was a popular jQuery library that can be used for this, I believe it’s simply called Fit Text.

Keep text on one line and scale font

I know this is 4 years late,(This is for people searching this problem later on, as this was my number one hit on google) but I was able to do a small work around with . I am not sure if this was back then. but for me personally, I set the vw of my text (with a little trial and error) to find the size I needed and stuck with it. It scales perfectly now. I guess you can come into issues with REALLY big screens and possibly mobile if the text becomes TOO small. But with just that one line of CSS it worked completely for me.

No it is not actually possible to scale a font size according to available space calculated on ‘container width and how many characters are in container’ with only .css

CSS getting text in one line rather than two, The best way to use is white-space: nowrap; This will align the text to one line

How to keep text on one line using css or javascript

There was a popular jQuery library that can be used for this, I believe it’s simply called Fit Text.

It will automatically resize text so that it will fit on one line within its parent container.

A quick Google search turned up the following options:

Text-size-adjust — CSS: Cascading Style Sheets, 7 days ago · The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore

How to fit text in line?

You can use a simply div setting your personal width, inside set your text, in css use

 display: flex; flex-wrap: wrap; 

That way the text will respect your div width and brake line in your text when necessary

Hope this answer will satisfy your question. The resizing part, which is the most important, is creditted to Jan Küster, with «Make text fit its parent size using JavaScript» article that you can find online.

document.getElementsByTagName("input")[0].onkeyup = execute; function execute() < let value = document.getElementsByTagName("input")[0].value; let words = value.split(" "); var html = ""; for (var i = 0; i < words.length; i++) < html += ' 
'; document.getElementsByClassName("parent")[0].innerHTML = html; > resizeText(< elements: document.querySelectorAll('.text'), step: 0.25 >) > // const isOverflown = (< clientWidth, clientHeight, scrollWidth, scrollHeight >) => (scrollWidth > clientWidth) || (scrollHeight > clientHeight) const resizeText = (< element, elements, minSize = 10, maxSize = 512, step = 1, unit = 'px' >) => < (elements || [element]).forEach(el =>< let i = minSize let overflow = false const parent = el.parentNode while (!overflow && i < maxSize) < el.style.fontSize = `$$` overflow = isOverflown(parent) if (!overflow) i += step > // revert to last state where no overflow happened el.style.fontSize = `$$` >) >

body < background: #A33; >.parent < margin: 2%; width: 150px; height: auto; min-height: 50px; padding: 15px; color: white; display: block; >.text-container < width: 100%; height: 100%; >.text

You could check out Bootstrap 5, they now have responsive text incorporated.

You could also use media queries that change the text size when the screen size is smaller or larger:

/* If the screen size is 601px wide or more, set the font-size of div to 80px */ @media screen and (min-width: 601px) < div.example < font-size: 80px; >> /* If the screen size is 600px wide or less, set the font-size of to 30px */ @media screen and (max-width: 600px) < div.example < font-size: 30px; >> 

A final option would be to use the viewport width as the font size. Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. Here’s an example:

Hello World
 
Resize the browser window to see how the font size scales.
 

CSS font-size-adjust property, By specifying the font-size-adjust property, the browser will adjust the font size to be the same regardless of the font family («verdana» has the aspect

Scale text without breaking it to next line

You can use vw as a unit to set the font size of the text, and this will make it resize according to screen width.

for example: font-size: 3.5vw; on #main-text will give you the result below

#main < position: relative; width: 100%; height: 100%; text-align: center; letter-spacing: 10px; >#main-text < z-index: 1; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 3.5vw; text-align: center; white-space: nowrap; >#name < font-weight: 900; >#description < font-weight: 400; >#arrow-downward < z-index: 1; position: fixed; bottom: 25px; left: 0; right: 0; margin: 0 auto; width: 24px; height: 24px; text-align: center; >#arrow-downward:hover < color: #777 !important; cursor: pointer; >.material-icons .md-24

Stretch text to fit width of div, Do you want to change the «spacing between the letters» (as in letter-spacing ) or the font-size ? · The spacing and font size can be adjusted to ensure the

Источник

Scale a text to fit inside of an element

Let’s say that we want to scale a text inside a headline:

div id="headline">Hello Worlddiv>

First of all, we need to measure the width of element with its current font size and text content. For more information, you can take a look at this post.

const measureWidth = function(text, font)  
// Measure the width of given text for given font 
. 
>;

// Query the element
const ele = document.getElementById('headline');

// Get the styles
const styles = window.getComputedStyle(ele);

// Get the font size and font style
const font = styles.font;
const fontSize = parseInt(styles.fontSize);

const measured = measureWidth(ele.textContent, font);

Now we can calculate how much the element is scaled by comparing the measured width and the full width:

const scale = ele.clientWidth / parseFloat(measured);

Finally, we set the font size as the element scales up to full width:

const scaleFontSize = Math.floor(scale * fontSize);
ele.style.fontSize = `$scaleFontSize>px`;

Источник

text-size-adjust

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

/* Keyword values */ text-size-adjust: none; text-size-adjust: auto; /* value */ text-size-adjust: 80%; /* Global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: revert; text-size-adjust: revert-layer; text-size-adjust: unset; 

Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen’s width, the algorithm increases its text size, but without modifying the layout. The text-size-adjust property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.

Syntax

The text-size-adjust property is specified as none , auto , or a .

Values

Disables the browser’s inflation algorithm.

Enables the browser’s inflation algorithm. This value is used to cancel a none value previously set with CSS.

Enables the browser’s inflation algorithm, specifying a percentage value with which to increase the font size.

Formal definition

Initial value	auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).
Applies to	all elements
Inherited	yes
Percentages	yes, refer to the corresponding size of the text font
Computed value	as specified
Animation type	by computed value type

Formal syntax

Examples

Basic disabling usage

As hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a value of none:

p  -webkit-text-size-adjust: none; text-size-adjust: none; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 24, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник