เรนเดอร์ HTML ภาษาอาหรับแบบขวาไปซ้าย

ภาพรวมโดยย่อ

เรนเดอร์ HTML แบบขวาไปซ้าย (RTL) ให้เป็น PDF ด้วย writeHtml() โดยกำหนดพร็อพเพอร์ตี CSS direction: rtl และลงทะเบียนฟอนต์ที่รองรับภาษาอาหรับ เอนจินจะจัดเรียงข้อความเป็นลำดับเชิงภาพตามอัลกอริทึมข้อความสองทิศทางของ Unicode (UAX #9) และขึ้นรูปอักษรอาหรับตามบริบท สูตรนี้แสดงวิธีเรนเดอร์ใบแจ้งหนี้ภาษาอาหรับขนาดเล็กแบบ RTL โดย RTL ใช้กับภาษาอาหรับ ภาษาฮีบรู ภาษาเปอร์เซีย และภาษาอูรดู ภาษาฮีบรูจะถูกจัดลำดับใหม่แต่ไม่ถูกขึ้นรูป ซึ่งถูกต้องสำหรับสคริปต์นั้น

การติดตั้ง

composer require nextpdf/core

ต้องมีฟอนต์ TrueType หรือ OpenType ที่รองรับภาษาอาหรับด้วย แผนผังอักขระของฟอนต์ต้องครอบคลุมบล็อก Arabic Presentation Forms-B ฟอนต์ Noto Naskh Arabic และ Amiri เป็นฟอนต์แบบเปิดที่เหมาะกับงานนี้

ภาพรวมเชิงแนวคิด

การเรนเดอร์ RTL ต้องมีอินพุตสองอย่าง ได้แก่ พร็อพเพอร์ตี CSS direction: rtl และฟอนต์อาหรับที่ลงทะเบียนแล้ว

direction: rtl บอกให้เลย์เอาต์วางข้อความจากขวาไปซ้าย จากนั้นเอนจินจะใช้อัลกอริทึมข้อความสองทิศทางของ Unicode (UAX #9) เพื่อคำนวณลำดับเชิงภาพ เนื้อหาแบบผสมจึงถูกจัดลำดับอย่างถูกต้อง คำภาษาละติน คำภาษาอาหรับ และตัวเลขยังคงทิศทางของตัวเอง ตัวเลขที่ตามหลังข้อความภาษาอาหรับจะยังคงลำดับจากซ้ายไปขวา

ภาษาอาหรับเป็นระบบอักษรที่ตัวอักษรเชื่อมต่อกัน ตัวอักษรแต่ละตัวจึงใช้กลีฟต่างกันตามตัวอักษรข้างเคียง เอนจินจะเลือกรูปเริ่มต้น รูปกลาง รูปท้าย หรือรูปเดี่ยวสำหรับตัวอักษรแต่ละตัว และใช้ลิเกเจอร์ Lam-Alef การขึ้นรูปตามบริบทนี้ต้องใช้ฟอนต์ที่มีแผนผังอักขระครอบคลุมบล็อก Arabic Presentation Forms-B ฟอนต์ที่รองรับเฉพาะภาษาละติน รวมถึงฟอนต์มาตรฐาน 14 รายการ ไม่สามารถวาดอักษรอาหรับได้

ในตาราง แต่ละเซลล์จะถูกจัดลำดับและขึ้นรูปแยกกัน แล้วจัดแนวชิดขอบเริ่มต้น ซึ่งคือขอบขวาภายใต้ direction: rtl ค่าเชิงตรรกะของ text-align เช่น start และ end จะถูกแก้ค่าตามทิศทาง ดังนั้น start จึงแมปไปยังขอบขวาสำหรับเนื้อหา RTL

ให้กำหนดทิศทางด้วยพร็อพเพอร์ตี CSS direction แอตทริบิวต์ HTML dir ไม่แมปกับพร็อพเพอร์ตีนี้ ดู RTL — ข้อจำกัดในปัจจุบัน เพื่อดูขอบเขตการรองรับในปัจจุบัน

ส่วนที่เปิดให้ใช้งานของ API

สัญลักษณ์	ตำแหน่ง	บทบาท
Document::writeHtml(string $html): static	NextPDF\Core\Concerns\HasTextOutput	เรนเดอร์ชิ้นส่วน HTML ที่ตำแหน่งเคอร์เซอร์ปัจจุบัน
FontRegistry::register(string $fontFile, string $alias = '', int $fontIndex = 0): FontInfo	NextPDF\Typography\FontRegistry	ลงทะเบียนฟอนต์อาหรับภายใต้ชื่อแทน
DocumentFactory::create(): Document	NextPDF\Core\DocumentFactory	สร้างเอกสารที่อ่านรีจิสทรีที่กำหนดไว้

ตัวอย่างนี้ใช้พร็อพเพอร์ตี CSS ต่อไปนี้ ได้แก่ direction, font-family, text-align ให้อ้างอิงฟอนต์ที่ลงทะเบียนไว้ใน CSS font-family ด้วยชื่อแทนในรีจิสทรีของฟอนต์

ตัวอย่างโค้ด — เริ่มต้นอย่างรวดเร็ว

<?php

declare(strict_types=1);

require_once __DIR__ . '/vendor/autoload.php';

use NextPDF\Core\DocumentFactory;
use NextPDF\Graphics\ImageRegistry;
use NextPDF\Typography\FontRegistry;

$fontRegistry = new FontRegistry();
$fontRegistry->register(__DIR__ . '/NotoNaskhArabic-Regular.ttf', alias: 'ArabicFont');

$documentFactory = new DocumentFactory($fontRegistry, new ImageRegistry(maxCacheBytes: 0));
$doc = $documentFactory->create();
$doc->addPage();

$doc->writeHtml(
    '<div style="direction: rtl; font-family: \'ArabicFont\';">'
    . '<h1>فاتورة</h1>'
    . '<p>المبلغ الإجمالي 380.00</p>'
    . '</div>'
);

$doc->save(__DIR__ . '/rtl-arabic.pdf');

หัวเรื่องจะเรนเดอร์จากขวาไปซ้าย และตัวเลข 380.00 จะคงลำดับจากซ้ายไปขวาภายในประโยคภาษาอาหรับ

ตัวอย่างโค้ด — สำหรับการใช้งานจริง

ตัวอย่างที่ครบถ้วนในตัวเองนี้เรนเดอร์ตารางใบแจ้งหนี้ภาษาอาหรับ แต่ละเซลล์มี direction: rtl และใช้ฟอนต์อาหรับที่ลงทะเบียนแล้ว เอนจินจึงจัดลำดับและขึ้นรูปทุกบรรทัด จากนั้นจัดแนวเซลล์ชิดขอบขวา

<?php

declare(strict_types=1);

require_once __DIR__ . '/vendor/autoload.php';

use NextPDF\Core\DocumentFactory;
use NextPDF\Graphics\ImageRegistry;
use NextPDF\Typography\FontRegistry;

// Supply an Arabic-capable face whose cmap covers Arabic Presentation Forms-B.
// Embed only fonts you are licensed to embed.
$fontPath = __DIR__ . '/NotoNaskhArabic-Regular.ttf';
if (!is_file($fontPath)) {
    fwrite(STDERR, "Arabic font not found at {$fontPath}\n");
    exit(1);
}

$fontRegistry = new FontRegistry();
$fontRegistry->register($fontPath, alias: 'ArabicFont');

$documentFactory = new DocumentFactory($fontRegistry, new ImageRegistry(maxCacheBytes: 0));
$doc = $documentFactory->create();
$doc->setTitle('Arabic invoice');
$doc->addPage();

$html = <<<'HTML'
<div style="direction: rtl; font-family: 'ArabicFont'; font-size: 12pt;">
  <h1>فاتورة</h1>
  <table style="width: 100%; border-collapse: collapse;">
    <tr>
      <th style="border: 1px solid #333; padding: 6px;">الوصف</th>
      <th style="border: 1px solid #333; padding: 6px;">المبلغ</th>
    </tr>
    <tr>
      <td style="border: 1px solid #333; padding: 6px;">خدمات استشارية</td>
      <td style="border: 1px solid #333; padding: 6px;">380.00</td>
    </tr>
    <tr>
      <td style="border: 1px solid #333; padding: 6px;">الإجمالي</td>
      <td style="border: 1px solid #333; padding: 6px;">380.00</td>
    </tr>
  </table>
</div>
HTML;

$doc->writeHtml($html);

$out = getenv('NEXTPDF_OUT');
$doc->save($out !== false ? $out : __DIR__ . '/render-rtl-arabic-html.pdf');

echo "Wrote the Arabic invoice PDF\n";

  الوصف المبلغ   خدمات استشارية 380.00   الإجمالي 380.00  

HTML;$doc->writeHtml($html);$out = getenv('NEXTPDF_OUT');$doc->save($out !== false ? $out : __DIR__ . '/render-rtl-arabic-html.pdf');echo "Wrote the Arabic invoice PDF\n";">