This is a Heading Level 1 (H1)

H1 headings are typically used for main page titles and should appear only once per page.

This is a Heading Level 2 (H2)

H2 headings are used for major section titles throughout the page.

This is a Heading Level 3 (H3)

H3 headings are used for subsections within H2 sections.

This is a Heading Level 4 (H4)

H4 headings provide further subdivision of content.

This is a Heading Level 5 (H5)

H5 headings are used for minor subsections.

This is a Heading Level 6 (H6)

H6 is the smallest heading level in HTML.

Multiple Paragraph Example

This is the first paragraph. It contains multiple sentences to demonstrate how the lorem ipsum replacement will handle longer text content. The replacement algorithm should match the exact character count of this paragraph to preserve the visual layout of the page.

This is a second paragraph with different length. Lorem ipsum replacement should create text that matches this exact length to maintain the same line breaks and overall appearance.

Short paragraph here.

This is a longer paragraph that spans multiple lines and contains a variety of information. It's designed to test how well the lorem ipsum replacement handles substantial amounts of text while preserving the visual structure and layout of the original content on the webpage.

Unordered List Example

Here's a bullet point list of features:

• First feature item in the list
• Second feature with more details
• Third item that's a bit longer to show variation
• Fourth feature element
• Final bullet point item

Ordered List Example

Step-by-step instructions:

1. First step in the process
2. Second step with additional information
3. Third step that explains something important
4. Fourth step in the sequence
5. Final step to complete the task

Nested List Example

• Main item one
  • Sub-item A under main item one
  • Sub-item B with more content
• Main item two
  • Sub-item A under main item two
  • Sub-item B with details

Inline Text Formatting

This paragraph contains strong text for emphasis and also has italic emphasized text within it. You can also use bold text and italic text for styling purposes.

Here's a span element with some text and another span with different content in the same paragraph.

Mix and match: bold text with italic inside and italic with bold inside.

This paragraph has a link with text inside and another longer link with more content text to demonstrate nested text handling.

Contact Form Example

Your Full Name Email Address Password Select Your Country United States United Kingdom Canada Australia Other Country Your Message Type your message here... Submit Form Reset All Fields

Data Table Example

Product Name	Category	Price	Status
Premium Widget	Electronics	$299.99	In Stock
Standard Gadget	Accessories	$49.99	Available
Deluxe Component	Hardware	$599.99	Limited Stock
Basic Tool	Utilities	$19.99	Out of Stock

Product Card Gallery

Modern card components with image placeholders and content

Core Features

Essential features that make this product exceptional

Featured Product

Platform Statistics

Key metrics that showcase our growth and success

Div Elements

Links (Anchor Tags)

Here are some standalone links:

This is a link with descriptive text

Another link with different content

Short link

Blockquote Example

This is a blockquote element used for quotations or highlighted text. It typically contains important information or quotes from other sources that need to stand out from regular paragraph text.

Figure with Caption

Image Placeholder

Another Image

Real-World Content Example

This section contains mixed inline elements including emphasis, spans, and links with text all in one paragraph.

Product Features

• Feature One: Description with details
• Feature Two: Another description here
• Feature Three: Final feature description

Testing badges: New Featured Popular

How to Test This Page

Testing Element Scan:

1. Open the PenShot extension sidebar
2. Click on "Element Scan" button
3. Enable/disable different element type filters
4. Click button again to scan and see labeled elements

Testing Lorem Ipsum Replacement:

1. Open the PenShot extension sidebar
2. Click on "Lorem Ipsum Page" button
3. Select which element types to replace (checkboxes appear)
4. Click button again to apply replacement
5. Observe how headings get "Heading (H1/H2/etc)" labels
6. Notice how other elements get character-matched lorem ipsum

Expected Results:

• Headings should show "Heading (H1)", "Heading (H2)", etc.
• All other selected elements should have lorem ipsum matching exact character length
• Visual layout should remain identical
• Nested text in links and spans should be replaced
• Extension sidebar elements should NOT be affected

Note: This test page includes every element type that can be filtered and replaced by the PenShot extension's lorem ipsum feature.

Typography Testing Area

Click any text in this section with the Font Inspector tool to verify accurate detection of font properties.

Font Family Tests

Font Size Tests

Font Weight Tests

Font Style Tests

Letter Spacing Tests

Line Height Tests

Text Color Tests

Text Transform Tests

Text Decoration Tests

Text Alignment Tests

Complex Combinations

Ruler Measurement Test Area

Use this section to test the ruler tool's accuracy with precise measurements and visual guides.

Calibration Box - 500px × 300px

Measure the width (should show ~500px) or height (should show ~300px)

Ruler Scale with Tick Marks - 600px Total

Major ticks every 100px, minor ticks every 50px

Test Squares - Perfect Dimensions

Measure diagonally, horizontally, or vertically to verify accuracy