WordPress Version: 6.5
/**
* Internal implementation of CSS clamp() based on available min/max viewport
* width and min/max font sizes.
*
* @since 6.1.0
* @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.
* @access private
*
* @param 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.
* }
* @return string|null A font-size value using clamp() on success, otherwise null.
*/
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;
// 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 = isset($minimum_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})";
}