wpseek.com
A WordPress-centric search engine for devs and theme authors



wp_get_computed_fluid_typography_value › WordPress Function

Since6.1.0
Deprecatedn/a
wp_get_computed_fluid_typography_value ( $args = array() )
Access:
  • private
Parameters:
  • (array) $args { Optional. An associative array of values to calculate a fluid formula for font size. Default is empty array. @type string $maximum_viewport_width Maximum size up to which type will have fluidity. @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity. @type string $maximum_font_size Maximum font size for any clamp() calculation. @type string $minimum_font_size Minimum font size for any clamp() calculation. @type int $scale_factor A scale factor to determine how fast a font scales within boundaries. }
    Required: No
    Default: array()
Returns:
  • (string|null) A font-size value using clamp() on success. Else, null.
Defined at:
Codex:

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



Source

function wp_get_computed_fluid_typography_value( $args = array() ) {
	$maximum_viewport_width_raw = isset( $args['maximum_viewport_width'] ) ? $args['maximum_viewport_width'] : null;
	$minimum_viewport_width_raw = isset( $args['minimum_viewport_width'] ) ? $args['minimum_viewport_width'] : null;
	$maximum_font_size_raw      = isset( $args['maximum_font_size'] ) ? $args['maximum_font_size'] : null;
	$minimum_font_size_raw      = isset( $args['minimum_font_size'] ) ? $args['minimum_font_size'] : null;
	$scale_factor               = isset( $args['scale_factor'] ) ? $args['scale_factor'] : null;

	// Grab the minimum font size and normalize it 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 = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';

	// Grab the maximum font size and normalize it 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,
		)
	);

	// Protect against unsupported units.
	if ( ! $maximum_font_size || ! $minimum_font_size ) {
		return null;
	}

	// Use 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,
		)
	);

	/*
	 * 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'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
	$linear_factor          = round( $linear_factor, 3 ) * $scale_factor;
	$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor)";

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