wp_get_computed_fluid_typography_value() │ WP 6.1.0

Calculates a fluid typography value as a CSS clamp() function.

To calculate it, you need to specify the minimum and maximum viewport width, as well as the minimum and maximum font size.

The function normalizes the provided sizes and, based on linear interpolation, assembles a formula of the form clamp(min, preferred, max) for use in the CSS property font-size.

The function is internal and is used by the core when calculating fluid values in theme.json.

Internal function — this function is designed to be used by the kernel itself. It is not recommended to use this function in your code.

1 time — 0.000072 sec (very fast) | 50000 times — 0.33 sec (very fast)

No Hooks.

Returns

String|null.

  • string - the font size using clamp().

  • null - returned if the parameters are specified incorrectly, or if the calculation results in division by zero.

Usage

wp_get_computed_fluid_typography_value( $args );
$args(array)

Parameters for calculating the clamp() value:

  • minimum_viewport_width(string)
    Minimum viewport— from which the size should start increasing.

  • maximum_viewport_width(string)
    Maximum viewport— up to which the size should increase.

  • minimum_font_size(string)
    Minimum font size. For example, 16px, 1rem.

  • maximum_font_size(string)
    Maximum font size.

  • scale_factor(integer)
    A multiplier that controls how quickly the font grows between the specified limits. Default: 1 — smooth change from boundary to boundary.

Examples

0

#1 Using a fallback static size

This example shows how you can hedge in case the function returns null, and display a static font size instead of a fluid formula.

$args = [
	'minimum_viewport_width' => '360px',
	'maximum_viewport_width' => '1440px',
	'minimum_font_size'      => '1.2rem',
	'maximum_font_size'      => '2rem',
	'scale_factor'           => 0.9,
];

$fluid_font_size = wp_get_computed_fluid_typography_value( $args );

$font_size_css = $fluid_font_size ? $fluid_font_size : '1.6rem';
?>
<p style="font-size: <?php echo esc_attr( $font_size_css ); ?>">
	Paragraph text with a fluid or static font size.
</p>
0

#2 Demo 

$args = [
	'minimum_viewport_width' => '320px',
	'maximum_viewport_width' => '1200px',
	'minimum_font_size'      => '1rem',
	'maximum_font_size'      => '3rem',
	'scale_factor'           => 1,
];

echo wp_get_computed_fluid_typography_value( $args );
// clamp(1rem, 1rem + ((1vw - 0.2rem) * 3.636), 3rem)

$args['scale_factor'] = 2;
echo wp_get_computed_fluid_typography_value( $args );
// clamp(1rem, 1rem + ((1vw - 0.2rem) * 7.273), 3rem)

Changelog

Since 6.1.0 Introduced.
Since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values.
Since 6.5.0 Returns early when min and max viewport subtraction is zero to avoid division by zero.

wp_get_computed_fluid_typography_value() code WP 7.0.1

wp-includes/block-supports/typography.php 
function wp_get_computed_fluid_typography_value( $args = array() ) {
	$maximum_viewport_width_raw = $args['maximum_viewport_width'] ?? null;
	$minimum_viewport_width_raw = $args['minimum_viewport_width'] ?? null;
	$maximum_font_size_raw      = $args['maximum_font_size'] ?? null;
	$minimum_font_size_raw      = $args['minimum_font_size'] ?? null;
	$scale_factor               = $args['scale_factor'] ?? null;

	// Normalizes the minimum font size in order to use the value for calculations.
	$minimum_font_size = wp_get_typography_value_and_unit( $minimum_font_size_raw );

	/*
	 * We get a 'preferred' unit to keep units consistent when calculating,
	 * otherwise the result will not be accurate.
	 */
	$font_size_unit = $minimum_font_size['unit'] ?? 'rem';

	// Normalizes the maximum font size in order to use the value for calculations.
	$maximum_font_size = wp_get_typography_value_and_unit(
		$maximum_font_size_raw,
		array(
			'coerce_to' => $font_size_unit,
		)
	);

	// Checks for mandatory min and max sizes, and protects against unsupported units.
	if ( ! $maximum_font_size || ! $minimum_font_size ) {
		return null;
	}

	// Uses rem for accessible fluid target font scaling.
	$minimum_font_size_rem = wp_get_typography_value_and_unit(
		$minimum_font_size_raw,
		array(
			'coerce_to' => 'rem',
		)
	);

	// Viewport widths defined for fluid typography. Normalize units.
	$maximum_viewport_width = wp_get_typography_value_and_unit(
		$maximum_viewport_width_raw,
		array(
			'coerce_to' => $font_size_unit,
		)
	);
	$minimum_viewport_width = wp_get_typography_value_and_unit(
		$minimum_viewport_width_raw,
		array(
			'coerce_to' => $font_size_unit,
		)
	);

	// Protects against unsupported units in min and max viewport widths.
	if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
		return null;
	}

	// Calculates the linear factor denominator. If it's 0, we cannot calculate a fluid value.
	$linear_factor_denominator = $maximum_viewport_width['value'] - $minimum_viewport_width['value'];
	if ( empty( $linear_factor_denominator ) ) {
		return null;
	}

	/*
	 * Build CSS rule.
	 * Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
	 */
	$view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
	$linear_factor          = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $linear_factor_denominator ) );
	$linear_factor_scaled   = round( $linear_factor * $scale_factor, 3 );
	$linear_factor_scaled   = empty( $linear_factor_scaled ) ? 1 : $linear_factor_scaled;
	$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor_scaled)";

	return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
}

Other Functions