Skip to content

Instantly share code, notes, and snippets.

@waynegraham
Last active August 3, 2026 11:55
Show Gist options
  • Select an option

  • Save waynegraham/84a40c00f230df3d4d6ef916784c8b07 to your computer and use it in GitHub Desktop.

Select an option

Save waynegraham/84a40c00f230df3d4d6ef916784c8b07 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DSC00047 — Diplomatic transcription</title>
<style>
:root {
color-scheme: light;
--paper: #f6f1e6;
--ink: #24231f;
--muted: #6b675e;
--rule: #d5ccbb;
--low: #a34835;
--medium: #9a6a12;
--high: #38644d;
--gap: #e8e0d1;
}
* { box-sizing: border-box; }
body {
margin: 0;
color: var(--ink);
background: #dfd9ce;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.55;
}
main {
width: min(880px, calc(100% - 2rem));
margin: 2rem auto;
padding: clamp(1.25rem, 4vw, 3.5rem);
background: var(--paper);
border: 1px solid var(--rule);
box-shadow: 0 12px 40px rgb(50 43 32 / 12%);
}
header { border-bottom: 1px solid var(--rule); padding-bottom: 1.25rem; }
h1 { margin: 0 0 .35rem; font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { margin: 2rem 0 .5rem; font: 600 1rem/1.3 system-ui, sans-serif; letter-spacing: .03em; }
p { margin: .5rem 0; }
.subtitle, .note { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin-top: 1rem; font-size: .88rem; }
.key { white-space: nowrap; }
.swatch { display: inline-block; width: 1.2rem; margin-right: .3rem; border-bottom: 3px dotted; vertical-align: .15em; }
.low-key { border-color: var(--low); }
.medium-key { border-color: var(--medium); }
.high-key { border-color: var(--high); }
.transcription {
direction: rtl;
text-align: right;
font-family: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;
font-size: clamp(1.5rem, 4vw, 2.15rem);
line-height: 2.15;
}
.section {
margin: 1.4rem 0;
padding: 1rem 1.2rem;
border-right: 4px solid var(--rule);
background: rgb(255 255 255 / 28%);
}
.section-label {
direction: ltr;
text-align: left;
color: var(--muted);
font: 600 .76rem/1.3 system-ui, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
}
.line { display: block; min-height: 1.8em; }
.line-number {
float: right;
direction: ltr;
margin-left: .8rem;
color: #918a7d;
font: .7rem/3.9 system-ui, sans-serif;
}
.unclear { cursor: help; border-bottom: 3px dotted; }
.unclear.low { border-color: var(--low); background: rgb(163 72 53 / 7%); }
.unclear.medium { border-color: var(--medium); background: rgb(154 106 18 / 7%); }
.secure { border-bottom: 3px solid var(--high); }
.gap {
display: inline-block;
min-width: 5em;
padding: 0 .35em;
color: var(--muted);
background: var(--gap);
border: 1px dashed #aea492;
font: .65em/1.6 system-ui, sans-serif;
text-align: center;
vertical-align: .15em;
}
.cropped::before { content: "… "; }
footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .86rem; color: var(--muted); }
code { font-size: .9em; }
@media print {
body { background: white; }
main { width: 100%; margin: 0; border: 0; box-shadow: none; }
}
</style>
</head>
<body>
<main>
<header>
<h1>DSC00047</h1>
<p class="subtitle">Provisional diplomatic transcription from the enhanced ARW capture</p>
<div class="legend" aria-label="Transcription confidence legend">
<span class="key"><span class="swatch high-key"></span>comparatively high</span>
<span class="key"><span class="swatch medium-key"></span>medium confidence</span>
<span class="key"><span class="swatch low-key"></span>low confidence</span>
<span class="key"><span class="gap">illegible</span> no responsible reading</span>
</div>
</header>
<h2>Diplomatic text</h2>
<p class="note">Hover over a dotted reading to see its confidence level. No spelling has been normalized.</p>
<article class="transcription" aria-label="Diplomatic transcription" dir="rtl">
<section class="section" lang="fa">
<div class="section-label">Upper marginal annotation · possibly Persian</div>
<span class="line">
<span class="line-number">U1</span>
<span class="unclear medium" title="Unclear: medium confidence">طوبى</span>
<span class="unclear low" title="Unclear: low confidence">بر ما</span>
<span class="unclear medium" title="Unclear: medium confidence">باشد</span>
</span>
<span class="line">
<span class="line-number">U2</span>
<span class="unclear low" title="Unclear numeral: low confidence">١٠</span>
</span>
<span class="line"><span class="line-number">U3</span><span class="gap">ناخوانا / illegible</span></span>
</section>
<section class="section" lang="ar">
<div class="section-label">Central annotation · Arabic script</div>
<span class="line">
<span class="line-number">1</span>
<span class="unclear medium" title="Unclear: medium confidence">قد دخلت</span>
<span class="unclear medium" title="Unclear: medium confidence">باب</span>
<span class="unclear low" title="Unclear: low confidence; possible alternative readings exist">الحرم الشريف</span>
<span class="secure" title="Comparatively secure reading">في المدينة المنورة</span>
<span class="unclear medium" title="Unclear: medium confidence">المشرفة</span>
</span>
<span class="line"><span class="line-number">2</span><span class="gap">نص غير مقروء</span></span>
<span class="line">
<span class="line-number">3</span>
<span class="unclear low" title="Unclear: low confidence">الحكومة</span>
<span class="gap">غير مقروء</span>
<span class="unclear low" title="Unclear: low confidence">المكرم</span>
<span class="unclear medium" title="Unclear: medium confidence">الشيخ</span>
<span class="gap">غير مقروء</span>
</span>
<span class="line">
<span class="line-number">4</span>
<span class="unclear low" title="Unclear: low confidence">المدرسة</span>
<span class="gap">غير مقروء</span>
</span>
<span class="line"><span class="line-number">5</span><span class="gap">نص غير مقروء</span></span>
<span class="line"><span class="line-number">6</span><span class="gap">نص غير مقروء</span></span>
<span class="line"><span class="line-number">7</span><span class="gap">نص غير مقروء</span></span>
<span class="line"><span class="line-number">8</span><span class="gap">نص غير مقروء</span></span>
</section>
<section class="section" lang="ar">
<div class="section-label">Lower annotation · partly outside the photograph</div>
<span class="line">
<span class="line-number">L1</span>
<span class="gap cropped">مقطوع</span>
<span class="unclear low" title="Unclear: low confidence">من الطيب</span>
<span class="gap">غير مقروء</span>
<span class="unclear low" title="Unclear: low confidence">وصلاة وسلام</span>
<span class="gap cropped">مقطوع</span>
</span>
<span class="line"><span class="line-number">L2</span><span class="gap cropped">خارج إطار الصورة</span></span>
</section>
</article>
<footer>
<p><strong>Editorial status:</strong> preliminary. Dotted text corresponds to TEI <code>&lt;unclear&gt;</code>; shaded boxes correspond to <code>&lt;gap&gt;</code>. Readings should be reviewed by an Arabic/Persian paleographer against the full-resolution source.</p>
</footer>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment