Как вычислить длину столбца в таблице при разной ширине символов?

Как вычислить длину столбца в таблице при разной ширине символов?

Это задача типографики и вёрстки. Проблема в том, что разные символы занимают разное место: буква «i» уже, чем буква «m». Шрифты также могут быть пропорциональными (разная ширина) или моноширинными (одинаковая ширина).

Проблема

<!-- Если просто считать количество символов, получится неправильно -->
<table>
  <tr>
    <td>i</td>     <!-- 1 символ, но очень узкий -->
    <td>mmmm</td>  <!-- 4 символа, но может быть шире -->
  </tr>
</table>

Решение 1: Canvas API (самый точный способ)

Используем Canvas для измерения реальной ширины текста:

function getTextWidth(text, font) {
  // Создаём canvas
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // Устанавливаем шрифт
  ctx.font = font; // например: '16px Arial'
  
  // Измеряем ширину
  return ctx.measureText(text).width;
}

// Использование
const width = getTextWidth('Hello', '16px Arial');
console.log(`Ширина текста: ${width}px`);

// С разными шрифтами
const narrowFont = getTextWidth('i', '16px Arial');  // ~3px
const wideFont = getTextWidth('m', '16px Arial');    // ~10px

Оптимизированная версия с кешированием:

const measureTextCache = new Map();

function getTextWidth(text, font) {
  const cacheKey = `${text}|${font}`;
  
  if (measureTextCache.has(cacheKey)) {
    return measureTextCache.get(cacheKey);
  }
  
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  
  const width = ctx.measureText(text).width;
  measureTextCache.set(cacheKey, width);
  
  return width;
}

Решение 2: DOM элемент

Создаём скрытый DOM элемент и измеряем его ширину:

function getTextWidth(text, font) {
  const element = document.createElement('div');
  element.style.position = 'absolute';
  element.style.visibility = 'hidden';
  element.style.font = font;
  element.textContent = text;
  
  document.body.appendChild(element);
  const width = element.offsetWidth;
  document.body.removeChild(element);
  
  return width;
}

// Использование
const width = getTextWidth('Hello', '16px Arial');
console.log(width);

Оптимизированная версия (переиспользование элемента):

let textMeasure = null;

function getTextWidth(text, font) {
  if (!textMeasure) {
    textMeasure = document.createElement('div');
    textMeasure.style.position = 'absolute';
    textMeasure.style.visibility = 'hidden';
    document.body.appendChild(textMeasure);
  }
  
  textMeasure.style.font = font;
  textMeasure.textContent = text;
  
  return textMeasure.offsetWidth;
}

Решение 3: getBoundingClientRect() — наиболее точный

function getTextWidth(text, font) {
  const span = document.createElement('span');
  span.style.font = font;
  span.style.visibility = 'hidden';
  span.textContent = text;
  
  document.body.appendChild(span);
  const width = span.getBoundingClientRect().width;
  document.body.removeChild(span);
  
  return width;
}

// Это учитывает даже букву-лигатуры и специальные символы

Решение 4: Для таблиц (практический пример)

interface ColumnWidth {
  columnIndex: number;
  minWidth: number;
  maxWidth: number;
  autoWidth: number;
}

function calculateColumnWidths(
  data: string[][],
  font: string = '16px system-ui'
): ColumnWidth[] {
  const widths: ColumnWidth[] = [];
  
  // Определяем количество колонок
  const columnCount = data[0].length;
  
  for (let col = 0; col < columnCount; col++) {
    let maxWidth = 0;
    
    // Проверяем все значения в колонке
    for (let row = 0; row < data.length; row++) {
      const cellContent = data[row][col];
      const cellWidth = getTextWidth(cellContent, font);
      
      maxWidth = Math.max(maxWidth, cellWidth);
    }
    
    widths.push({
      columnIndex: col,
      minWidth: maxWidth,
      maxWidth: maxWidth * 1.1, // 10% padding
      autoWidth: maxWidth + 32  // 16px padding с каждой стороны
    });
  }
  
  return widths;
}

// Использование
const tableData = [
  ['Name', 'Email', 'Age'],
  ['John Doe', 'john@example.com', '28'],
  ['Jane', 'jane@example.com', '35']
];

const widths = calculateColumnWidths(tableData);
widths.forEach(col => {
  console.log(`Column ${col.columnIndex}: ${col.autoWidth}px`);
});

Решение 5: CSS способ (auto-width)

Дайте таблице автоматическую ширину:

<style>
  /* Таблица сама определит ширину колонок -->
  table {
    table-layout: auto;
    width: auto;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 8px 16px;
    border: 1px solid #ccc;
    white-space: nowrap; /* Без переносов -->
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

Решение 6: Для React компонентов

import { useEffect, useRef, useState } from 'react';

interface ColumnWidth {
  [key: number]: number;
}

function useTableColumnWidths() {
  const tableRef = useRef<HTMLTableElement>(null);
  const [widths, setWidths] = useState<ColumnWidth>({});
  
  useEffect(() => {
    if (!tableRef.current) return;
    
    const calculateWidths = () => {
      const rows = tableRef.current?.querySelectorAll('tr');
      const columnWidths: ColumnWidth = {};
      
      rows?.forEach((row) => {
        const cells = row.querySelectorAll('th, td');
        cells.forEach((cell, index) => {
          const width = (cell as HTMLElement).offsetWidth;
          columnWidths[index] = Math.max(
            columnWidths[index] || 0,
            width
          );
        });
      });
      
      setWidths(columnWidths);
    };
    
    // Рассчитать после рендера
    calculateWidths();
    
    // Пересчитать при изменении окна
    window.addEventListener('resize', calculateWidths);
    return () => window.removeEventListener('resize', calculateWidths);
  }, []);
  
  return { tableRef, widths };
}

// Использование в компоненте
function Table({ data }: { data: string[][] }) {
  const { tableRef, widths } = useTableColumnWidths();
  
  return (
    <table ref={tableRef}>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cell, colIndex) => (
              <td key={colIndex} style={{ width: widths[colIndex] }}>
                {cell}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Решение 7: Monospace шрифты (упрощённо)

Если используешь моноширинный шрифт, все символы имеют одинаковую ширину:

function getTextWidthMonospace(text, characterWidth) {
  return text.length * characterWidth;
}

// Или просто в CSS
.table {
  font-family: 'Monaco', 'Courier New', monospace;
}

// Теперь все колонки будут выравнены

Практический пример: Полная таблица с правильной шириной

function AutoWidthTable({ 
  data, 
  headers 
}: { 
  data: string[][], 
  headers: string[] 
}) {
  const [widths, setWidths] = useState<number[]>([]);
  const tableRef = useRef<HTMLTableElement>(null);
  
  useEffect(() => {
    if (!tableRef.current) return;
    
    const cells = tableRef.current.querySelectorAll('th, td');
    const newWidths: number[] = [];
    
    cells.forEach((cell, index) => {
      const width = (cell as HTMLElement).offsetWidth;
      if (!newWidths[index % headers.length]) {
        newWidths[index % headers.length] = width;
      } else {
        newWidths[index % headers.length] = Math.max(
          newWidths[index % headers.length],
          width
        );
      }
    });
    
    setWidths(newWidths);
  }, [headers]);
  
  return (
    <table ref={tableRef} style={{ tableLayout: 'fixed', width: '100%' }}>
      <thead>
        <tr>
          {headers.map((header, index) => (
            <th key={index} style={{ width: widths[index] }}>
              {header}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cell, colIndex) => (
              <td key={colIndex} style={{ width: widths[colIndex] }}>
                {cell}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Выводы

Выбор метода зависит от задачи:

1. Canvas API — самый точный, быстрый, но нужна ширина шрифта
2. DOM элемент — универсальный, учитывает все CSS
3. getBoundingClientRect() — очень точный, учитывает преобразования
4. CSS auto — самый простой, браузер сам всё определит
5. React хук — удобен для React компонентов
6. Monospace шрифт — упрощённое решение

Лучшая практика:

• Для большинства случаев используй table-layout: auto в CSS
• Если нужна точность, используй Canvas API
• Для React используй кастомные хуки
• Не забывай кешировать результаты измерений для производительности