<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>International Sample</title>
<link href="../common.css" rel="stylesheet" type="text/css"/>
<style>
@counter-style dice {
system: additive;
additive-symbols: 6 '\2685', 5 '\2684', 4 '\2683', 3 '\2682', 2 '\2681', 1 '\2680';
suffix: "";
}
@counter-style decimal-suffix {
system: extends decimal;
suffix: ")";
}
@counter-style spelledOutEnglish {
system: extends -ro-spelled-out-en;
range: 0 10;
fallback: decimal;
}
@counter-style spelledOutGerman {
system: extends -ro-spelled-out-de;
range: 0 12;
fallback: decimal;
}
@-ro-preferences {
first-page-side: left;
page-layout: 2 column;
initial-zoom: fit-page;
}
.grid {
display: grid;
grid-template-columns: 30% 30% 30%;
grid-gap: 25pt;
}
.grid .result {
height: 40pt;
display: flex;
align-items: center;
text-align: initial;
}
.translation {
font-style: italic;
font-size: 8pt;
}
.rtl {
direction: rtl;
}
.ltr {
direction: ltr;
}
.sample {
break-inside: avoid;
}
ol {
margin-left: 1cm;
}
.listItemColumns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.listItemColumns > ol {
margin-top: 0;
}
:not(h1) + h2 {
break-before: page;
margin-top: 0;
}
div.result p {
font-size: 9pt;
}
.logicalSample {
position: relative;
margin-bottom: 2em;
border: 1pt none darkgrey;
border-top-style: solid;
padding-top: 0.5em;
border-inline-start-style: solid; /* LTR: "border-left-style…" / RTL: "border-right-style…" */
padding-inline-start: 1em; /* LTR: "padding-left: 1em" / RTL: "padding-right: 1em" */
}
.logicalSample::before {
content: "";
display: block;
width: 7em;
height: 8em;
background-image: radial-gradient(ellipse, darkgrey 0%, white 70%);
float: inline-end;
margin: 1.5em 0;
margin-inline-start: 1em;
}
.logicalSample::after {
content: "Title";
background-color: darkgrey;
color: white;
padding: 0.1em 0.5em;
position: absolute;
top: -1em;
inset-inline-start: 2em;
}
.langSelector:lang(de) li::before{
content: counter(itemCounter, spelledOutGerman);
}
.langSelector:lang(en) li::before{
content: counter(itemCounter, spelledOutEnglish);
}
.langSelector li::before{
content: counter(itemCounter);
}
.spelledOutCounter {
display: block;
counter-reset: itemCounter 0;
text-align: center;
margin-left: 0;
padding-left: 0;
}
.spelledOutCounter li {
counter-increment: itemCounter;
display: inline;
}
.spelledOutCounter li:not(:last-child)::after {
content: ", ";
}
#spelledOutEnglish li::before {
content: counter(itemCounter, spelledOutEnglish);
}
#spelledOutGerman li::before {
content: counter(itemCounter, spelledOutGerman);
}
#tl {
width: 100%;
white-space: nowrap;
}
#tl td:nth-child(3) {
-ro-text-replace: 'any' 'latn' transliterate; /* convert non-LAtin letters to Latin ones */
}
#tl td:nth-child(4) {
-ro-text-replace: 'any' 'ascii' transliterate; /* convert non-LAtin letters to Latin ones, using German-specific ruls for umlauts */
}
#tl td:nth-child(5) {
-ro-text-replace: 'de' 'ascii' transliterate; /* conver non-ASCII characters to ASCII approximations */
}
#tl td:nth-child(6) {
-ro-text-replace: 'any' 'latn' transliterate, 'any' 'ascii' transliterate; /* convert non-LAtin letters to Latin ones and then non-ASCII characters to ASCII approximations */
}
h3::before {
content: none;
}
h4 {
bookmark-level: none;
}
#dateformat tbody td:nth-child(3) {
white-space: nowrap;
}
#dateformat tbody td:nth-child(4) {
-ro-line-break-opportunity: "\\s" "\\d", "[\\x00-\\xff]" "[^\\x00-\\xff]"; /* only allow specific line breaks for a more consistent layout */
}
#dateformat tbody td:nth-child(5) {
-ro-line-break-opportunity: " " "\\W*?\\d\\d?\\D\\d";
}
.cols {
columns: 2;
}
.cols > code {
display: block;
break-after: column;
}
.rtlLayoutDemo {
display: flex;
justify-content: space-between;
}
.rtlLayoutDemo > div {
width: 40%;
}
.rtlLayoutDemo > div:nth-child(2) {
direction: rtl;
}
.rtlLayoutDemo .dirmc {
columns: 3;
column-gap: 2em;
column-rule: 1pt solid lightgray;
-ro-truncate-margin-after-break: always;
}
.rtlLayoutDemo .dirflex {
display: flex;
justify-content: space-between;
}
.rtlLayoutDemo .dirgrid {
display: grid;
grid-template-columns: auto auto auto;
justify-content: space-between;
}
.rtlLayoutDemo .dirflex > p,
.rtlLayoutDemo .dirgrid > p {
border: 1pt solid lightgray;
padding: 3pt;
}
#dateformat td {
line-height: 1.6;
vertical-align: top;
}
</style>
<script>
window.onload = function() {
d = new Date();
d.setFullYear(2020, 0, 15);
d.setHours(18, 23, 45, 678);
for (r of document.querySelectorAll("#dateformat tbody tr")) {
l = r.children[2].textContent;
r.children[3].textContent = new Intl.DateTimeFormat(l, { year:"numeric", month:"numeric", day:"numeric", hour:"numeric", minute:"numeric", second:"numeric" }).format(d);
r.children[4].textContent = new Intl.DateTimeFormat(l, { era:"long", year:"numeric", month:"long", day:"numeric", weekday:"long", hour:"numeric", minute:"numeric", second:"numeric", timeZoneName:"long" }).format(d) + "\u00A0\u00A0\u00A0\u00A0";
}
}
</script>
</head>
<body>
<h1>International Sample</h1>
<h2>Languages and Writing System</h2>
<p>PDFreactor can layout texts in various languages and writing systems. It also contains default fonts for most of them,
so providing fonts containing the required characters is not necessary. Doing so is still recommended for best visual results.</p>
<p>The following samples show text from various languages with multiple kinds of writing systems using the default fonts:</p>
<div class="grid">
<div class="sample ">
<h3>Arabic</h3>
<div class="result rtl">
<p>نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق.</p>
</div>
<p class="translation">A wise text which has an absolute secret and great importance, written on a green cloth and covered with blue
leather.</p>
</div>
<div class="sample">
<h3>Chinese</h3>
<div class="result">
<p>視野無限廣，窗外有藍天</p>
</div>
<p class="translation">The view is infinitely wide. There is blue sky outside the window.</p>
</div>
<div class="sample">
<h3>Danish</h3>
<div class="result">
<p>Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon.</p>
</div>
<p class="translation">The quiz contestants ate strawberry with cream while Walter the circus clown played the xylophone.</p>
</div>
<div class="sample">
<h3>German</h3>
<div class="result">
<p>Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.</p>
</div>
<p class="translation">Victor chases twelve boxers across the great dam of Sylt.</p>
</div>
<div class="sample">
<h3>Greek</h3>
<div class="result">
<p>Θέλει αρετή και τόλμη η ελευθερία. (Ανδρέας Κάλβος)</p>
</div>
<p class="translation">Liberty requires virtue and mettle. (Andreas Kalvos)</p>
</div>
<div class="sample">
<h3>Hebrew</h3>
<div class="result rtl">
<p>דג סקרן שט לו בים זך אך לפתע פגש חבורה נחמדה שצצה כך.</p>
</div>
<p class="translation">A curious fish sailed a clear sea, and suddenly found nice company that just popped up.</p>
</div>
<div class="sample">
<h3>Japanese</h3>
<div class="result">
<p>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす</p>
</div>
<p class="translation">Even the blossoming flowers / Will eventually scatter / Who in this world / is unchanging? / The deep
mountains of vanity-- / We cross them today / And we shall not see superficial dreams / Nor be deluded.
(from Iroha-uta)</p>
</div>
<div class="sample">
<h3>Khmer</h3>
<div class="result">
<p> ថ្ងៃច័ន្ទ ដល់ ថ្ងៃសុក្រ ម៉ោង 8 ព្រឹក </p>
</div>
<p class="translation">Monday to Friday, 8 AM</p>
</div>
<div class="sample">
<h3>Russian</h3>
<div class="result">
<p>Съешь ещё этих мягких французских булок да выпей же чаю.</p>
</div>
<p class="translation">Eat some more of these soft French buns and drink some tea.</p>
</div>
</div>
<h2>Bidi Text</h2>
<p>Text can not only be strictly left-to-right or right-to-left, it can also contain phrases with an inherent direction opposite to the base direction.
PDFreactor automatically handles such bi-direction (BiDi) content according to the Unicode specification, with no need for specific styles beyond the base direction (see below).</p>
<p>The following samples show an English text followed by translations that keep some English terms:</p>
<!-- Original text "XML in 10 Points" and its translations under W3C document license, Copyright © World Wide Web Consortium.
All Rights Reserved. http://www.w3.org/Consortium/Legal/2002/copyright- documents- 20021231 --><!-- excerpt from English original text, available at: http://www.w3.org/XML/1999/XML- in- 10- points.html.en -->
<div class="sample">
<h3>Left-to-right sample - English text excerpt:</h3>
<div class="result">
<p class="ltr" lang="en-US">5. XML is a family of technologies</p>
<p class="ltr" lang="en-US">XML 1.0 is the specification that defines what "tags" and "attributes" are.
Beyond XML 1.0, "the XML family" is a growing set of modules that offer useful services to
accomplish important and frequently demanded tasks. XLink describes a standard way to add hyperlinks
to an XML file. XPointer is a syntax in development for pointing to parts of an XML document. An
XPointer is a bit like a URL, but instead of pointing to documents on the Web, it points to pieces
of data inside an XML file. CSS, the style sheet language, is applicable to XML as it is to HTML.
XSL is the advanced language for expressing style sheets. It is based on XSLT, a transformation
language used for rearranging, adding and deleting tags and attributes. The DOM is a standard set of
function calls for manipulating XML (and HTML) files from a programming language. XML Schemas 1 and
2 help developers to precisely define the structures of their own XML-based formats. There are
several more modules and tools available or under development. Keep an eye on W3C's technical
reports page.</p>
</div>
</div>
<!-- excerpt from Arabic translated version, available at: http://www.w3c.org.ma/XML/XML- in- 10- points.ar.html -->
<div class="sample">
<h3>Right-to-left sample - Arabic text excerpt:</h3>
<div class="result">
<p class="rtl" lang="ar-SA">5. إكس إم إل مجموعة تكنولوجيّات</p>
<p class="rtl" lang="ar-SA">XML 1.0 هي المواصفات التي تعرِّف ماذا تكون "العلامات" و "الصّفات" . حول تلك
المواصفات هناك مجموعة متنامية من الوحدات التي تَعرِض خدمات مفيدة لإنجاز مهام كثيرة الطلب وهامّة .
Xlink يصف طريقة رسمية لإضافة وُصلة رابطة لملفّ إكس إم إل. XPointer و XFragments قواعد تركيب نحوية
للإشارة إلى أجزاء من وثيقة إكس إم إل. إشارة XPointer تتشابه مع إشارة URL ، لكنّ بدلاً من الإشارة إلى
الوثائق على الويب ، تشير الى قطعٍ صغيرةٍ من البيانات داخل ملفّ إكس إم إل . CSS، لغة النمط والأسلوب،
تنطبق على إكس إم إل كما تنطبق على إتش تي إم إل . XSL هي اللّغة المتقدّمة للتّعبير عن النّمط والأسلوب
. أساسها XSLT، لغة تَحوُّل استُخْدِمت لإعادة ترتيب أو لإضافة أو لحذف علامات او صفات. DOM هي مجموعة
رسمية لاستدعاءات الوظائف من أجل استغلال ملفّات إكس إم إل (او إتش تي إم إل) و ذلك من داخل لغة برمجة.
مخطّطات إكس إم إل 1 و 2 (XML Schemas 1 and 2) تساعد المطورين بأن يُعرِّفوا بدقّة هياكل أشكالهم
الشّخصية المؤسّسة على لغة إكس إم . هناك عدة وحدات و أدوات متاحة أو تحت التطوير. أنظر إلى صفحة تقارير
W3C التّقنية.</p>
</div>
</div>
<!-- excerpt from Hebrew translated version, available at: http://www.w3c.org.il/article/xml10pts -->
<div class="sample">
<h3>Right-to-left sample - Hebrew text excerpt:</h3>
<div class="result">
<p class="rtl" lang="he-IL">5. XML הוא משפחה של טכנולוגיות</p>
<p class="rtl" lang="he-IL">XML1.0 הנו מפרט שמגדיר מהם "תגיות" ו"תכוניות". מעבר לכך "משפחת XML" הינה
מערך מודולים ההולך ומתרחב המציעים שירותים שמושיים כדי לבצע משימות חשובות ותכופות. Xlink מתאר כיצד
להוסיף קישורים לקובץ XML. XPointer ו- Xfragments הינם מודולים בפיתוח כדי לאפשר מצביעים בתוך מסמך
XML. ה- XPointer הנו מעין URL, אך במקום להצביע על מסמכים ברשת, הוא מצביע על פיסת מידע בתוך הקובץ
XML. CSS, שפה לעיצוב גליונות, זמינה ב- XML בדומה ל- HTML. XSL הינה שפה מתקדמת לעיצוב גליונות. השפה
מבוססת על XSLT, שפה המשמשת לאירגון, הוספה ומחיקה של תגיות ותכוניות. ה- DOM מערך פונקציות המשמשות
למניפולציות בקבצי XML (ו- HTML) ע"י תיכנות. פורמט הגדרות מבנה XML Schema1 ו- 2. ישנם עוד מודולים
וכלים מוכנים או בפיתוח. שים לב לדף הדיווחים הטכניים של W3C.</p>
</div>
</div>
<p>The text excerpts are taken from the original English and the translated Arabic and Hebrew versions of the
W3C document "XML in 10 Points".</p>
<h2>BiDi Layout</h2>
<p>When the direction of the primary writing system of a document is right-to-left the base direction of the document should be set to RTL as well:</p>
<div class="code"><code>:root { direction: rtl; }</code></div>
<p><code>direction</code> can also be set on any element and also affect its children.</p>
<p>In addition to text layout, <code>direction</code> also adjusts lists, tables and other structures,
as demonstrated by the following juxtaposition:</p>
<div class="rtlLayoutDemo">
<div>
<h4>Paragraph:</h4>
<p>Some text in a paragraph.</p>
<h4>List:</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h4>Table:</h4>
<table>
<thead>
<tr><th>H1</th><th>H2</th><th>H3</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
</tbody>
</table>
<h4>Multi-Column:</h4>
<div class="dirmc">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5 has a break</p>
<p>Line 6</p>
<p>Line 7</p>
<p>Line 8</p>
</div>
<h4>Flex:</h4>
<div class="dirflex">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
</div>
<h4>Grid:</h4>
<div class="dirgrid">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<p>Item 6</p>
</div>
</div>
<div>
<h4>Paragraph:</h4>
<p>Some text in a paragraph.</p>
<h4>List:</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h4>Table:</h4>
<table>
<thead>
<tr><th>H1</th><th>H2</th><th>H3</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
</tbody>
</table>
<h4>Multi-Column:</h4>
<div class="dirmc">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5 has a break</p>
<p>Line 6</p>
<p>Line 7</p>
<p>Line 8</p>
</div>
<h4>Flex:</h4>
<div class="dirflex">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
</div>
<h4>Grid:</h4>
<div class="dirgrid">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<p>Item 6</p>
</div>
</div>
</div>
<h2>Logical Properties and Values</h2>
<p>Several horizontal positions and sizes can be specified depending on the text direction.
The following sample uses the exact same HTML and CSS twice, except for different BiDi directions.
The direction dependent styles and their effects are as follows:</p>
<div class="sample">
<p>The position of the title:</p>
<div class="code"><code>position: absolute;
top: -1em;
inset-inline-start: 2em; <span class="comment">/* LTR: "left: 2em" / RTL: "right: 2em" */</span></code></div>
</div>
<div class="sample">
<p>The float value and margin of the image:</p>
<div class="code"><code>float: inline-end; <span class="comment">/* LTR: "float: right" / RTL: "float: left" */</span>
margin: 1em 0.1em;
margin-inline-start: 2em; <span class="comment">/* LTR: "margin-left: 2em" / RTL: "margin-right: 2em" */</span></code></div>
</div>
<div class="sample">
<p>The border and padding of the box:</p>
<div class="code"><code>border: 1pt none darkgrey;
border-top-style: solid;
padding-top: 0.5em;
border-inline-start-style: solid; <span class="comment">/* LTR: "border-left-style…" / RTL: "border-right-style…" */</span>
padding-inline-start: 1em; <span class="comment">/* LTR: "padding-left: 1em" / RTL: "padding-right: 1em" */</span></code></div>
</div>
<p>Resulting in:</p>
<h3>LTR</h3>
<div class="logicalSample">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia ex eget nisl iaculis, vitae pellentesque sapien sollicitudin. Mauris iaculis, sem at laoreet tincidunt, ipsum justo placerat turpis, vitae finibus ipsum sapien ac sapien. Nullam dignissim finibus erat. Donec tincidunt scelerisque enim, et pharetra dolor blandit id. Fusce blandit sapien sollicitudin leo auctor, a mattis ex ullamcorper. Aenean hendrerit in sem et sodales. Nunc maximus sem non eros venenatis, cursus egestas mi imperdiet. Morbi in eros faucibus, ullamcorper sem eget, facilisis nunc. Vestibulum ut dignissim ligula, vel sagittis velit. Ut eget maximus leo. Aenean rhoncus euismod elementum. Nam velit orci, porttitor vel viverra scelerisque, accumsan sit amet urna. Quisque ut interdum dui. Suspendisse eu leo orci. Ut nec eros vel diam euismod consequat.</div>
<h3>RTL</h3>
<div class="logicalSample rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia ex eget nisl iaculis, vitae pellentesque sapien sollicitudin. Mauris iaculis, sem at laoreet tincidunt, ipsum justo placerat turpis, vitae finibus ipsum sapien ac sapien. Nullam dignissim finibus erat. Donec tincidunt scelerisque enim, et pharetra dolor blandit id. Fusce blandit sapien sollicitudin leo auctor, a mattis ex ullamcorper. Aenean hendrerit in sem et sodales. Nunc maximus sem non eros venenatis, cursus egestas mi imperdiet. Morbi in eros faucibus, ullamcorper sem eget, facilisis nunc. Vestibulum ut dignissim ligula, vel sagittis velit. Ut eget maximus leo. Aenean rhoncus euismod elementum. Nam velit orci, porttitor vel viverra scelerisque, accumsan sit amet urna. Quisque ut interdum dui. Suspendisse eu leo orci. Ut nec eros vel diam euismod consequat.</div>
<h2>International List Numbering</h2>
<p>PDFreactor supports several international list style types, including the following:</p>
<div class="result listItemColumns">
<ol>
<li style="list-style-type: decimal">decimal</li>
<li style="list-style-type: decimal-leading-zero">padded decimal</li>
<li style="list-style-type: lower-roman">lower-roman</li>
<li style="list-style-type: upper-roman">upper-roman</li>
<li style="list-style-type: lower-alpha">lower-alpha</li>
<li style="list-style-type: upper-alpha">upper-alpha</li>
<li style="list-style-type: arabic-indic">arabic-indic</li>
<li style="list-style-type: upper-armenian">upper-armenian</li>
<li style="list-style-type: lower-armenian">lower-armenian</li>
<li style="list-style-type: bengali">bengali</li>
<li style="list-style-type: cambodian">cambodian</li>
<li style="list-style-type: devanagari">devanagari</li>
<li style="list-style-type: georgian">georgian</li>
<li style="list-style-type: lower-greek">lower-greek</li>
<li style="list-style-type: upper-greek">upper-greek</li>
<li style="list-style-type: gujarati">gujarati</li>
<li style="list-style-type: gurmukhi">gurmukhi</li>
<li style="list-style-type: hiragana-iroha">hiragana-iroha</li>
<li style="list-style-type: hiragana">hiragana</li>
<li style="list-style-type: japanese-formal">japanese-formal</li>
<li style="list-style-type: japanese-informal">japanese-informal</li>
<li style="list-style-type: kannada">kannada</li>
<li style="list-style-type: katakana">katakana</li>
<li style="list-style-type: katakana-iroha">katakana-iroha</li>
<li style="list-style-type: khmer">khmer</li>
<li style="list-style-type: lao">lao</li>
<li style="list-style-type: malayalam">malayalam</li>
<li style="list-style-type: oriya">oriya</li>
<li style="list-style-type: persian">persian</li>
<li style="list-style-type: simp-chinese-formal">simp-chinese-formal</li>
<li style="list-style-type: simp-chinese-informal">simp-chinese-informal</li>
<li style="list-style-type: telugu">telugu</li>
<li style="list-style-type: thai">thai</li>
<li style="list-style-type: tibetan">tibetan</li>
<li style="list-style-type: urdu">urdu</li>
<li style="list-style-type: -ro-footnote">footnote</li>
<li style="list-style-type: -ro-spelled-out-en">spelled out English</li>
<li style="list-style-type: -ro-spelled-out-de">spelled out German</li>
<li style="list-style-type: -ro-spelled-out-fr">spelled out French</li>
<li style="list-style-type: -ro-spelled-out-en-ordinal">spelled out English ordinal</li>
</ol>
</div>
<h3>Changing Counter-Style Based on "lang" Attribute</h3>
<div>
<p>
With the :lang() selector, different styles can be set based on the "lang" attribute that is set on an
HTML element. In this example the differing "lang" attributes set, cause the spelled out counter style to change to the
language set on the list element.
</p>
</div>
<div class="code">
<code>.langSelector:lang(de) {
content: counter(itemCounter, spelledOutGerman);
}
.langSelector:lang(en) {
content: counter(itemCounter, spelledOutEnglish);
}
.langSelector {
content: counter(itemCounter);
}</code>
</div>
<div>
<h4>English "lang" Attribute</h4>
<ol lang="en" class="langSelector spelledOutCounter">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h4>German "lang" Attribute</h4>
<ol lang="de" class="langSelector spelledOutCounter">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h4>Other "lang" Attribute</h4>
<ol lang="fr" class="langSelector spelledOutCounter">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<h2>Creating Custom List Style Types</h2>
<p>
PDFreactor supports creating custom list style types with the @counter-style rule. If the defined counter style is not
valid, the style will fallback to the decimal counter-style. This counter style rule, for example, depicts dice:
</p>
<div class="code"><code>@counter-style dice {
system: additive;
additive-symbols: 6 '\2685', 5 '\2684', 4 '\2683', 3 '\2682', 2 '\2681', 1 '\2680';
}</code></div>
<div>
<ol style="list-style-type: dice">
<li>dice 1</li>
<li>dice 2</li>
<li>dice 3</li>
<li>dice 4</li>
<li>dice 5</li>
<li>dice 6</li>
<li>dice 7</li>
<li>dice 8</li>
<li>dice 9</li>
</ol>
</div>
<p>
The @counter-style rule also allows you to extend already existing counter styles and change properties like suffix, prefix
or the character used for negative values. For example the following counter style changes the suffix of the decimal counter style
to ' )'.
</p>
<div class="code"><code>@counter-style decimal-suffix {
system: extends decimal;
suffix: ")";
}</code>
</div>
<div>
<ol style="list-style-type: decimal-suffix">
<li>changed suffix</li>
<li>changed suffix</li>
<li>changed suffix</li>
<li>changed suffix</li>
</ol>
</div>
<div>
<p>Another example for the extends system would be to use spelled out counters for low counter values, and then fallback
to the decimal counter style. In English the fallback would be made after ten, while in German the fallback would be made after
12. The following @counter-style rules show these two examples:</p>
<div class="code"><code>@counter-style spelledOutEnglish {
system: extends -ro-spelled-out-en;
range: 0 10;
fallback: decimal;
}
@counter-style spelledOutGerman {
system: extends -ro-spelled-out-de;
range: 0 12;
fallback: decimal;
}</code>
</div>
<div>
<h4>Spelled-Out English:</h4>
<ol id="spelledOutEnglish" class="spelledOutCounter">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h4>Spelled-Out German:</h4>
<ol id="spelledOutGerman" class="spelledOutCounter">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<h2>International Date Formats in JavaScript</h2>
<p>PDFreactor supports date formatting via the <code>Intl</code> JavaScript object:</p>
<div class="code">
<code>dtf = new Intl.DateTimeFormat("en-US", { month: "numeric", day: "numeric", weekday: "long" });
fd = dtf.format(new Date(2020, 0, 15)); <span class="comment">// results in "Wednesday, 1/15"</span></code>
</div>
<p>The following table shows two sample date formats for various languages and variants:</p>
<table id="dateformat">
<thead><tr><th>Language</th><th>Country</th><th>Code</th><th>Short Date</th><th>Long Date</th></tr></thead>
<tbody>
<tr><td>English</td><td>USA</td><td>en-US</td><td></td><td></td></tr>
<tr><td>English</td><td>Canada</td><td>en-CA</td><td></td><td></td></tr>
<tr><td>English</td><td>Australia</td><td>en-AU</td><td></td><td></td></tr>
<tr><td>English</td><td>UK</td><td>en-GB</td><td></td><td></td></tr>
<tr><td>Spanish</td><td>Spain</td><td>es-ES</td><td></td><td></td></tr>
<tr><td>Spanish</td><td>Mexico</td><td>es-MX</td><td></td><td></td></tr>
<tr><td>Spanish</td><td>Argentina</td><td>es-AR</td><td></td><td></td></tr>
<tr><td>French</td><td>France</td><td>fr-FR</td><td></td><td></td></tr>
<tr><td>Italian</td><td>Italy</td><td>it-IT</td><td></td><td></td></tr>
<tr><td>German</td><td>Germany</td><td>de-DE</td><td></td><td></td></tr>
<tr><td>German</td><td>Austria</td><td>de-AT</td><td></td><td></td></tr>
<tr><td>Dutch</td><td>Netherlands</td><td>nl-NL</td><td></td><td></td></tr>
<tr><td>Dutch</td><td>Belgium</td><td>nl-BE</td><td></td><td></td></tr>
<tr><td>Danish</td><td>Denmark</td><td>da-DK</td><td></td><td></td></tr>
<tr><td>Norwegian</td><td>Norway</td><td>nb-NO</td><td></td><td></td></tr>
<tr><td>Portuguese</td><td>Brazil</td><td>pt-BR</td><td></td><td></td></tr>
<tr><td>Portuguese</td><td>Portugal</td><td>pt-PT</td><td></td><td></td></tr>
<tr><td>Russian</td><td>Russia</td><td>ru-RU</td><td></td><td></td></tr>
<tr><td>Chinese</td><td>China</td><td>zh-CN</td><td></td><td></td></tr>
<tr><td>Chinese</td><td>Hong Kong</td><td>zh-HK</td><td></td><td></td></tr>
<tr><td>Chinese</td><td>Taiwan</td><td>zh-TW</td><td></td><td></td></tr>
<tr><td>Japanese</td><td>Japan</td><td>ja-JP</td><td></td><td></td></tr>
<tr><td>Hindi</td><td>India</td><td>hi-IN</td><td></td><td></td></tr>
</tbody>
</table>
<p>The Date used in the table is <code>2020-01-15T18:23:45.678Z</code>.</p>
<p>The options are:</p>
<div class="code cols">
<code>shortDate = {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric"
};</code>
<code>longDate = {
era: "long",
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
hour: "numeric",
minute: "numeric",
second: "numeric",
timeZoneName: "long"
};</code>
</div>
<h2>Transliteration</h2>
<p>Text can be transliterated, i.e. converted between writing systems to make it readable to the audience or to avoid characters not available in specific fonts.
For the latter case further characters can also be simplified.</p>
<div class="code"><code>/* transliterate from other writing systems to Latin */
:root {
-ro-text-replace: 'any' 'latn' transliterate;
}
/* avoid non-ASCII characters whenever possible */
:root {
-ro-text-replace: 'any' 'latn' transliterate, 'any' 'ascii' transliterate;
}</code></div>
<table id="tl">
<thead>
<tr><th>Description</th><th>normal</th><th><code>'any' 'latn'</ code></th><th><code>'any' 'ascii'</code></th><th><code>'de' 'ascii'</code></th><th><code>'any' 'latn'<br>'any' 'ascii'</code></th></tr>
</thead>
<tbody>
<tr><th>German</th><td>Gänsefüßchen</td><td>Gänsefüßchen</td><td>Gänsefüßchen</td><td>Gänsefüßchen</td><td>Gänsefüßchen</td></tr>
<tr><th>Russian</th><td>русский язык</td><td>русский язык</td><td>русский язык</td><td>русский язык</td><td>русский язык</td></tr>
<tr><th>Greek</th><td>Ελληνικά</td><td>Ελληνικά</td><td>Ελληνικά</td><td>Ελληνικά</td><td>Ελληνικά</td></tr>
<tr><th>Japanese</th><td>日本語</td><td>日本語</td><td>日本語</td><td>日本語</td><td>日本語</td></tr>
<tr><th>Math</th><td>6 ÷ 3 × ¼ = ½</td><td>6 ÷ 3 × ¼ = ½</td><td>6 ÷ 3 × ¼ = ½</td><td>6 ÷ 3 × ¼ = ½</td><td>6 ÷ 3 × ¼ = ½</td></tr>
<tr><th>Symbols</th><td>© « ® »</td><td>© « ® »</td><td>© « ® »</td><td>© « ® »</td><td>© « ® »</td></tr>
</tbody>
</table>
</body>
</html>