| Server IP : 139.59.63.204 / Your IP : 216.73.217.62 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ubuntu-s-1vcpu-1gb-blr1-01 6.8.0-110-generic #110-Ubuntu SMP PREEMPT_DYNAMIC Thu Mar 19 15:09:20 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/abyogasms.com/vendor/tecnickcom/tc-lib-pdf/examples/ |
Upload File : |
<?php
/**
* E032_html_lists.php
*
* @since 2026-04-28
* @category Library
* @package Pdf
* @author Nicola Asuni <info@tecnick.com>
* @copyright 2002-2026 Nicola Asuni - Tecnick.com LTD
* @license https://www.gnu.org/copyleft/lesser.html GNU-LGPL v3 (see LICENSE.TXT)
* @link https://github.com/tecnickcom/tc-lib-pdf
*
* This file is part of tc-lib-pdf software library.
*/
// NOTE: run make deps fonts in the project root to generate the dependencies and example fonts.
// autoloader when using Composer
require __DIR__ . '/../vendor/autoload.php';
// define fonts directory
\define('K_PATH_FONTS', \realpath(__DIR__ . '/../vendor/tecnickcom/tc-lib-pdf-font/target/fonts'));
// autoloader when using RPM or DEB package installation
//require ('/usr/share/php/Com/Tecnick/Pdf/autoload.php');
// main TCPDF object
$pdf = new \Com\Tecnick\Pdf\Tcpdf(
unit: 'mm',
isunicode: true,
subsetfont: false,
compress: true,
mode: '',
objEncrypt: null,
);
$pdf->setCreator('tc-lib-pdf');
$pdf->setAuthor('Nicola Asuni');
$pdf->setSubject('tc-lib-pdf example: 032');
$pdf->setTitle('HTML List Item CSS Variations');
$pdf->setKeywords('TCPDF tc-lib-pdf example html list css ul ol li');
$pdf->setPDFFilename('032_html_lists.pdf');
$pdf->setViewerPreferences(['DisplayDocTitle' => true]);
$pdf->enableDefaultPageContent();
$bfont = $pdf->font->insert($pdf->pon, 'dejavusans', '', 10);
// $bfont = $pdf->font->insert($pdf->pon, 'helvetica', '', 10);
$pdf->addPage();
$pdf->setBookmark(
name: 'HTML list item CSS variations',
link: '',
level: 0,
page: -1,
posx: 0,
posy: 0,
fstyle: 'B',
color: '',
);
$pdf->page->addContent($bfont['out']);
// This example showcases all currently supported list-item CSS behavior:
// - list-style-type
// - list-style-position (inside / outside)
// - margin-left / padding-left
// - text-indent first-line behavior on list-item text
// - nested OL/UL interactions
// - li::marker styling (color, font-weight, font-style)
// - list-style-image CSS property parsing
$html = <<<HTML
<style>
body {
color: #222222;
font-size: 10pt;
}
h1 {
color: #0f2b46;
margin-bottom: 3mm;
}
h2 {
color: #1e4f80;
margin-top: 4mm;
margin-bottom: 2mm;
}
.note {
font-size: 8pt;
color: #5b5b5b;
}
.panel {
background-color: #f7fbff;
padding: 2mm;
margin-bottom: 2.5mm;
}
/* Variation set: list-style-type */
.ul-disc { list-style-type: disc; }
.ul-circle { list-style-type: circle; }
.ul-square { list-style-type: square; }
.ol-decimal { list-style-type: decimal; }
.ol-upper-alpha { list-style-type: upper-alpha; }
.ol-lower-roman { list-style-type: lower-roman; }
/* Variation set: list-style-position */
.pos-inside { list-style-position: inside; }
.pos-outside { list-style-position: outside; }
/* Variation set: margin/padding on containers and items */
.list-shift-a {
margin-left: 0mm;
padding-left: 3mm;
}
.list-shift-b {
margin-left: 6mm;
padding-left: 1mm;
}
.list-shift-c {
margin-left: 10mm;
padding-left: 0mm;
}
.list-shift-a li { margin-left: 0mm; padding-left: 0mm; }
.list-shift-b li { margin-left: 1mm; padding-left: 1mm; }
.list-shift-c li { margin-left: 2mm; padding-left: 0mm; }
/* Variation set: text-indent (first-line and hanging) */
.indent-first li { text-indent: 4mm; }
.indent-hanging li { text-indent: -2mm; }
/* Variation set: li::marker styling */
.marker-red li::marker { color: red; }
.marker-blue li::marker { color: blue; }
.marker-green li::marker { color: #008000; }
/* Variation set: list-style-image (custom bullets) */
.list-img-svg { list-style-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSI0IiBmaWxsPSIjRkY2NjAwIi8+PC9zdmc+); }
/* Visual hint only */
.marker-guide,
.marker-line {
border-left: 0.2mm solid #ff0000;
padding-left: 1.5mm;
}
</style>
<h1>HTML List Item CSS Variations (Current Support)</h1>
<div class="panel">
<h2>1) Unordered list styles (`list-style-type`)</h2>
<ul class="ul-disc marker-guide">
<li>Disc marker</li>
<li>Nested sample
<ul class="ul-circle">
<li>Circle marker</li>
<li>Another nested item</li>
</ul>
</li>
</ul>
<ul class="ul-square marker-guide">
<li>Square marker</li>
<li>Second square marker item</li>
</ul>
</div>
<div class="panel">
<h2>2) Ordered list styles (`list-style-type`)</h2>
<ol class="ol-decimal marker-guide">
<li>Decimal marker</li>
<li>Second item</li>
</ol>
<ol class="ol-upper-alpha marker-guide">
<li>Upper-alpha marker</li>
<li>Second item</li>
</ol>
<ol class="ol-lower-roman marker-guide">
<li>Lower-roman marker</li>
<li>Second item</li>
</ol>
</div>
<div class="panel">
<h2>3) Marker position (`list-style-position`)</h2>
<ul class="ul-disc pos-outside marker-guide">
<li>Outside marker with long text to show wrap behavior for this rendering path in the PDF engine.</li>
<li>Second outside item</li>
</ul>
<ul class="ul-disc pos-inside marker-guide">
<li>Inside marker with long text to show wrap behavior for this rendering path in the PDF engine.</li>
<li>Second inside item</li>
</ul>
</div>
<div class="panel">
<h2>4) Container and item indentation (`margin-left` / `padding-left`)</h2>
<ul class="ul-disc list-shift-a marker-guide">
<li>Shift A</li>
<li>Shift A nested
<ol class="ol-decimal">
<li>Nested ordered item</li>
</ol>
</li>
</ul>
<ul class="ul-disc list-shift-b marker-guide">
<li>Shift B</li>
<li>Shift B nested
<ol class="ol-upper-alpha">
<li>Nested ordered item</li>
</ol>
</li>
</ul>
<ul class="ul-disc list-shift-c marker-guide">
<li>Shift C</li>
<li>Shift C nested
<ol class="ol-lower-roman">
<li>Nested ordered item</li>
</ol>
</li>
</ul>
</div>
<div class="panel">
<h2>5) Mixed nesting matrix (`ol` inside `ul`, `ul` inside `ol`)</h2>
<ul class="ul-square marker-guide">
<li>UL root item
<ol class="ol-decimal pos-outside">
<li>OL nested in UL
<ul class="ul-circle pos-inside">
<li>UL nested in OL</li>
<li>Second nested UL item</li>
</ul>
</li>
</ol>
</li>
</ul>
</div>
<div class="panel">
<h2>6) List text indentation (`text-indent`)</h2>
<ol class="ol-decimal indent-first marker-guide">
<li>First-line indent with long text to make wrapping visible in the list-item rendering path. First-line indent with long text to make wrapping visible in the list-item rendering path.</li>
<li><span>First-line</span> indent with long text to <span>make</span> wrapping visible in the list-item rendering path. (B) First-line indent with long text to make wrapping visible in the list-item rendering path.</li>
<li>Second item with first-line indent style applied.</li>
</ol>
<ol class="ol-decimal indent-hanging marker-guide">
<li>Hanging-indent style (negative text-indent) with long text to highlight first-line offset behavior.</li>
<li>Second item using the same hanging-indent rule.</li>
</ol>
</div>
<div class="panel">
<h2>7) Marker color styling (`li::marker`)</h2>
<ol class="ol-decimal marker-red marker-guide">
<li>Red marker color applied via li::marker selector</li>
<li>Second item with red marker styling</li>
</ol>
<ul class="ul-disc marker-blue marker-guide">
<li>Blue marker color applied via li::marker selector</li>
<li>Second unordered item with blue marker</li>
</ul>
<ol class="ol-upper-alpha marker-green marker-guide">
<li>Green marker color applied via li::marker selector</li>
<li>Second item with green marker styling</li>
</ol>
</div>
<div class="panel">
<h2>8) Custom bullet images (`list-style-image`)</h2>
<p class="note">Note: Image bullet rendering is subject to image loading availability and fallback behavior.</p>
<ul class="list-img-svg marker-guide">
<li>Custom SVG bullet marker image</li>
<li>Second item with custom image bullet</li>
<li>Nested list with custom bullets
<ul class="list-img-svg">
<li>Nested custom image bullet item</li>
<li>Another nested custom image bullet</li>
</ul>
</li>
</ul>
</div>
HTML;
$pdf->addHTMLCell(html: $html, posx: 10, posy: 20, width: 190);
// get PDF document as raw string
$rawpdf = $pdf->getOutPDFString();
// Various output modes:
//$pdf->savePDF(\dirname(__DIR__).'/target', $rawpdf);
$pdf->renderPDF(rawpdf: $rawpdf);
//$pdf->downloadPDF($rawpdf);
//echo $pdf->getMIMEAttachmentPDF($rawpdf);