for extra-complex tables
* -> use | for paragraph-length cell content
* -> use | when manual line breaks/indentation would help readability
* - dl.switch for switch statements
* - ol.algorithm for algorithms (helps to visualize nesting)
* - .figure and .caption (HTML4) and figure and figcaption (HTML5)
* -> .sidefigure for right-floated figures
* - ins/del
*
* Code
* - pre and code
*
* Special Sections
* - .note for informative notes (div, p, span, aside, details)
* - .example for informative examples (div, p, pre, span)
* - .issue for issues (div, p, span)
* - .assertion for assertions (div, p, span)
* - .advisement for loud normative statements (div, p, strong)
* - .annoying-warning for spec obsoletion notices (div, aside, details)
*
* Definition Boxes
* - pre.def for WebIDL definitions
* - table.def for tables that define other entities (e.g. CSS properties)
* - dl.def for definition lists that define other entitles (e.g. HTML elements)
*
* Numbering
* - .secno for section numbers in .toc and headings (3.2)
* - .marker for source-inserted example/figure/issue numbers (Issue 4)
* - ::before styled for CSS-generated issue/example/figure numbers:
* -> Documents wishing to use this only need to add
* figcaption::before,
* .caption::before { content: "Figure " counter(figure) " "; }
* .example::before { content: "Example " counter(example) " "; }
* .issue::before { content: "Issue " counter(issue) " "; }
*
* Header Stuff (ignore, just don't conflict with these classes)
* - .head for the header
* - .copyright for the copyright
*
* Miscellaneous
* - .overlarge for things that should be as wide as possible, even if
* that overflows the body text area. This can be used on an item or
* on its container, depending on the effect desired.
* Note that this styling basically doesn't help at all when printing,
* since A4 paper isn't much wider than the max-width here.
* It's better to design things to fit into a narrower measure if possible.
* - js-added ToC jump links (see fixup.js)
*/
```
--------------------------------
### Property/Descriptor Definition Table Styling (CSS)
Source: https://github.com/zxfr/pd4ml-examples/blob/master/src/main/java/html/H001.htm
Styles for definition tables, inheriting the '.def' box styling. This includes setting table width, border spacing, cell padding, vertical alignment, and bottom borders for rows. It also styles header cells and cells with pre-formatted text or footnotes.
```css
table.def {
width: 100%;
border-spacing: 0;
}
table.def td, table.def th {
padding: 0.5em;
vertical-align: baseline;
border-bottom: 1px solid #bbd7e9;
}
table.def > tbody > tr:last-child th, table.def > tbody > tr:last-child td {
border-bottom: 0;
}
table.def th {
font-style: italic;
font-weight: normal;
padding-left: 1em;
width: 3em;
}
table td.pre {
white-space: pre-wrap;
}
table.def td.footnote {
padding-top: 0.6em;
}
table.def td.footnote::before {
content: " ";
display: block;
height: 0.6em;
width: 4em;
border-top: thin solid;
}
```
--------------------------------
### HTML Unclosed 'i' Element Performance Issue
Source: https://github.com/zxfr/pd4ml-examples/blob/master/src/main/java/html/H001.htm
Illustrates how unclosed elements within multiple tags can lead to disproportionately poor performance. The DOM reconstruction for each paragraph progressively increases the number of nested elements, impacting rendering speed.
```html
He dreamt.
He dreamt that he ate breakfast.
Then lunch.
And finally dinner.
```
--------------------------------
### Apply Page Backgrounds by Range
Source: https://context7.com/zxfr/pd4ml-examples/llms.txt
Shows how to set distinct background colors or content for specific page ranges using the setPageBackground method in PD4ML.
```java
import java.io.ByteArrayInputStream;
import java.io.FileOutputStream;
import com.pd4ml.PD4ML;
public class PageBackgroundExample {
public static void main(String[] args) throws Exception {
String html =
"Page background example" +
"" +
"First PageSecond Page";
PD4ML pd4ml = new PD4ML();
pd4ml.setPageBackground(
"",
"1"
);
pd4ml.setPageBackground(
"",
"2+"
);
ByteArrayInputStream bais = new ByteArrayInputStream(html.getBytes());
pd4ml.readHTML(bais);
pd4ml.writePDF(new FileOutputStream("output.pdf"));
}
}
```
--------------------------------
### Entity Definition Box Styling (CSS)
Source: https://github.com/zxfr/pd4ml-examples/blob/master/src/main/java/html/H001.htm
CSS for styling entity definition boxes. It applies padding, background color, margin, and a left border to elements with the class 'def'. This helps visually distinguish definition blocks.
```css
.def {
padding: .5em 1em;
background: #DEF;
margin: 1.2em 0;
border-left: 0.5em solid #8CCBF2;
}
```
--------------------------------
### Self-Linking Headers and Elements
Source: https://github.com/zxfr/pd4ml-examples/blob/master/src/main/java/html/H001.htm
Provides styling for self-referencing links (anchors) on headings and definitions. It uses absolute positioning and pseudo-elements to display symbols like §, ¶, or #.
```css
a.self-link {
position: absolute;
top: 0;
left: calc(-1 * (3.5rem - 26px));
width: calc(3.5rem - 26px);
height: 2em;
text-align: center;
border: none;
transition: opacity .2s;
opacity: .5;
}
a.self-link::before { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
```
--------------------------------
### Dynamic Placeholder Substitution in HTML to PDF (Java)
Source: https://context7.com/zxfr/pd4ml-examples/llms.txt
Replaces $[variable] placeholders in HTML content with values from a HashMap before converting to PDF. Requires PD4ML library and a valid HTML file.
```java
import java.io.FileOutputStream;
import java.net.URL;
import java.util.HashMap;
import com.pd4ml.PD4ML;
public class PlaceholderSubstitutionExample {
public static void main(String[] args) throws Exception {
PD4ML pd4ml = new PD4ML();
// Define variable substitutions
HashMap map = new HashMap<>();
map.put("var1", "value 1");
map.put("var2", "[value 2]");
map.put("var3", "* value 3 *");
map.put("my.variable", "Dynamically inserted text");
pd4ml.setDynamicData(map);
// HTML can contain placeholders like $[var1], $[my.variable], etc.
pd4ml.readHTML(new URL("java:/advanced/A006.htm"));
pd4ml.writePDF(new FileOutputStream("with-placeholders.pdf"));
}
}
```
--------------------------------
### Manipulate form output with JavaScript
Source: https://github.com/zxfr/pd4ml-examples/blob/master/src/main/java/html/H001.htm
Demonstrates how to access a form element within the DOM and programmatically set its value using an embedded script tag.
```html
```
--------------------------------
### Configure PDF Permissions using PD4ML
Source: https://context7.com/zxfr/pd4ml-examples/llms.txt
Shows how to control document capabilities like printing or copying without a password. It uses bitwise operations on Constants to define specific permission sets.
```java
import java.io.ByteArrayInputStream;
import java.io.FileOutputStream;
import com.pd4ml.Constants;
import com.pd4ml.PD4ML;
public class PermissionsExample {
public static void main(String[] args) throws Exception {
String html = "TESTHello, World!";
PD4ML pd4ml = new PD4ML();
ByteArrayInputStream bais = new ByteArrayInputStream(html.getBytes());
pd4ml.readHTML(bais);
// Remove print permission from defaults (no password)
pd4ml.setPermissions(null, Constants.DefaultPermissions ^ Constants.AllowPrint);
pd4ml.writePDF(new FileOutputStream("restricted.pdf"));
}
}
```
--------------------------------
### Handle Image Load Event Safely with JavaScript
Source: https://github.com/zxfr/pd4ml-examples/blob/master/src/main/java/html/H001.htm
This snippet illustrates two safe ways to attach an 'onload' event handler to an image element in JavaScript. The first method uses an inline HTML attribute, and the second creates the image and attaches the handler within the same script block. Both methods ensure the event handler is set before the event can fire, avoiding race conditions.
```html
```
```javascript
var img = new Image();
img.src = 'games.png';
img.alt = 'Games';
img.onload = gamesLogoHasLoaded;
// Alternatively using addEventListener:
// img.addEventListener('load', gamesLogoHasLoaded, false);
``` |