Cách đặt độ rộng tab (tabSize) bằng JavaScript

Thuộc tính tabSize kiểm soát độ rộng (số ký tự khoảng trắng) của ký tự tab (\t) khi hiển thị trong phần tử <pre> hoặc các phần tử có white-space: pre/pre-wrap. Trên Firefox, cần tiền tố MozTabSize.

Ví dụ minh họa

Mã sau đặt tab-size = 16 khoảng trắng cho khối <pre> khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <pre id="t1">
	Đây là văn bản demo		
  </pre>
  <p>Thay đổi tab-size</p>
  <button onclick="updateTabSize()">Cập nhật tab-size</button>
  <script>
    function updateTabSize() {
      const el = document.getElementById("t1");
      // Firefox (cũ) cần tiền tố
      el.style.MozTabSize = "16";
      // Chuẩn hiện đại
      el.style.tabSize = "16";
    }
  </script>
</body>
</html>

Lưu ý

• Chỉ hoạt động trên pre/pre-wrap: Phần tử phải có white-space: pre, pre-wrap, hoặc pre-line (hoặc là thẻ <pre>).
• Giá trị: Số nguyên dương (0, 2, 4, 8...). Mặc định thường là 8.
• Firefox: Từ Firefox 59+ hỗ trợ tabSize chuẩn, không cần MozTabSize. Giữ tiền tố để tương thích phiên bản cũ.
• Không kế thừa: tabSize không kế thừa, phải set trực tiếp trên phần tử chứa tab.

Ví dụ thực tế: hiển thị code đẹp

function formatCode(code) {
  const pre = document.createElement("pre");
  pre.style.tabSize = "4";
  pre.style.whiteSpace = "pre-wrap";
  pre.textContent = code;
  return pre;
}