XSL-FO Blocks (บล็อค)

ออกทั่วไปของ XSL-FO ตั้งอยู่ในบริเวณบล็อค

XSL-FO หน้า กระแส และบล็อค

เนื้อหา "บล็อค" จะ "ไหล" สู่ "หน้า" และหลังจากนั้นจึงออกทั่วไปที่สื่อ

XSL-FO ออกทั่วไปจะถูกแทรกเข้าไปในส่วนที่มีเนื้อหา <fo:block> ซึ่งแทรกเข้าไปในส่วน <fo:flow> ซึ่งแทรกเข้าไปในส่วน <fo:page-sequence> ดังนี้：

<fo:page-sequence>
  <fo:flow flow-name="xsl-region-body">
    <fo:block>
      <!-- Output goes here -->
    </fo:block>
  </fo:flow>
</fo:page-sequence>

คุณสมบัติของบล็อคพื้นที่

บล็อคเป็นลำดับของออกที่ตั้งอยู่ในกรอบสี่เหลี่ยมจัตุรัส:

<fo:block border-width="1mm">
บล็อคที่อยู่รอบนอกมีขอบหนา 1 มิลลิเมตร
</fo:block>

เนื่องจากเขตบล็อคเป็นกรอบสี่เหลี่ยมจัตุรัส ดังนั้นสามารถแบ่งสรรคุณสมบัติพื้นฐานหลายอย่างของเขตพื้นที่:

  • space before และ space after
  • margin
  • border
  • padding
  • space before

รูปภาพ:

space before และ space after เป็นเขตช่องว่างที่แบ่งออกบล็อคจากบล็อค

margin เป็นเขตช่องว่างที่อยู่ด้านนอกของบล็อค

border เป็นสี่เหลี่ยมจัตุรัสที่อยู่ด้านนอกของเขตดังกล่าว สี่ขอบของมันสามารถมีความกว้างต่างกัน มันยังสามารถถูกทิ้งเตาด้วยสีและภาพพื้นหลังต่างๆ

padding เป็นเขตที่ตั้งอยู่ระหว่างเขตเนื้อหาและขอบเขต

เนื้อหาเขตที่สามารถเก็บเนื้อหาที่แท้จริงได้ อย่างเช่นข้อความ ภาพ กราฟิก และอื่นๆ

ขอบหลักของบล็อค

  • margin
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

ขอบหลัก

属性รูปแบบของเขตขอบ:

  • border-style
  • border-before-style
  • border-after-style
  • border-start-style
  • border-end-style
  • border-top-style ((เท่ากับ border-before)
  • border-bottom-style (เท่ากับ border-after)
  • border-left-style (เท่ากับ border-start)
  • border-right-style (เท่ากับ border-end)

属性สีของเขตขอบ:

  • border-color
  • border-before-color
  • border-after-color
  • border-start-color
  • border-end-color
  • border-top-color (เท่ากับ border-before)
  • border-bottom-color (เท่ากับ border-after)
  • border-left-color (等同于 border-start)
  • border-right-color (等同于 border-end)

边框宽度属性:

  • border-width
  • border-before-width
  • border-after-width
  • border-start-width
  • border-end-width
  • border-top-width (等同于 border-before)
  • border-bottom-width (等同于 border-after)
  • border-left-width (等同于 border-start)
  • border-right-width (等同于 border-end)

块填充

  • padding
  • padding-before
  • padding-after
  • padding-start
  • padding-end
  • padding-top (等同于 padding-before)
  • padding-bottom (等同于 padding-after)
  • padding-left (等同于 padding-start)
  • padding-right (等同于 padding-end)

块背景

  • background-color
  • background-image
  • background-repeat
  • background-attachment (scroll 或者 fixed)

块样式属性：

块是可被单独样式化的输出序列：

<fo:block
  font-size="12pt"
  font-family="sans-serif">
This block of output will be written in a 12pt sans-serif font.
</fo:block>

字体属性:

  • font-family
  • font-weight
  • font-style
  • font-size
  • font-variant

文本属性:

  • text-align
  • text-align-last
  • text-indent
  • start-indent
  • end-indent
  • wrap-option (定义自动换行，word wrap)
  • break-before (定义分页符，page breaks)
  • break-after (กำหนดสัญญาณจบหน้า หรือ page breaks)
  • reference-orientation (กำหนดการหมุนของข้อความภายใน 90" )

ตัวอย่าง

<fo:block
    font-size="14pt" font-family="verdana" color="red"
    space-before="5mm" space-after="5mm">
W3School
</fo:block>
<fo:block
    text-indent="5mm"
    font-family="verdana" font-size="12pt"
    space-before="5mm" space-after="5mm">
ที่ CodeW3C.com คุณจะหาสามงานอบรมสร้างเว็บไซต์ทั้งหมดที่คุณต้องการ
จำเป็น จาก HTML และ XHTML ธรรมดา ไปจนถึง XML ขั้นสูง ทั้ง XSL และ Multimedia
และ WAP.
</fo:block>

ผลลัพธ์:

ดูตัวอย่างด้านบน ถ้าต้องการสร้างเอกสารที่มีหัวข้อและปารากราฟหลายอย่าง จะต้องใช้รหัสที่มาก

โดยทั่วไป XSL-FO จะไม่รวมข้อมูลการจัดรูปแบบและเนื้อหาเช่นที่เราทำขึ้นเมื่อไหร่

ด้วยบางความช่วยเหลือจาก XSLT เราสามารถใส่ข้อมูลการจัดรูปแบบเข้ามาในแม่บท และเขียนเนื้อหาที่สะอาดขึ้น

คุณจะได้เรียนรู้ว่าหลังจากนี้จะเรียนวิธีการใช้ XSLT แม่บทเพื่อทำการรวมเนื้อหา XSL-FO