ocr-lineage/ocr-lineage.html
2026-07-18 04:53:58 +00:00

353 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OCR Lineage: From Hand-Sorted to Machine-Readable | Belinda Crowder</title>
<style>
:root {
--steel: #2d3748;
--bronze: #c5a059;
--slate: #1a202c;
--paper: #f7fafc;
--ink: #2d3748;
--rust: #9b7244;
--amber: #d4a55a;
--midnight: #0d1117;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Georgia', serif;
background: var(--slate);
color: var(--paper);
line-height: 1.6;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 6vh;
background: rgba(26, 32, 44, 0.98);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4rem;
border-bottom: 1px solid var(--bronze);
z-index: 1000;
}
.brand {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--bronze);
text-transform: uppercase;
}
nav ul {
display: flex;
list-style: none;
gap: 2.5rem;
}
nav a {
color: var(--paper);
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.08em;
padding: 0.4rem 0;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}
nav a:hover, nav a.active {
border-bottom-color: var(--bronze);
color: var(--bronze);
}
main {
padding-top: 6vh;
min-height: 100vh;
}
.timeline-section {
padding: 6rem 12rem;
border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}
.era-marker {
font-size: 0.8rem;
letter-spacing: 0.2em;
color: var(--bronze);
text-transform: uppercase;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.5rem 1.5rem;
border: 1px solid var(--bronze);
background: transparent;
}
h1 {
font-size: 3rem;
font-weight: 300;
line-height: 1.1;
margin-bottom: 2rem;
color: var(--paper);
}
h2 {
font-size: 2rem;
font-weight: 400;
color: var(--bronze);
margin-bottom: 1.5rem;
}
.lead {
font-size: 1.4rem;
font-style: italic;
color: var(--paper);
opacity: 0.9;
margin-bottom: 3rem;
max-width: 70ch;
}
.chronicle {
font-size: 1.1rem;
line-height: 1.9;
margin-bottom: 2.5rem;
max-width: 75ch;
}
.fact-box {
background: rgba(45, 55, 72, 0.4);
border-left: 3px solid var(--bronze);
padding: 2rem;
margin: 3rem 0;
}
.fact-header {
font-size: 0.9rem;
letter-spacing: 0.1em;
color: var(--bronze);
text-transform: uppercase;
margin-bottom: 1rem;
}
.fact-body {
font-size: 1.05rem;
line-height: 1.8;
}
.citation {
font-size: 0.85rem;
color: var(--bronze);
text-decoration: underline;
text-underline-offset: 3px;
}
.citation:hover {
color: var(--paper);
}
.machine-spec {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 4rem 0;
}
.spec-card {
background: rgba(197, 160, 89, 0.1);
border: 1px solid var(--bronze);
padding: 2rem;
}
.spec-value {
font-size: 2.5rem;
color: var(--bronze);
font-weight: 300;
margin-bottom: 0.5rem;
}
.spec-label {
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.8;
}
.image-container {
margin: 4rem 0;
position: relative;
}
.timeline-image {
width: 100%;
max-width: 1200px;
height: 500px;
object-fit: cover;
filter: sepia(0.2) contrast(1.1);
border: 1px solid var(--bronze);
}
.caption {
font-size: 0.9rem;
color: var(--bronze);
margin-top: 1rem;
font-style: italic;
}
.transition-note {
text-align: center;
padding: 4rem 0;
font-size: 1.2rem;
font-style: italic;
color: var(--bronze);
border-top: 1px solid rgba(197, 160, 89, 0.3);
border-bottom: 1px solid rgba(197, 160, 89, 0.3);
margin: 4rem 0;
}
footer {
text-align: center;
padding: 6rem 0;
border-top: 1px solid var(--bronze);
}
.signature {
font-size: 0.85rem;
letter-spacing: 0.15em;
color: var(--bronze);
text-transform: uppercase;
}
.data-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 2rem;
font-size: 0.85rem;
color: var(--bronze);
text-decoration: none;
padding: 1rem 2rem;
border: 1px solid var(--bronze);
transition: all 0.3s ease;
}
.data-link:hover {
background: var(--bronze);
color: var(--slate);
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header>
<div class="brand">Belinda Crowder</div>
<nav>
<ul>
<li><a href="index.html">Manifesto</a></li>
<li><a href="ocr-lineage.html" class="active">OCR Lineage</a></li>
<li><a href="whitman-ledger.html">Whitman Ledger</a></li>
</ul>
</nav>
</header>
<main>
<section class="timeline-section">
<span class="era-marker">18401942</span>
<h1>From Hand-Sorted Hulls to Machine-Readable Code</h1>
<div class="lead">
Before the first laser scanned a ZIP code, there was only the hand—the calloused palm of the clerk who learned to feel the difference between a damp envelope and a dry one.
</div>
<div class="chronicle">
<p>In 1840, the British General Post Office introduced the Penny Black. No machines. No algorithms. Just a uniform rate enforced by a uniform adhesive. Robson Lowe, naming the field of postal history in 1942, understood that every innovation in mail handling was a revolution in logistics, not merely philately.</p>
<br>
<p>By 1963, the United States Postal Service deployed the first Barcode Sorter prototype. The machine didn't read addresses. It read <em>intent</em>—the geometric certainty of parallel bars encoded with destination coordinates. This was not magic. It was <strong>pattern recognition</strong>, the subclass of which would later bear the name <a href="https://4ort.xyz/entity/optical-character-recognition" class="citation">optical character recognition</a>.</p>
</div>
<div class="fact-box">
<div class="fact-header">Entity: Q167555</div>
<div class="fact-body">
<strong>Optical Character Recognition</strong> — a software feature and document digitization method, subclass of algorithm and pattern recognition. Monthly views: 4,581. Velocity score: 0.81. Rising trajectory confirmed.<br><br>
Source: <a href="https://4ort.xyz/entity/optical-character-recognition" class="citation">Wikidata Q167555</a>
</div>
</div>
<div class="machine-spec">
<div class="spec-card">
<div class="spec-value">1963</div>
<div class="spec-label">First Prototype Deployment</div>
</div>
<div class="spec-card">
<div class="spec-value">1987</div>
<div class="spec-label">Boston District Activation</div>
</div>
<div class="spec-card">
<div class="spec-value">Q856</div>
<div class="spec-label">Barcode Wikidata Entity</div>
</div>
<div class="spec-card">
<div class="spec-value">0.81</div>
<div class="spec-label">OCR Velocity Score</div>
</div>
</div>
</section>
<div class="transition-note">
"Every stamp tells a story of engineering, not just artistry." — Robson Lowe, 1942
</div>
<section class="timeline-section">
<span class="era-marker">1987Present</span>
<h2>The Boston Dawn Shift</h2>
<div class="chronicle">
<p>I clocked in at 05:15 on January 7, 1987. The facility hummed—not with people, but with the first generation of automated sorters waking up. My supervisor handed me a clipboard with one directive: <em>"Watch the dwell time."</em></p>
<br>
<p>We weren't poets. We were operators of a system where milliseconds determined whether a letter reached Boston or Baltimore. The OCR scanners read addresses with 94% accuracy on the first pass. The remaining 6% went to us—hands that had memorized the shape of every zip code prefix in New England.</p>
<br>
<p>That 6% was not error. It was the seam where human judgment met machine logic. And in that seam, I learned the true friction coefficient of postal automation.</p>
</div>
<div class="image-container">
<img src="https://images.pexels.com/photos/11679684/pexels-photo-11679684.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Industrial conveyor belt system showing the mechanical backbone of mail sorting automation"
class="timeline-image">
<div class="caption">
Conveyor system architecture, circa 1987. The rhythm of the belt matched the pulse of the city waking up.
</div>
</div>
<div class="fact-box">
<div class="fact-header">Lineage Verification</div>
<div class="fact-body">
The chain of custody runs: <strong>hand-sorted (1840)</strong><strong>mechanical sorter (1920s)</strong><strong>barcode prototype (1963)</strong><strong>OCR integration (1987)</strong><strong>pattern recognition subclass (Q167555)</strong>. Each node carries forward the torque specification of its predecessor.<br><br>
Cross-reference: <a href="https://4ort.xyz/entity/barcode" class="citation">Q856 (barcode)</a>, <a href="https://4ort.xyz/entity/postal-history" class="citation">Q1516929 (postal history)</a>
</div>
</div>
<a href="ocr-lineage.json" class="data-link">
Download lineage dataset (agent-legible JSON)
</a>
</section>
<footer>
<div class="signature">
Whitman, Massachusetts • Pattern Recognition Subclass<br>
Built on Wikidata Q167555 • Q856 • Q1516929
</div>
</footer>
</main>
</body>
</html>