wp_get_computed_fluid_typography_value() │ WP 6.1.0

Internal implementation of CSS clamp() based on available min/max viewport width and min/max font sizes.

No Hooks.

Returns

String|null. A font-size value using clamp() on success, otherwise null.

Usage

wp_get_computed_fluid_typography_value( $args );

$args(array)

An associative array of values to calculate a fluid formula for font size.

Default: empty array

• maximum_viewport_width(string)
  Maximum size up to which type will have fluidity.

• minimum_viewport_width(string)
  Minimum viewport size from which type will have fluidity.

• maximum_font_size(string)
  Maximum font size for any clamp() calculation.

• minimum_font_size(string)
  Minimum font size for any clamp() calculation.

• scale_factor(int)
  A scale factor to determine how fast a font scales within boundaries.

Changelog

wp_get_computed_fluid_typography_value() wp get computed fluid typography value code ^{WP 7.0}

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)";
}