← На главную
Серия практических разборов

Адаптивный текст — это читаемость

Адаптивная вёрстка HTML5-игры для Poki • Раздел 10 из 11

14. Адаптивный текст — это читаемость

Текст слоя завершения может стать слишком широким в вертикальной ориентации. Перед позиционированием я сбрасываю масштаб и проверяю границы текста:

private applyResponsiveTextScale(text: Text): void {
  if (this.node.screen.getOrientation() !== 'port') {
    return;
  }

  text.setScale(1, 1);
  const screenWidth = this.node.screen.getVirtualSize().width;
  const maxWidth = screenWidth * LevelCompletionOverlayComponent.PORT_TEXT_MAX_SCREEN_WIDTH_RATIO;
  const bounds = text.view.getLocalBounds();
  const width = Math.max(0, bounds.width);
  if (width <= 0 || width <= maxWidth) {
    return;
  }

  const scale = Math.max(0.01, maxWidth / width);
  text.setScale(scale, scale);
}

Это важно и для локализации. Строка, помещающаяся на одном языке, на другом может оказаться значительно длиннее.