@data-allow-missing-images : The Missing Images Tolerance Attribute
The data-allow-missing-images attribute controls error handling behavior when image files cannot be loaded in Scryber PDF documents. Setting this attribute to true enables graceful degradation, allowing document generation to continue even when images are missing, inaccessible, or invalid, instead of throwing exceptions that halt the process.
Usage
The data-allow-missing-images attribute provides error tolerance for images:
- Controls behavior when image files are missing or inaccessible
- Set to
trueto allow missing images without throwing errors - Set to
false(default) for strict validation requiring all images - Maps to the
AllowMissingImagesproperty on Image component - Useful for dynamic environments with optional images
- Enables graceful degradation in production documents
- Works with all image loading methods (src, data-img-data, data-img)
- Applies to individual
<img>elements (per-image control) - Can be combined with
altattribute for missing image text
<!-- Default: Missing image throws error -->
<img src="photo.jpg" width="200pt" height="150pt" />
<!-- Lenient: Missing image allowed, document generation continues -->
<img src="photo.jpg"
width="200pt" height="150pt"
data-allow-missing-images="true" />
<!-- With alternative text for missing images -->
<img src=""
width="150pt" height="100pt"
alt="User Photo (if available)"
data-allow-missing-images="true" />
<!-- Dynamic image with error tolerance -->
<img src=""
width="300pt" height="200pt"
data-allow-missing-images="true"
style="border: 1pt solid #ddd;" />
Supported Elements
The data-allow-missing-images attribute is used exclusively with:
Image Element
<img>- Displays images in PDF documents (primary use)
Binding Values
The data-allow-missing-images attribute supports data binding for dynamic error handling:
<!-- Static value -->
<img src="optional-image.jpg"
width="200pt" height="150pt"
data-allow-missing-images="true" />
<!-- Dynamic value from model -->
<img src=""
width="200pt" height="150pt"
data-allow-missing-images="" />
<!-- Conditional tolerance -->
<img src=""
width="200pt" height="150pt"
data-allow-missing-images="" />
<!-- Different tolerance for different images -->
<template data-bind="">
<img src=""
width="150pt" height="150pt"
data-allow-missing-images=""
alt="" />
</template>
Data Model Example:
{
"imagePath": "photos/user-photo.jpg",
"allowMissingImages": true,
"isOptional": true,
"photos": [
{
"url": "photo1.jpg",
"optional": false,
"caption": "Required photo"
},
{
"url": "photo2.jpg",
"optional": true,
"caption": "Optional photo"
}
]
}
Notes
Default Behavior (Strict Mode)
By default, when data-allow-missing-images is not set or is false:
Missing Image File:
- Exception is thrown immediately
- Document generation stops
- Error message identifies the missing file
- Stack trace available for debugging
<!-- Strict mode: Error thrown if photo.jpg doesn't exist -->
<img src="photo.jpg" width="200pt" height="150pt" />
<!-- Equivalent explicit strict mode -->
<img src="photo.jpg"
width="200pt" height="150pt"
data-allow-missing-images="false" />
Benefits of Strict Mode:
- Ensures document integrity
- Catches missing files during development
- Prevents incomplete documents in production
- Clear error messages for troubleshooting
Lenient Behavior (Allow Missing)
When data-allow-missing-images="true":
Missing Image File:
- No exception is thrown
- Document generation continues
- Image space may be empty or show placeholder
- Error is logged to trace output (if logging enabled)
- Alternative text (if provided) may be shown
<!-- Lenient mode: Continue if photo.jpg doesn't exist -->
<img src="photo.jpg"
width="200pt" height="150pt"
data-allow-missing-images="true"
alt="User Photo" />
Benefits of Lenient Mode:
- Enables optional images
- Graceful degradation for user-uploaded content
- Robust document generation in dynamic environments
- Suitable for variable image availability
When to Use Allow Missing Images
Use data-allow-missing-images="true" for:
- User-Generated Content: Images uploaded by users that may not always be present
<img src="" width="100pt" height="100pt" data-allow-missing-images="true" alt="User Avatar" /> - Optional Images: Images that enhance but aren’t critical to the document
<img src="" width="150pt" height="50pt" data-allow-missing-images="true" /> - Dynamic Content: Images from external sources that may be temporarily unavailable
<img src="https://api.example.com/image/" width="200pt" height="150pt" data-allow-missing-images="true" /> - Template Reuse: Shared templates used with varying data sources
<img src="" width="200pt" height="150pt" data-allow-missing-images="true" alt="Product Image" /> - Beta/Development Features: New image sources being tested
<img src="" width="200pt" height="150pt" data-allow-missing-images="true" />
Use default strict mode (false) for:
- Critical Images: Logos, headers, required branding
- Static Assets: Images that should always exist
- Development: To catch missing files early
- Quality Control: Ensuring complete documents
Error Handling Flow
When image loading fails with data-allow-missing-images="true":
- File Access Attempt: System tries to load image from src/data-img-data
- Failure Detection: File not found, network error, or invalid format
- Error Logging: Error details logged to trace output (if enabled)
- Graceful Continuation: No exception thrown
- Rendering: Document continues without the image
- Alternative Content: Alt text or empty space may appear
<!-- With logging enabled, missing image logs warning but continues -->
<img src="missing-file.jpg"
width="200pt" height="150pt"
data-allow-missing-images="true"
alt="This image is missing" />
Interaction with Conformance Mode
The attribute works in conjunction with parser conformance mode:
Strict Conformance + data-allow-missing-images=”false” (default):
- Missing images throw exceptions
- Document generation stops immediately
Strict Conformance + data-allow-missing-images=”true”:
- Missing images are allowed
- Document generation continues
- Per-image override of strict conformance
Lax Conformance + data-allow-missing-images=”false”:
- Missing images may log errors but might not stop generation
- Behavior depends on implementation
Lax Conformance + data-allow-missing-images=”true”:
- Missing images definitely allowed
- Explicit confirmation of lenient behavior
Binary Data with Allow Missing
The attribute works with all image loading methods:
<!-- Missing binary data allowed -->
<img data-img-data=""
data-img-type="image/jpeg"
width="200pt" height="150pt"
data-allow-missing-images="true" />
<!-- Missing ImageData object allowed -->
<img data-img=""
width="200pt" height="150pt"
data-allow-missing-images="true" />
Combining with Alternative Text
Use alt attribute to provide text when images are missing:
<!-- Descriptive alternative text -->
<img src=""
width="150pt" height="150pt"
alt="User photo for "
data-allow-missing-images="true" />
<!-- Informative message -->
<img src=""
width="400pt" height="300pt"
alt="Sales chart - data visualization not available"
data-allow-missing-images="true" />
The alt text may be displayed or used for accessibility when the image is missing.
Performance Considerations
Allowing missing images affects performance:
Network Images:
<!-- May cause timeout waits for unreachable URLs -->
<img src="https://slow-server.com/image.jpg"
width="200pt" height="150pt"
data-allow-missing-images="true" />
Consider timeout settings for network images when using lenient mode.
Multiple Optional Images:
<!-- Each attempt takes time, even when failing gracefully -->
<template data-bind="">
<img src=""
width="100pt" height="100pt"
data-allow-missing-images="true" />
</template>
Pre-validate image availability when possible to improve performance.
Best Practices
- Be Explicit: Always specify the attribute for clarity
<!-- Good: Explicit intention --> <img src="logo.jpg" width="100pt" data-allow-missing-images="false" /> <img src="optional.jpg" width="100pt" data-allow-missing-images="true" /> - Provide Alt Text: Always include alt text for missing images
<img src="" width="150pt" height="150pt" alt="Photo of " data-allow-missing-images="true" /> - Log and Monitor: Enable logging to track missing images
// Enable trace logging to see missing image warnings document.TraceLog.SetRecording(TraceRecordLevel.Verbose); - Validate in Development: Use strict mode during development
<!-- Development: Catch issues early --> <img src="" width="200pt" height="150pt" /> <!-- Production: Allow graceful degradation --> <img src="" width="200pt" height="150pt" data-allow-missing-images="true" /> - Pre-Check Availability: Validate image existence before document generation
// Pseudo-code: Check before generating if (File.Exists(model.ImagePath)) { model.ImageAvailable = true; } - Fallback Images: Provide fallback for missing images
<!-- If userPhoto missing, use default avatar --> <img src="" width="100pt" height="100pt" data-allow-missing-images="true" />
Debugging Missing Images
When images fail to load:
With Logging Enabled:
Warning: Image source 'photos/missing.jpg' could not be loaded.
Error: File not found at path 'C:\path\photos\missing.jpg'
Common Causes:
- File doesn’t exist at specified path
- Incorrect file path (typo, wrong directory)
- File permissions issue
- Network unavailable (for URLs)
- Invalid image format
- Corrupt image file
- Binary data is null or empty
Troubleshooting Steps:
- Verify file exists at exact path
- Check file permissions
- Validate image format
- Test network connectivity (for URLs)
- Enable trace logging
- Use absolute paths for testing
Environment-Specific Behavior
Different behaviors for different environments:
<!-- Model: { isProduction: true, allowMissing: true } -->
<!-- Development: Strict -->
<img src=""
width="200pt" height="150pt"
data-allow-missing-images="" />
<!-- Production: Lenient -->
Security Considerations
Be cautious with path validation:
<!-- Validate and sanitize user-provided paths -->
<img src=""
width="200pt" height="150pt"
data-allow-missing-images="true" />
Don’t expose file system details in error messages:
- Enable lenient mode to prevent path disclosure
- Log errors securely server-side
- Don’t include error details in generated PDFs
Examples
Basic Missing Image Tolerance
<!-- Image may or may not exist -->
<img src="optional-banner.jpg"
width="600pt" height="200pt"
data-allow-missing-images="true" />
<!-- Critical logo - must exist -->
<img src="company-logo.png"
width="150pt" height="50pt"
data-allow-missing-images="false" />
<!-- User photo - optional -->
<img src=""
width="100pt" height="100pt"
alt="User Photo"
data-allow-missing-images="true" />
User Profile with Optional Avatar
<!-- Model: { user: { name: "John Doe", avatar: "avatars/john.jpg" | null } } -->
<div style="text-align: center; padding: 20pt;">
<!-- Avatar may not exist for all users -->
<img src=""
width="150pt" height="150pt"
alt=""
data-allow-missing-images="true"
style="border-radius: 75pt; border: 3pt solid #336699;" />
<h2></h2>
</div>
Product Catalog with Variable Images
<!-- Model: { products: [
{ name: "Widget A", image: "products/widget-a.jpg", price: 29.99 },
{ name: "Widget B", image: null, price: 39.99 } // No image
]} -->
<div>
<h1>Product Catalog</h1>
<template data-bind="">
<div style="border: 1pt solid #ddd; padding: 15pt; margin-bottom: 20pt;">
<!-- Some products may not have images -->
<img src=""
width="200pt" height="200pt"
alt=""
data-allow-missing-images="true"
style="display: block; margin: 0 auto 10pt auto;" />
<h2 style="text-align: center;"></h2>
<p style="text-align: center; font-size: 18pt; color: #336699;">
$
</p>
</div>
</template>
</div>
Report with Optional Charts
<!-- Model: {
report: { title: "Sales Analysis" },
charts: [
{ path: "charts/sales-trend.png", available: true },
{ path: "charts/forecast.png", available: false } // Not generated yet
]
} -->
<div>
<h1></h1>
<template data-bind="">
<div style="margin: 30pt 0;">
<h2>Sales Trend Chart</h2>
<!-- Chart may not be generated yet -->
<div style="text-align: center; padding: 20pt; background-color: #f9f9f9;">
<img src=""
width="600pt" height="400pt"
alt="Chart not available"
data-allow-missing-images="true"
style="border: 1pt solid #ddd;" />
</div>
<p style="text-align: center; font-style: italic; color: #666;">
</p>
</div>
</template>
</div>
Employee Directory with Photos
<!-- Model: { employees: [
{ name: "Alice", photo: "photos/alice.jpg", dept: "Engineering" },
{ name: "Bob", photo: null, dept: "Sales" } // Photo not provided
]} -->
<div>
<h1>Employee Directory</h1>
<template data-bind="">
<div style="display: flex; align-items: center; padding: 15pt;
border-bottom: 1pt solid #ddd;">
<!-- Some employees may not have photos -->
<img src=""
width="80pt" height="100pt"
alt=""
data-allow-missing-images="true"
style="border: 1pt solid #ccc; margin-right: 20pt;" />
<div>
<h3 style="margin: 0 0 5pt 0;"></h3>
<p style="margin: 0; color: #666;"></p>
</div>
</div>
</template>
</div>
Dynamic External Images
<!-- Model: { articles: [
{ title: "Article 1", imageUrl: "https://cdn.example.com/img1.jpg" },
{ title: "Article 2", imageUrl: "https://cdn.example.com/img2.jpg" }
]} -->
<div>
<h1>News Articles</h1>
<template data-bind="">
<div style="margin: 20pt 0; padding: 15pt; border: 1pt solid #ddd;">
<!-- External images may be unavailable -->
<img src=""
width="100%" height="200pt"
alt=" image"
data-allow-missing-images="true"
style="margin-bottom: 10pt; border: 1pt solid #ccc;" />
<h2></h2>
<p>Article content...</p>
</div>
</template>
</div>
Conditional Missing Image Handling
<!-- Model: {
isDevelopment: false,
isProduction: true,
images: [...]
} -->
<template data-bind="">
<!-- Strict in development, lenient in production -->
<img src=""
width="200pt" height="150pt"
data-allow-missing-images=""
alt="" />
</template>
Real Estate Listings with Variable Photos
<!-- Model: { properties: [
{
address: "123 Main St",
photos: ["p1.jpg", "p2.jpg", "p3.jpg", null, null] // Only 3 photos
}
]} -->
<div>
<h1>Property Listings</h1>
<template data-bind="">
<div style="page-break-inside: avoid; margin: 20pt 0;">
<h2></h2>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10pt;">
<template data-bind="">
<!-- Some photo slots may be empty -->
<img src=""
width="180pt" height="135pt"
alt="Property photo"
data-allow-missing-images="true"
style="border: 1pt solid #ddd;" />
</template>
</div>
</div>
</template>
</div>
Invoice with Optional Logo
<!-- Model: {
invoice: { number: "INV-123", total: 1250.00 },
companyLogo: "logos/company.png" | null
} -->
<div>
<div style="display: flex; justify-content: space-between; align-items: center;
border-bottom: 2pt solid #336699; padding-bottom: 15pt;">
<!-- Logo optional for some clients -->
<img src=""
width="150pt" height="50pt"
alt="Company Logo"
data-allow-missing-images="true" />
<div style="text-align: right;">
<h1 style="margin: 0;">INVOICE</h1>
<p style="margin: 5pt 0 0 0;"></p>
</div>
</div>
<h2>Total: $</h2>
</div>
Training Manual with Optional Screenshots
<div>
<h1>Software Training Manual</h1>
<h2>Step 1: Login</h2>
<p>Navigate to the login page and enter your credentials.</p>
<!-- Screenshot may not be available yet -->
<div style="text-align: center; padding: 20pt; background-color: #f9f9f9;">
<img src="screenshots/login-screen.png"
width="500pt" height="350pt"
alt="Login screen (screenshot pending)"
data-allow-missing-images="true"
style="border: 2pt solid #ddd;" />
<p style="font-size: 9pt; color: #666; margin-top: 10pt;">
Figure 1.1: Login Screen
</p>
</div>
<h2>Step 2: Dashboard</h2>
<p>After logging in, you'll see the main dashboard.</p>
<!-- Screenshot may not be available yet -->
<div style="text-align: center; padding: 20pt; background-color: #f9f9f9;">
<img src="screenshots/dashboard.png"
width="500pt" height="350pt"
alt="Dashboard (screenshot pending)"
data-allow-missing-images="true"
style="border: 2pt solid #ddd;" />
<p style="font-size: 9pt; color: #666; margin-top: 10pt;">
Figure 1.2: Main Dashboard
</p>
</div>
</div>
Social Media Style Feed
<!-- Model: { posts: [
{ user: "alice", avatar: "avatars/alice.jpg", content: "Hello!", image: "posts/1.jpg" },
{ user: "bob", avatar: null, content: "Hi!", image: null }
]} -->
<div>
<h1>Social Feed</h1>
<template data-bind="">
<div style="border: 1pt solid #ddd; padding: 15pt; margin-bottom: 15pt;
background-color: white;">
<!-- User info -->
<div style="display: flex; align-items: center; margin-bottom: 10pt;">
<!-- Avatar may be missing -->
<img src=""
width="40pt" height="40pt"
alt=""
data-allow-missing-images="true"
style="border-radius: 20pt; margin-right: 10pt;" />
<strong></strong>
</div>
<!-- Post content -->
<p><h1 id="content--the-metadata-content-value-attribute">@content : The Metadata Content Value Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute specifies the value for metadata properties in HTML <code class="language-plaintext highlighter-rouge"><meta></code> elements. It works in conjunction with the <code class="language-plaintext highlighter-rouge">name</code>, <code class="language-plaintext highlighter-rouge">property</code>, or <code class="language-plaintext highlighter-rouge">http-equiv</code> attributes to define document metadata that can be embedded in PDF properties or used for documentation purposes.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute is used with <code class="language-plaintext highlighter-rouge"><meta></code> elements to:</p>
<ul>
<li>Provide values for document metadata properties</li>
<li>Set PDF document information (author, subject, keywords)</li>
<li>Define Open Graph protocol values</li>
<li>Specify HTTP header equivalent values</li>
<li>Supply custom metadata values</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"John Smith"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Annual financial report for 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"finance, report, annual, 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Annual Report 2024"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute is supported by the following element:</p>
<table>
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge"><meta></code></td>
<td>Metadata element for document properties</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="usage-with-different-meta-types">Usage with Different Meta Types</h2>
<h3 id="with-name-attribute-standard-metadata">With <code class="language-plaintext highlighter-rouge">name</code> Attribute (Standard Metadata)</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Jane Doe"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Product catalog 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"products, catalog, shopping"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>These values are <strong>embedded in PDF document properties</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">author</code> → PDF Author field</li>
<li><code class="language-plaintext highlighter-rouge">description</code> → PDF Subject field</li>
<li><code class="language-plaintext highlighter-rouge">keywords</code> → PDF Keywords field</li>
</ul>
<h3 id="with-property-attribute-open-graphrdf">With <code class="language-plaintext highlighter-rouge">property</code> Attribute (Open Graph/RDF)</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Company Annual Report"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"document"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Financial summary"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>These values are <strong>informational</strong> in PDFs (not embedded in standard PDF metadata).</p>
<h3 id="with-http-equiv-attribute-http-headers">With <code class="language-plaintext highlighter-rouge">http-equiv</code> Attribute (HTTP Headers)</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>These values are <strong>informational</strong> in PDFs (HTTP headers don’t apply to PDF files).</p>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute fully supports data binding:</p>
<h3 id="static-content">Static Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Corporate Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Annual Report"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="dynamic-content-with-data-binding">Dynamic Content with Data Binding</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { author: "Jane Smith", reportTitle: "Q4 Report", year: 2024 } --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">" for "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"report, , financial"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="calculated-content">Calculated Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { firstName: "John", lastName: "Doe", date: "2024-01-15" } --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">" "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Report Generator v2.0 - "</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="conditional-content">Conditional Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { isPublic: false } --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"classification"</span>
<span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="pdf-metadata-embedding">PDF Metadata Embedding</h3>
<p>When generating PDFs, Scryber embeds certain metadata into the PDF document properties:</p>
<table>
<thead>
<tr>
<th>Meta Name</th>
<th>PDF Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">author</code></td>
<td>Author</td>
<td>Document creator</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">description</code></td>
<td>Subject</td>
<td>Document subject/description</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">keywords</code></td>
<td>Keywords</td>
<td>Searchable keywords</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">generator</code></td>
<td>Producer</td>
<td>Generating application</td>
</tr>
</tbody>
</table>
<p>These appear in PDF readers under <strong>File → Properties → Description</strong>.</p>
<h3 id="content-value-formats">Content Value Formats</h3>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute accepts various formats:</p>
<table>
<thead>
<tr>
<th>Format</th>
<th>Example</th>
<th>Use Case</th>
</tr>
</thead>
<tbody>
<tr>
<td>Plain text</td>
<td><code class="language-plaintext highlighter-rouge">"John Smith"</code></td>
<td>Names, titles</td>
</tr>
<tr>
<td>Comma-separated</td>
<td><code class="language-plaintext highlighter-rouge">"PDF, document, report"</code></td>
<td>Keywords</td>
</tr>
<tr>
<td>Sentences</td>
<td><code class="language-plaintext highlighter-rouge">"Annual financial report"</code></td>
<td>Descriptions</td>
</tr>
<tr>
<td>URLs</td>
<td><code class="language-plaintext highlighter-rouge">"https://example.com"</code></td>
<td>Links</td>
</tr>
<tr>
<td>Dates</td>
<td><code class="language-plaintext highlighter-rouge">"2024-01-15"</code></td>
<td>Dates (ISO format recommended)</td>
</tr>
<tr>
<td>Numbers</td>
<td><code class="language-plaintext highlighter-rouge">"1.0"</code></td>
<td>Versions</td>
</tr>
</tbody>
</table>
<h3 id="empty-content">Empty Content</h3>
<p>An empty <code class="language-plaintext highlighter-rouge">content</code> attribute is valid but results in empty metadata:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Empty author --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Equivalent to omitting the meta tag --></span>
</code></pre></div></div>
<h3 id="multiple-values">Multiple Values</h3>
<p>For properties that support multiple values (like keywords), use comma-separated values:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"finance, accounting, report, 2024, annual"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>Or use multiple meta tags with the same property:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">property=</span><span class="s">"article:tag"</span> <span class="na">content=</span><span class="s">"Finance"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"article:tag"</span> <span class="na">content=</span><span class="s">"Accounting"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"article:tag"</span> <span class="na">content=</span><span class="s">"Report"</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="example-1-basic-document-metadata">Example 1: Basic Document Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Annual Report 2024<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Finance Department"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Annual financial report for fiscal year 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"annual, report, finance, 2024"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-2-comprehensive-pdf-metadata">Example 2: Comprehensive PDF Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Technical Documentation<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Engineering Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Complete API reference documentation for version 2.0"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"API, documentation, reference, technical, guide"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"DocGen 1.5 - Scryber PDF"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-3-data-bound-metadata">Example 3: Data-Bound Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
author: "Jane Doe",
department: "Marketing",
title: "Product Catalog",
year: 2024
} --></span>
<span class="nt"><head></span>
<span class="nt"><title></span> <span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">" created by "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"catalog, products, , "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Catalog Generator - "</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-4-open-graph-metadata">Example 4: Open Graph Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Company Blog Post<span class="nt"></title></span>
<span class="c"><!-- Standard metadata --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"John Smith"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Latest insights on PDF generation"</span> <span class="nt">/></span>
<span class="c"><!-- Open Graph metadata --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Mastering PDF Generation with Scryber"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"article"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Learn advanced techniques for PDF generation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:image"</span> <span class="na">content=</span><span class="s">"https://example.com/article-image.jpg"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:url"</span> <span class="na">content=</span><span class="s">"https://example.com/blog/pdf-generation"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-5-multi-author-document">Example 5: Multi-Author Document</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Research Paper<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Dr. Jane Smith, Dr. John Doe, Dr. Sarah Johnson"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Collaborative research on machine learning applications"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"machine learning, AI, research, collaboration"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-6-detailed-keywords">Example 6: Detailed Keywords</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Product Specification<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Product Management"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Detailed specifications for Model XYZ-2000"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"product, specification, XYZ-2000, technical, features, dimensions, compatibility, performance"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-7-localized-content">Example 7: Localized Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>International Report<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Global Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"International sales report - English version"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"international, sales, global, report"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-8-version-information">Example 8: Version Information</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Software Documentation v2.1<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Documentation Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"User guide for Software v2.1"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"software, documentation, guide, v2.1"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"DocBuilder v3.0"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"version"</span> <span class="na">content=</span><span class="s">"2.1.0"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-9-corporate-document">Example 9: Corporate Document</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Quarterly Business Review<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Executive Team - Acme Corporation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Q4 2024 business review including revenue, expenses, and strategic initiatives"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"quarterly, business review, Q4, 2024, strategy, performance"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Acme Corp Q4 2024 Business Review"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"document"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Executive summary of Q4 performance"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-10-invoice-metadata">Example 10: Invoice Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { invoiceNumber: "INV-2024-001", clientName: "ABC Corp", date: "2024-01-15" } --></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Invoice <span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Accounting Department"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Invoice for - "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"invoice, , , billing"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"invoice:number"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"invoice:client"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"invoice:date"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-11-academic-paper">Example 11: Academic Paper</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Climate Change Research Paper<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Dr. Sarah Johnson, Dr. Michael Chen"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Research paper on climate change impacts in Arctic ecosystems"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"climate change, Arctic, ecosystems, environmental science, research"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"citation:title"</span> <span class="na">content=</span><span class="s">"Climate Change Impacts on Arctic Ecosystems"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"citation:author"</span> <span class="na">content=</span><span class="s">"Johnson, Sarah"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"citation:author"</span> <span class="na">content=</span><span class="s">"Chen, Michael"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"citation:publication_date"</span> <span class="na">content=</span><span class="s">"2024-01-10"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-12-training-manual">Example 12: Training Manual</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Employee Training Manual<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Human Resources Department"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Comprehensive training manual for new employees covering company policies, procedures, and best practices"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"training, manual, employees, HR, onboarding, policies, procedures"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Training Documentation System v2.0"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"training:level"</span> <span class="na">content=</span><span class="s">"beginner"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"training:duration"</span> <span class="na">content=</span><span class="s">"40 hours"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-13-legal-document">Example 13: Legal Document</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Service Level Agreement<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Legal Department - Acme Corporation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Service Level Agreement between Acme Corporation and Client Services Ltd, effective January 1, 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"SLA, service level agreement, contract, legal, terms"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"legal:contract-number"</span> <span class="na">content=</span><span class="s">"SLA-2024-045"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"legal:effective-date"</span> <span class="na">content=</span><span class="s">"2024-01-01"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"legal:parties"</span> <span class="na">content=</span><span class="s">"Acme Corporation, Client Services Ltd"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-14-conditional-metadata">Example 14: Conditional Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { isDraft: true, author: "John Doe", version: "0.9" } --></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Project Proposal<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"project, proposal, "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"version"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"status"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-15-rich-metadata-collection">Example 15: Rich Metadata Collection</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Comprehensive Document Example<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="c"><!-- Standard HTML metadata --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Corporate Documentation Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Example document showcasing comprehensive metadata usage in PDF generation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"metadata, PDF, documentation, example, comprehensive"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Scryber PDF Generator v2.0"</span> <span class="nt">/></span>
<span class="c"><!-- HTTP equivalents --></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/></span>
<span class="c"><!-- Open Graph metadata --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Comprehensive Document Example"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"document"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Showcase of metadata capabilities"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:locale"</span> <span class="na">content=</span><span class="s">"en_US"</span> <span class="nt">/></span>
<span class="c"><!-- Custom application metadata --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"app:document-id"</span> <span class="na">content=</span><span class="s">"DOC-2024-042"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"app:department"</span> <span class="na">content=</span><span class="s">"Documentation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"app:classification"</span> <span class="na">content=</span><span class="s">"public"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"app:version"</span> <span class="na">content=</span><span class="s">"1.0.0"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/meta.html">meta element</a> - The meta HTML element</li>
<li><a href="/reference/htmlattributes/name.html">name attribute</a> - Metadata property name</li>
<li><a href="/reference/htmlattributes/property.html">property attribute</a> - Open Graph properties</li>
<li><a href="/reference/htmlattributes/http-equiv.html">http-equiv attribute</a> - HTTP header equivalent</li>
<li><a href="/reference/document/properties.html">Document Properties</a> - PDF document properties</li>
<li><a href="/reference/document/info.html">Document Info</a> - PDF document information</li>
<li><a href="/reference/binding/">Data Binding</a> - Dynamic data binding</li>
<li><a href="/reference/metadata/">Metadata</a> - Complete metadata reference</li>
</ul>
<hr />
</p>
<!-- Post image (optional) -->
<img src=""
width="100%"
alt="Post image"
data-allow-missing-images="true"
hidden=""
style="margin-top: 10pt; border: 1pt solid #eee;" />
</div>
</template>
</div>
Medical Report with Optional Imaging
<!-- Model: {
patient: { name: "Jane Doe", id: "P-456" },
scans: [
{ type: "X-Ray", date: "2024-01-15", image: "scans/xray.jpg", available: true },
{ type: "MRI", date: "2024-01-20", image: "scans/mri.jpg", available: false }
]
} -->
<div>
<h1>Medical Imaging Report</h1>
<p>Patient: ()</p>
<template data-bind="">
<div style="margin: 30pt 0; page-break-inside: avoid;">
<h2> - </h2>
<!-- Scan image may still be processing -->
<div style="text-align: center; padding: 30pt; background-color: #000;">
<img src=""
width="500pt" height="500pt"
alt=" scan from "
data-allow-missing-images="true"
style="" />
</div>
<p style="text-align: center; margin-top: 10pt; font-style: italic;">
</p>
</div>
</template>
</div>
Photo Gallery with Lazy Loading
<!-- Model: { gallery: [
{ id: 1, thumbnail: "thumbs/1.jpg", loaded: true },
{ id: 2, thumbnail: "thumbs/2.jpg", loaded: true },
{ id: 3, thumbnail: "thumbs/3.jpg", loaded: false } // Not loaded yet
]} -->
<div>
<h2>Photo Gallery</h2>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10pt;">
<template data-bind="">
<div style="text-align: center;">
<!-- Thumbnails may not all be generated yet -->
<img src=""
width="120pt" height="90pt"
alt="Photo "
data-allow-missing-images="true"
style="border: 2pt solid #ddd; background-color: #f0f0f0;" />
<p style="margin: 5pt 0 0 0; font-size: 8pt; color: #666;">
</p>
</div>
</template>
</div>
</div>
Certificate with Optional Seal
<!-- Model: {
certificate: {
recipient: "John Doe",
course: "Advanced PDF Development",
date: "2024-01-15",
seal: "seals/official-seal.png" | null
}
} -->
<div style="border: 10pt double #336699; padding: 50pt; text-align: center;">
<h1 style="font-size: 32pt;">Certificate of Completion</h1>
<p style="font-size: 16pt; margin: 30pt 0;">This certifies that</p>
<h2 style="font-size: 28pt; color: #336699; margin: 20pt 0;">
</h2>
<p style="font-size: 16pt; margin: 30pt 0;">has successfully completed</p>
<h3 style="font-size: 20pt; margin: 20pt 0;">
</h3>
<p style="font-size: 14pt; margin: 30pt 0;">
Date:
</p>
<!-- Official seal may not be available -->
<div style="margin-top: 50pt;">
<img src=""
width="150pt" height="150pt"
alt="Official Seal"
data-allow-missing-images="true"
style="opacity: 0.8;" />
</div>
</div>
Product Comparison with Variable Images
<!-- Model: { products: [
{ name: "Basic", image: "products/basic.jpg", price: 99 },
{ name: "Pro", image: null, price: 199 }, // Coming soon, no image
{ name: "Enterprise", image: "products/enterprise.jpg", price: 499 }
]} -->
<div>
<h1>Product Comparison</h1>
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background-color: #336699; color: white;">
<th style="padding: 15pt;">Product</th>
<th style="padding: 15pt;">Image</th>
<th style="padding: 15pt;">Price</th>
</tr>
</thead>
<tbody>
<template data-bind="">
<tr style="border-bottom: 1pt solid #ddd;">
<td style="padding: 15pt; font-weight: bold;"></td>
<td style="padding: 15pt; text-align: center;">
<!-- Some products may not have images yet -->
<img src=""
width="120pt" height="90pt"
alt=""
data-allow-missing-images="true"
style="border: 1pt solid #ddd;" />
</td>
<td style="padding: 15pt; text-align: right; font-size: 18pt;">
$
</td>
</tr>
</template>
</tbody>
</table>
</div>
Event Flyer with Optional Sponsor Logos
<!-- Model: {
event: { name: "Tech Conference 2024", date: "March 15, 2024" },
sponsors: [
{ name: "Company A", logo: "sponsors/company-a.png", tier: "Gold" },
{ name: "Company B", logo: null, tier: "Silver" }, // Logo pending
{ name: "Company C", logo: "sponsors/company-c.png", tier: "Bronze" }
]
} -->
<div style="text-align: center;">
<h1 style="font-size: 36pt; color: #336699;"></h1>
<h2 style="font-size: 24pt; color: #666;"></h2>
<div style="margin-top: 50pt;">
<h2>Our Sponsors</h2>
<div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 30pt;">
<template data-bind="">
<div style="text-align: center; width: 180pt;">
<!-- Some sponsor logos may not be provided yet -->
<img src=""
width="150pt" height="80pt"
alt=""
data-allow-missing-images="true"
style="border: 1pt solid #ddd; padding: 10pt;
background-color: white;" />
<p style="margin-top: 10pt; font-weight: bold;"></p>
<p style="margin: 0; font-size: 9pt; color: #666;"> Sponsor</p>
</div>
</template>
</div>
</div>
</div>
Newsletter with Optional Header Images
<!-- Model: {
newsletter: { title: "Monthly Update", issue: "Jan 2024" },
articles: [
{ title: "Article 1", headerImage: "headers/1.jpg", content: "..." },
{ title: "Article 2", headerImage: null, content: "..." } // No header
]
} -->
<div>
<h1></h1>
<p style="font-size: 12pt; color: #666;">Issue: </p>
<template data-bind="">
<div style="margin: 30pt 0; page-break-inside: avoid;">
<!-- Article header image is optional -->
<img src=""
width="100%" height="200pt"
alt=" header"
data-allow-missing-images="true"
hidden=""
style="margin-bottom: 15pt; border: 1pt solid #ddd;" />
<h2 style=""></h2>
<p><h1 id="content--the-metadata-content-value-attribute">@content : The Metadata Content Value Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute specifies the value for metadata properties in HTML <code class="language-plaintext highlighter-rouge"><meta></code> elements. It works in conjunction with the <code class="language-plaintext highlighter-rouge">name</code>, <code class="language-plaintext highlighter-rouge">property</code>, or <code class="language-plaintext highlighter-rouge">http-equiv</code> attributes to define document metadata that can be embedded in PDF properties or used for documentation purposes.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute is used with <code class="language-plaintext highlighter-rouge"><meta></code> elements to:</p>
<ul>
<li>Provide values for document metadata properties</li>
<li>Set PDF document information (author, subject, keywords)</li>
<li>Define Open Graph protocol values</li>
<li>Specify HTTP header equivalent values</li>
<li>Supply custom metadata values</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"John Smith"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Annual financial report for 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"finance, report, annual, 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Annual Report 2024"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute is supported by the following element:</p>
<table>
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge"><meta></code></td>
<td>Metadata element for document properties</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="usage-with-different-meta-types">Usage with Different Meta Types</h2>
<h3 id="with-name-attribute-standard-metadata">With <code class="language-plaintext highlighter-rouge">name</code> Attribute (Standard Metadata)</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Jane Doe"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Product catalog 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"products, catalog, shopping"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>These values are <strong>embedded in PDF document properties</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">author</code> → PDF Author field</li>
<li><code class="language-plaintext highlighter-rouge">description</code> → PDF Subject field</li>
<li><code class="language-plaintext highlighter-rouge">keywords</code> → PDF Keywords field</li>
</ul>
<h3 id="with-property-attribute-open-graphrdf">With <code class="language-plaintext highlighter-rouge">property</code> Attribute (Open Graph/RDF)</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Company Annual Report"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"document"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Financial summary"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>These values are <strong>informational</strong> in PDFs (not embedded in standard PDF metadata).</p>
<h3 id="with-http-equiv-attribute-http-headers">With <code class="language-plaintext highlighter-rouge">http-equiv</code> Attribute (HTTP Headers)</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>These values are <strong>informational</strong> in PDFs (HTTP headers don’t apply to PDF files).</p>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute fully supports data binding:</p>
<h3 id="static-content">Static Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Corporate Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Annual Report"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="dynamic-content-with-data-binding">Dynamic Content with Data Binding</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { author: "Jane Smith", reportTitle: "Q4 Report", year: 2024 } --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">" for "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"report, , financial"</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="calculated-content">Calculated Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { firstName: "John", lastName: "Doe", date: "2024-01-15" } --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">" "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Report Generator v2.0 - "</span> <span class="nt">/></span>
</code></pre></div></div>
<h3 id="conditional-content">Conditional Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { isPublic: false } --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"classification"</span>
<span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="pdf-metadata-embedding">PDF Metadata Embedding</h3>
<p>When generating PDFs, Scryber embeds certain metadata into the PDF document properties:</p>
<table>
<thead>
<tr>
<th>Meta Name</th>
<th>PDF Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">author</code></td>
<td>Author</td>
<td>Document creator</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">description</code></td>
<td>Subject</td>
<td>Document subject/description</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">keywords</code></td>
<td>Keywords</td>
<td>Searchable keywords</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">generator</code></td>
<td>Producer</td>
<td>Generating application</td>
</tr>
</tbody>
</table>
<p>These appear in PDF readers under <strong>File → Properties → Description</strong>.</p>
<h3 id="content-value-formats">Content Value Formats</h3>
<p>The <code class="language-plaintext highlighter-rouge">content</code> attribute accepts various formats:</p>
<table>
<thead>
<tr>
<th>Format</th>
<th>Example</th>
<th>Use Case</th>
</tr>
</thead>
<tbody>
<tr>
<td>Plain text</td>
<td><code class="language-plaintext highlighter-rouge">"John Smith"</code></td>
<td>Names, titles</td>
</tr>
<tr>
<td>Comma-separated</td>
<td><code class="language-plaintext highlighter-rouge">"PDF, document, report"</code></td>
<td>Keywords</td>
</tr>
<tr>
<td>Sentences</td>
<td><code class="language-plaintext highlighter-rouge">"Annual financial report"</code></td>
<td>Descriptions</td>
</tr>
<tr>
<td>URLs</td>
<td><code class="language-plaintext highlighter-rouge">"https://example.com"</code></td>
<td>Links</td>
</tr>
<tr>
<td>Dates</td>
<td><code class="language-plaintext highlighter-rouge">"2024-01-15"</code></td>
<td>Dates (ISO format recommended)</td>
</tr>
<tr>
<td>Numbers</td>
<td><code class="language-plaintext highlighter-rouge">"1.0"</code></td>
<td>Versions</td>
</tr>
</tbody>
</table>
<h3 id="empty-content">Empty Content</h3>
<p>An empty <code class="language-plaintext highlighter-rouge">content</code> attribute is valid but results in empty metadata:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Empty author --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="c"><!-- Equivalent to omitting the meta tag --></span>
</code></pre></div></div>
<h3 id="multiple-values">Multiple Values</h3>
<p>For properties that support multiple values (like keywords), use comma-separated values:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"finance, accounting, report, 2024, annual"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>Or use multiple meta tags with the same property:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">property=</span><span class="s">"article:tag"</span> <span class="na">content=</span><span class="s">"Finance"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"article:tag"</span> <span class="na">content=</span><span class="s">"Accounting"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"article:tag"</span> <span class="na">content=</span><span class="s">"Report"</span> <span class="nt">/></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="example-1-basic-document-metadata">Example 1: Basic Document Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Annual Report 2024<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Finance Department"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Annual financial report for fiscal year 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"annual, report, finance, 2024"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-2-comprehensive-pdf-metadata">Example 2: Comprehensive PDF Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Technical Documentation<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Engineering Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Complete API reference documentation for version 2.0"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"API, documentation, reference, technical, guide"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"DocGen 1.5 - Scryber PDF"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-3-data-bound-metadata">Example 3: Data-Bound Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
author: "Jane Doe",
department: "Marketing",
title: "Product Catalog",
year: 2024
} --></span>
<span class="nt"><head></span>
<span class="nt"><title></span> <span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">" created by "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"catalog, products, , "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Catalog Generator - "</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-4-open-graph-metadata">Example 4: Open Graph Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Company Blog Post<span class="nt"></title></span>
<span class="c"><!-- Standard metadata --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"John Smith"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Latest insights on PDF generation"</span> <span class="nt">/></span>
<span class="c"><!-- Open Graph metadata --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Mastering PDF Generation with Scryber"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"article"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Learn advanced techniques for PDF generation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:image"</span> <span class="na">content=</span><span class="s">"https://example.com/article-image.jpg"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:url"</span> <span class="na">content=</span><span class="s">"https://example.com/blog/pdf-generation"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-5-multi-author-document">Example 5: Multi-Author Document</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Research Paper<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Dr. Jane Smith, Dr. John Doe, Dr. Sarah Johnson"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Collaborative research on machine learning applications"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"machine learning, AI, research, collaboration"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-6-detailed-keywords">Example 6: Detailed Keywords</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Product Specification<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Product Management"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Detailed specifications for Model XYZ-2000"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"product, specification, XYZ-2000, technical, features, dimensions, compatibility, performance"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-7-localized-content">Example 7: Localized Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>International Report<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Global Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"International sales report - English version"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"international, sales, global, report"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-8-version-information">Example 8: Version Information</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Software Documentation v2.1<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Documentation Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"User guide for Software v2.1"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"software, documentation, guide, v2.1"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"DocBuilder v3.0"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"version"</span> <span class="na">content=</span><span class="s">"2.1.0"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-9-corporate-document">Example 9: Corporate Document</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Quarterly Business Review<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Executive Team - Acme Corporation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Q4 2024 business review including revenue, expenses, and strategic initiatives"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"quarterly, business review, Q4, 2024, strategy, performance"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Acme Corp Q4 2024 Business Review"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"document"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Executive summary of Q4 performance"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-10-invoice-metadata">Example 10: Invoice Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { invoiceNumber: "INV-2024-001", clientName: "ABC Corp", date: "2024-01-15" } --></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Invoice <span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Accounting Department"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Invoice for - "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"invoice, , , billing"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"invoice:number"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"invoice:client"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"invoice:date"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-11-academic-paper">Example 11: Academic Paper</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Climate Change Research Paper<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Dr. Sarah Johnson, Dr. Michael Chen"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Research paper on climate change impacts in Arctic ecosystems"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"climate change, Arctic, ecosystems, environmental science, research"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"citation:title"</span> <span class="na">content=</span><span class="s">"Climate Change Impacts on Arctic Ecosystems"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"citation:author"</span> <span class="na">content=</span><span class="s">"Johnson, Sarah"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"citation:author"</span> <span class="na">content=</span><span class="s">"Chen, Michael"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"citation:publication_date"</span> <span class="na">content=</span><span class="s">"2024-01-10"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-12-training-manual">Example 12: Training Manual</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Employee Training Manual<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Human Resources Department"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Comprehensive training manual for new employees covering company policies, procedures, and best practices"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"training, manual, employees, HR, onboarding, policies, procedures"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Training Documentation System v2.0"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"training:level"</span> <span class="na">content=</span><span class="s">"beginner"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"training:duration"</span> <span class="na">content=</span><span class="s">"40 hours"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-13-legal-document">Example 13: Legal Document</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Service Level Agreement<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Legal Department - Acme Corporation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Service Level Agreement between Acme Corporation and Client Services Ltd, effective January 1, 2024"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"SLA, service level agreement, contract, legal, terms"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"legal:contract-number"</span> <span class="na">content=</span><span class="s">"SLA-2024-045"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"legal:effective-date"</span> <span class="na">content=</span><span class="s">"2024-01-01"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"legal:parties"</span> <span class="na">content=</span><span class="s">"Acme Corporation, Client Services Ltd"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-14-conditional-metadata">Example 14: Conditional Metadata</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { isDraft: true, author: "John Doe", version: "0.9" } --></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Project Proposal<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"project, proposal, "</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"version"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"status"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="example-15-rich-metadata-collection">Example 15: Rich Metadata Collection</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
<span class="nt"><title></span>Comprehensive Document Example<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="c"><!-- Standard HTML metadata --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Corporate Documentation Team"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Example document showcasing comprehensive metadata usage in PDF generation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"metadata, PDF, documentation, example, comprehensive"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Scryber PDF Generator v2.0"</span> <span class="nt">/></span>
<span class="c"><!-- HTTP equivalents --></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/></span>
<span class="c"><!-- Open Graph metadata --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Comprehensive Document Example"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"document"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Showcase of metadata capabilities"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:locale"</span> <span class="na">content=</span><span class="s">"en_US"</span> <span class="nt">/></span>
<span class="c"><!-- Custom application metadata --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"app:document-id"</span> <span class="na">content=</span><span class="s">"DOC-2024-042"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"app:department"</span> <span class="na">content=</span><span class="s">"Documentation"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"app:classification"</span> <span class="na">content=</span><span class="s">"public"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"app:version"</span> <span class="na">content=</span><span class="s">"1.0.0"</span> <span class="nt">/></span>
<span class="nt"></head></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/meta.html">meta element</a> - The meta HTML element</li>
<li><a href="/reference/htmlattributes/name.html">name attribute</a> - Metadata property name</li>
<li><a href="/reference/htmlattributes/property.html">property attribute</a> - Open Graph properties</li>
<li><a href="/reference/htmlattributes/http-equiv.html">http-equiv attribute</a> - HTTP header equivalent</li>
<li><a href="/reference/document/properties.html">Document Properties</a> - PDF document properties</li>
<li><a href="/reference/document/info.html">Document Info</a> - PDF document information</li>
<li><a href="/reference/binding/">Data Binding</a> - Dynamic data binding</li>
<li><a href="/reference/metadata/">Metadata</a> - Complete metadata reference</li>
</ul>
<hr />
</p>
</div>
</template>
</div>
Team Roster with Missing Photos
<!-- Model: { team: [
{ name: "Alice", photo: "team/alice.jpg", role: "Lead", bio: "..." },
{ name: "Bob", photo: null, role: "Developer", bio: "..." },
{ name: "Carol", photo: "team/carol.jpg", role: "Designer", bio: "..." }
]} -->
<div>
<h1>Meet Our Team</h1>
<template data-bind="">
<div style="display: flex; padding: 20pt; margin: 15pt 0;
border: 1pt solid #ddd; background-color: #f9f9f9;">
<!-- Some team members may not have photos yet -->
<img src=""
width="120pt" height="150pt"
alt=""
data-allow-missing-images="true"
style="border: 2pt solid #336699; margin-right: 20pt;" />
<div style="flex: 1;">
<h2 style="margin: 0 0 5pt 0;"></h2>
<h3 style="margin: 0 0 15pt 0; color: #336699;"></h3>
<p style="margin: 0;"></p>
</div>
</div>
</template>
</div>
See Also
- img - Image element (uses data-allow-missing-images attribute)
- src - Image source attribute
- data-img - Binary image data attributes
- alt - Alternative text for images
- width - Width attribute for sizing
- height - Height attribute for sizing
- Data Binding - Dynamic content and attribute values
- Error Handling - Error handling and conformance modes
- Logging - Trace logging configuration