Mô hình định dạng trực quan (Visual Formatting Model) trong CSS

Mô hình định dạng trực quan (Visual Formatting Model) của CSS là một thuật toán xử lý và chuyển đổi từng phần tử của tài liệu để tạo ra một hoặc nhiều hộp (boxes) tuân theo CSS Box Model.

Bố cục của các hộp được tạo ra phụ thuộc vào một số thuộc tính:

• Kích thước (Dimensions)
• Loại hộp (Type) – atomic inline-level, block, inline, hoặc inline-block
• Định vị (Positioning) – absolute, float, hoặc normal
• Mối quan hệ với các phần tử con và phần tử láng giềng
• Thông tin bên ngoài – chiều rộng/cao của viewport, hình ảnh, v.v.

Tạo hộp (Box Generation) từ các phần tử đã xử lý

• Block level
  • Các phần tử này ép buộc ngắt dòng trước và sau chính chúng, chiếm toàn bộ chiều rộng khả dụng dù nội dung không yêu cầu.
  • Ví dụ: Divisions (<div>), Heading (<h1> đến <h6>), v.v.
• Inline level
  • Các phần tử này KHÔNG ép buộc ngắt dòng trước và sau, chỉ chiếm chiều rộng cần thiết cho nội dung.
  • Ví dụ: Spans (<span>), Strong element (<strong>)

Ví dụ 1: Tạo hộp cấp khối (block level box generation)

<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
  #headingPreview h2 { background-color: #DC3545; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML Heading</legend>
      <input type="text" id="textSelect" placeholder="Type Heading Here...">
      <div id="radioBut">
        <label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked>
        <label>H2</label><input class="radio" type="radio" name="heading" value="h2">
        <label>H3</label><input class="radio" type="radio" name="heading" value="h3">
        <label>H4</label><input class="radio" type="radio" name="heading" value="h4">
        <label>H5</label><input class="radio" type="radio" name="heading" value="h5">
        <label>H6</label><input class="radio" type="radio" name="heading" value="h6">
      </div>
      <div>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
      <input type="button" onclick="changeHeading()" value="Preview">
    </fieldset></form>
  <script>
    var textSelect = document.getElementById("textSelect");
    var headingPreview = document.getElementById("headingPreview");
    function changeHeading() {
      if (textSelect.value === '') headingPreview.innerHTML = 'Write a Heading';
      else {
        for (var i = 0; i < 6; i++) {
          var radInp = document.getElementsByClassName('radio')[i];
          if (radInp.checked === true && textSelect.value !== '') {
            headingPreview.innerHTML = '<' + radInp.value + '>' + textSelect.value + '';
            headingPreview.innerHTML += '<' + radInp.value + '>' + textSelect.value + '';
          }
        }
      }
    }
  </script></body></html>

Kết quả

Sau khi nhấn nút 'Preview' với ô văn bản trống:

Sau khi nhấn 'Preview' với ô văn bản không trống và radio 'h2' được chọn:

Ví dụ 2: Tạo hộp cấp dòng (inline level box generation)

<!DOCTYPE html>
<html>
<head>
<title>em element</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
  em { background-color: #FF8A00; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>em-element</legend>
      <label for="textSelect">Formatter: </label>
      <input id="textSelect" type="text" placeholder="John Doe">
      <input type="button" onclick="convertItalic()" value="Check">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function convertItalic() {
      for (i = 0; i < 2; i++) {
        var italicObject = document.createElement("EM");
        var italicText = document.createTextNode(textSelect.value);
        italicObject.appendChild(italicText);
        divDisplay.appendChild(italicObject);
      }
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn nút 'Check':

Sau khi nhấn nút 'Check':