Định dạng HTML
Thụt lề một tài liệu HTML mà không thay đổi cách nó hiển thị, hoàn toàn trong trình duyệt.
Chạy hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên, ghi log hay lưu trữ.
Dán một trang đã minify hoặc thụt lề lộn xộn và đọc nó cho đàng hoàng. Việc định dạng diễn ra trong trình duyệt của bạn, và tài liệu đi ra được hiển thị y hệt tài liệu đã đi vào.
Cách hoạt động
Tài liệu được đọc thành một cây — đó là nơi xử lý các phần tử rỗng, nội dung của script và style và các thẻ đóng không bắt buộc của HTML — rồi được viết lại với cách thụt lề mới.
Chỗ ngắt dòng được quyết định bởi cách trình duyệt đọc khoảng trắng, không phải bởi điều gì trông đẹp mắt. Mọi chuỗi khoảng trắng liên tiếp đều được hiển thị thành một dấu cách, nên biến một dấu cách thành một chỗ xuống dòng kèm thụt lề không thay đổi gì. Tạo ra khoảng trắng ở chỗ vốn không có thì có: đó là điều biến hai phần tử inline sát nhau thành hai phần tử cách nhau một dấu cách.
Vì vậy khoảng trắng chỉ được thêm hoặc bỏ giữa các hộp block và ở rìa của chúng, nơi trình duyệt không hiển thị khoảng trắng nào. Đó là ngoại lệ cho phép mở ra một trang đã minify, và cũng là lý do một chuỗi phần tử inline vẫn nằm nguyên trên dòng cũ của nó.
Một thẻ mà công cụ định dạng chưa từng biết đến được xử lý như inline, vì đó là lựa chọn không thêm khoảng trắng và do đó không thể làm thay đổi trang.
Ví dụ
| Trường hợp | Dữ liệu nhập | Kết quả |
|---|---|---|
| Một danh sách không thụt lề | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Câu hỏi thường gặp
Trang của tôi có bị gửi đi đâu không?
Không. Công cụ định dạng là JavaScript chạy trên trang này. Không có gì được tải lên, ghi log hay lưu trữ: bạn có thể ngắt mạng và công cụ vẫn hoạt động.
Vì sao các phần tử inline của tôi vẫn nằm trên một dòng?
Vì di chuyển chúng sẽ làm thay đổi trang của bạn. Khoảng trắng giữa hai hộp inline được hiển thị thành một dấu cách, nên đặt <span>a</span><span>b</span> trên hai dòng sẽ chèn vào giữa chúng một khoảng cách vốn không có. Gần như mọi công cụ định dạng vẫn làm vậy; công cụ này thì không.
Nó có tự đóng các thẻ chưa đóng của tôi không?
Không. Nó hiểu rằng một mục danh sách thứ hai sẽ đóng mục thứ nhất, nên nó thụt lề danh sách của bạn đúng cách, nhưng nó viết lại đúng những thẻ bạn đã viết. Thêm một thẻ đóng là sửa mã đánh dấu của bạn chứ không phải dàn trang, và chỗ chính xác mà thẻ đó nên nằm không phải lúc nào cũng hiển nhiên.
Nó có kiểm tra tính hợp lệ của HTML không?
Không. Nó không có lược đồ, không có quy tắc về phần tử nào được chứa phần tử nào, và không có ý kiến gì về các thuộc tính của bạn. Thứ duy nhất nó từ chối là một thẻ, một chú thích hoặc một khối script không được đóng, vì từ chỗ đó trở đi nó không còn phân biệt được mã đánh dấu với văn bản.
Còn script và style của tôi thì sao?
Chúng được giữ nguyên từng byte. Bên trong một script, dấu < là dấu nhỏ hơn chứ không phải phần mở đầu của một thẻ, và bên trong <pre> hay <textarea> thì từng dấu cách là của bạn. Bốn phần tử đó được giữ nguyên y như cũ. Nếu bạn muốn định dạng chính script hoặc stylesheet, công cụ định dạng CSS ở ngay bên cạnh.
Cần biết
- Tài liệu đi ra được hiển thị giống tài liệu đã đi vào. Điều này được các bài kiểm thử trên một tập mẫu khẳng định thay vì để cho việc xem xét bằng mắt.
- Không có gì được bịa ra: không thẻ đóng nào được thêm, không thuộc tính nào được đặt lại dấu nháy, không thực thể nào được giải mã và không tên thẻ nào bị đổi chữ hoa/thường. Chỉ có khoảng cách giữa các thuộc tính thay đổi, vì nó không bao giờ được hiển thị.
- Độ rộng ngắt dòng quyết định một phần tử có nội dung inline được giữ trên một dòng hay được mở ra, nên một đoạn văn ngắn đọc thành một dòng còn một đoạn dài được ngắt tại những dấu cách vốn đã có.