Lorem Ipsum

This is a page in which I test and trial formatting, features, and typography by seeing how they interact in complex arrangements to catch edge cases. If you’d like to read the logic behind all of this, check out my posts on both The Design of This Site and The Implementation of This Site.

Text Formatting

Escaping markdown can be done with *some slashes* (like so \*some slashes\*).

Normal text. Italic text. Bold text. Bold italic text. Strikethrough text. Italic strikethrough text. Bold strikethrough text. Bold italic strikethrough text. Code text. Code italic text. Code bold text. Code bold italic text. Code strikethrough text. Code bold italic strikethrough text.

Normal superscript^sup. Normal subscript_sub. Italic superscript^sup. Italic subscript_sub. Bold superscript^sup. Bold subscript_sub. Bold italic superscript^sup. Bold italic subscript_sub. Strikethrough superscript^sub. Strikethrough subscript_sub. Bold italic strikethrough superscript^sup. Bold italic strikethrough subscript_sub.

Superscript and subscript together^sup_sub.

You can define structure with HTML and then style it with CSS. You can do more interactive stuff with JS.

These are abbreviations that aren’t actually formatted like abbreviations but should be handled during building. NASA. DVD. GIF. 200MB.

You can do a hard refresh on a webpage using Ctrl + Shift + R

pneumonoultramicroscopicsilicovolcanoconiosisisaverylongwordpneumonoultramicroscopicsilicovolcanoconiosisisaverylongwordpneumonoultramicroscopicsilicovolcanoconiosisisaverylongword

Maths

100⁄200 158⁄851

≈ ~ = ≠ ∙ ÷ − + ± × ∕ > ≥ ∞ < ≤ % √

I present: numbers. 10, 20, 30, 40, 800. Threw you off there. 1000. 2500. 95837593756191234567890. That’s some numbers for ya.

Swashes

Heading Levels

Quod provident corporis natus. Voluptatem sunt magnam nobis quo quas repudiandae magnam. Qui maxime dolor harum. Aspernatur tempore ea id sed fugit. Dolores cum tenetur in quisquam et maiores quam. Suscipit est aperiam rerum consectetur velit officiis.

Heading Level 4

Aliquam non sed beatae. Deleniti laborum ut eveniet autem. Aut incidunt sint ex ut occaecati. Praesentium et ut cumque beatae.

Heading Level 5

Quaerat deleniti quos accusamus sit qui. Est temporibus fugiat cupiditate aut sit hic ex cum. Ea quaerat non dolor et iure repellendus velit. Nihil ea tempore ut libero aperiam nulla aut necessitatibus. Est praesentium fuga rerum aut ipsa et aut id.

Heading Level 6

Aliquam laborum voluptate molestiae illo sunt dolorum. Qui fuga qui fuga impedit libero tenetur ex aliquam. Sit molestiae ut sint nulla deserunt molestiae eos veritatis. Neque perferendis culpa ad omnis. Ipsum nisi facere cum molestiae aut possimus exercitationem repellat. Voluptatum blanditiis optio officiis et quo.

Links

Normal internal link. Code internal link. Bold italic strikethrough subscript internal link_sub. Bold italic strikethrough superscript external link^sup.

Anchor link. Code anchor link. Bold italic strikethrough subscript anchor link_sub. Bold italic strikethrough superscript external link^sup.

External link. Code external link. Bold italic strikethrough subscript external link_sub. Bold italic strikethrough superscript external link^sup.

Here is an abbreviation with a link: AM.

Quick Links

(Links specified with <>)
https://vale.rocks
example@example.com

Lists

Unordered List

• Item one
  • Item one’s child
    • Item one’s child’s child
      • Item one’s child’s child’s child
• Item two
• Item three

Ordered List

1. Item one
   1. Item one’s child
      1. Item one’s child’s child
      2. Item one’s child’s child’s sibling
         1. Item one’s child’s child’s sibling’s child
2. Item two
3. Item three

Task List

• Completed task
• Task left to do

Blockquotes

Normal text. Italic text. Bold text. Bold italic text. Strikethrough text. Italic strikethrough text. Bold strikethrough text. Bold italic strikethrough text. Code text. Code italic text. Code bold text. Code bold italic text. Code strikethrough text. Code bold italic strikethrough text.

Id deleniti eveniet non placeat quia libero. Non soluta consequatur sit accusamus illum veniam. Animi ab ab omnis iusto aut. Porro tempora fugit placeat perspiciatis et rem consectetur sequi.

Normal text. Italic text. Bold text. Bold italic text. Strikethrough text. Italic strikethrough text. Bold strikethrough text. Bold italic strikethrough text. Code text. Code italic text. Code bold text. Code bold italic text. Code strikethrough text. Code bold italic strikethrough text.

Id deleniti eveniet non placeat quia libero. Non soluta consequatur sit accusamus illum veniam. Animi ab ab omnis iusto aut. Porro tempora fugit placeat perspiciatis et rem consectetur sequi.

Normal text. Italic text. Bold text. Bold italic text. Strikethrough text. Italic strikethrough text. Bold strikethrough text. Bold italic strikethrough text. Code text. Code italic text. Code bold text. Code bold italic text. Code strikethrough text. Code bold italic strikethrough text.

Id deleniti eveniet non placeat quia libero. Non soluta consequatur sit accusamus illum veniam. Animi ab ab omnis iusto aut. Porro tempora fugit placeat perspiciatis et rem consectetur sequi.

Normal text. Italic text. Bold text. Bold italic text. Strikethrough text. Italic strikethrough text. Bold strikethrough text. Bold italic strikethrough text. Code text. Code italic text. Code bold text. Code bold italic text. Code strikethrough text. Code bold italic strikethrough text.

Id deleniti eveniet non placeat quia libero. Non soluta consequatur sit accusamus illum veniam. Animi ab ab omnis iusto aut. Porro tempora fugit placeat perspiciatis et rem consectetur sequi.

Details

Tables

Admonitions

Codeblocks

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Lorem Ipsum Generator</title>
		<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
		<main class="container">
			<h1>Lorem Ipsum Generator</h1>
			<div class="controls">
				<button id="generate">Generate Text</button>
				<select id="paragraphs">
					<option value="1">1 Paragraph</option>
					<option value="3">3 Paragraphs</option>
					<option value="5">5 Paragraphs</option>
				</select>
			</div>
		</main>
		<script src="script.js"></script>
	</body>
</html>

/* Example comment */

:root {
	--accent-color: #e74c3c;
	--text-color: #333;
}

.controls {
	margin: 0 auto;
}

button,
select {
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
}

button {
	background: var(--accent-color);
	color: var(--text-color);

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}
}

class LoremIpsumGenerator {
	constructor() {
		this.words = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "sed", "do", "eiusmod", "tempor"];
	}

	generateSentence() {
		const length = 8 + Math.floor(Math.random() * 8);
		return (
			Array(length)
				.fill()
				.map(() => this.words[Math.floor(Math.random() * this.words.length)])
				.join(" ")
				.charAt(0)
				.toUpperCase() +
			this.words.slice(1) +
			"."
		);
	}

	generateParagraph() {
		const sentences = 3 + Math.floor(Math.random() * 4);
		return Array(sentences)
			.fill()
			.map(() => this.generateSentence())
			.join(" ");
	}
}

const generator = new LoremIpsumGenerator();
document.getElementById("generate").addEventListener("click", () => {
	const paragraphs = document.getElementById("paragraphs").value;
	const output = Array(parseInt(paragraphs))
		.fill()
		.map(() => generator.generateParagraph())
		.join("\n\n");
	document.getElementById("output").textContent = output;
});

use rand::Rng;
use std::collections::HashMap;

struct LoremIpsum {
    words: Vec<String>,
    cache: HashMap<usize, String>,
}

impl LoremIpsum {
    fn new() -> Self {
        let words = vec![
            "lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit"
        ]
        .iter()
        .map(|&s| s.to_string())
        .collect();

        LoremIpsum {
            words,
            cache: HashMap::new(),
        }
    }

    fn generate_paragraph(&mut self, seed: usize) -> String {
        if let Some(cached) = self.cache.get(&seed) {
            return cached.clone();
        }

        let mut rng = rand::thread_rng();
        let sentence_count = rng.gen_range(3..7);

        let paragraph: String = (0..sentence_count)
            .map(|_| self.generate_sentence(&mut rng))
            .collect::<Vec<_>>()
            .join(" ");

        self.cache.insert(seed, paragraph.clone());
        paragraph
    }

    fn generate_sentence(&self, rng: &mut impl rand::Rng) -> String {
        let word_count = rng.gen_range(6..12);
        let mut sentence: String = (0..word_count)
            .map(|_| {
                let word = &self.words[rng.gen_range(0..self.words.len())];
                word.to_string()
            })
            .collect::<Vec<_>>()
            .join(" ");

        sentence.chars().next().unwrap().to_uppercase().to_string() + &sentence[1..] + "."
    }
}

Inputs

End/Side Notes

There is a note after this ¹.

There is not a note after this.

This is just some text.

Here are a lot of them, to see if they break… ^{2 3 4 5 6 7 8}.

Definitions

Frood

Someone who is really amazingly together.

Defenestration

The act of throwing someone or something out of a window.

Schlock

Something that is low-quality, junky, or tacky.

Flibbertigibbet

A scatterbrained, silly person.

Doozy

Some unusual. Usually troublesome.

Figures

Standard image not in a figure:

Some placeholder text for presenting figure placements. Hopefully things float where they should. If they don’t, that’ll be wickedly annoying.

Really annoying. I spend a lot of time trying to get things to look correct on this godforsaken site, and then I go to take a break and check out Hacker News only to find number one on the front page is some rando’s default WordPress template.

At least the super-ugly websites made by hackers are stylised, even if ugly. I’d take an ugly design built with intent any day over a template with no care put into it.

‘Yo, your site is broken.’ ‘On what browser?’ ‘Samsung Internet.’ ‘Sounds about right.’

Genuine interaction I have fairly frequently. What an awful excuse for a browser. Did they forget how to update Chromium?

Y’know what, maybe I should just give up. Maybe the real lesson we’ve learnt along the way is that people don’t notice good design but hate design that is different. Different and good? Bad. Different and bad? Unique.

If this site were a book, rather than a web page, I’d rip up the pages, type everything out on a typewriter, and run it through a photocopier. Then I’d staple all the pages together haphazardly and just start throwing it at people like a madman.

They’d lock me up, sure, but at least nobody would be confused by small caps. I mean, seriously, guys. Small caps. They aren’t difficult to get a grasp on.

Colour Palette

Black Dark Grey Grey Bright Grey White Bright White Red Bright Red Orange Bright Orange Yellow Bright Yellow Green Bright Green Blue Bright Blue Cyan Bright Cyan Magenta Bright Magenta

Horizontal Rule

And finally, a nice horizontal rule…