wp_get_computed_fluid_typography_value() │ WP 6.1.0

Вычисляет fluid значение типографики в виде CSS-функции clamp().

Для вычисления нужно указать минимальную и максимальную ширину вьюпорта, а также минимальный и максимальный размер шрифта.

Функция нормализует переданные размеры и на основе линейной интерполяции собирает формулу вида clamp(min, preferred, max) для использования в CSS-свойстве font-size.

Функция является внутренней, используется ядром при вычислении флюидных значений в theme.json.

Внутренняя функция — эта функция рассчитана на использование самим ядром. Не рекомендуется использовать эту функцию в своем коде.

1 раз — 0.000072 сек (очень быстро) | 50000 раз — 0.33 сек (очень быстро)

Хуков нет.

Возвращает

Строку|null.

  • string - размер шрифта с использование clamp().

  • null - возвращается, если некорректно указаны параметры, либо расчёт приводит к делению на ноль.

Использование

wp_get_computed_fluid_typography_value( $args );
$args(array)

Параметры для вычисления clamp() значения:

  • minimum_viewport_width(строка)
    Минимальный вьюпорт - от которого должен увеличиваться размер.

  • maximum_viewport_width(строка)
    Максимальный вьюпорт - до которого должен увеличиваться размер.

  • minimum_font_size(строка)
    Минимальный размер шрифта. Например, 16px, 1rem.

  • maximum_font_size(строка)
    Максимальный размер шрифта.

  • scale_factor(число)
    Множитель, управляет тем, насколько быстро шрифт растёт между заданными границами. По умолчанию: 1 - плавное изменение от границе к границе.

Примеры

#1 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)

#2 Использование с запасным статичным размером

В этом примере показывается, как можно подстраховаться на случай, если функция вернёт null, и вывести статичный размер шрифта вместо fluid-формулы.

$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 ); ?>">
	Текст абзаца с плавным или статичным размером шрифта.
</p>

Список изменений

С версии 6.1.0 Введена.
С версии 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values.
С версии 6.5.0 Returns early when min and max viewport subtraction is zero to avoid division by zero.

Код wp_get_computed_fluid_typography_value() WP 6.9.1

wp-includes/block-supports/typography.php 
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)";
}

Прочие функции