bobbiec.github.io/cistercian-font.html at master · bobbiec/bobbiec.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cistercian Numeral Font</title>
    <meta name="author" content="Bobbie Chen" />
    <meta name="description" content="A font that renders numbers as medieval Cistercian numerals" />
    <meta property="og:image" content="https://bobbiec.github.io/cistercian-font-preview.png" />

    <link href="normalize.css" rel="stylesheet" />
    <link href="skeleton.css" rel="stylesheet" />

    <style>
      .container {
        max-width: 900px !important;
      }
      .main-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      @media (min-width: 750px) {
        .main-content {
          flex-direction: row;
          align-items: flex-start;
        }
        .output-section {
          flex: 1;
          min-width: 0;
        }
        .input-section {
          flex: 1;
          min-width: 0;
        }
      }
      textarea {
        width: 100%;
        min-height: 300px;
        padding: 10px;
        font-family: monospace;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1.1rem;
        line-height: 1.7;
        resize: vertical;
      }
      .output-panel {
        margin: 20px 0;
      }
      .output-block {
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 15px;
        overflow: hidden;
      }
      .output-cistercian {
        padding: 15px;
        white-space: pre-wrap;
        word-break: break-word;
        min-height: 3rem;
      }
      .output-cistercian {
        font-family: "Cistercian", monospace;
        font-size: 2.5rem;
        line-height: 1.5;
        background: linear-gradient(135deg, #f8fafc, #e8edf3);
      }
      /* Font Face Declaration */
      @font-face {
        font-family: "Cistercian";
        src:
          url("Cistercian.woff2") format("woff2"),
          url("Cistercian.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 style="padding-top: 0.5em">Cistercian Numeral Font</h1>
      <p>
        On this page, numbers are automatically rendered as medieval Cistercian numerals using
        <a
          href="https://digitalseams.com/blog/making-a-font-with-9999-ligatures-to-display-thirteenth-century-monk-numerals?ref=bobbiec.github.io"
          >a custom font (learn more)</a
        >.<br />Try copy-pasting the symbols or Ctrl/Cmd-F the numbers below!
      </p>

      <div class="main-content">
        <div class="input-section">
          <div class="textarea-container">
            <label for="text-input">Type or edit text here (normal font):</label>
            <textarea id="text-input" spellcheck="false" autocomplete="off"></textarea>
          </div>
        </div>
        <div class="output-section">
          <label>Cistercian font output</label>
          <div class="output-block">
            <div class="output-cistercian" id="output-cistercian"></div>
          </div>
        </div>
      </div>

      <div style="padding-bottom: 12rem"></div>
      <footer style="padding-bottom: 1rem; text-align: center">
        A project by <a href="https://bobbiechen.com?ref=bobbiec.github.io">Bobbie Chen</a>, based on
        <a
          href="https://christianheilmann.com/2026/01/13/monky-business-creating-a-cistercian-numerals-generator/?ref=bobbiec.github.io"
          target="_blank"
          >Chris Heilmann's generator</a
        >.
        <br />
        Learn more about
        <a
          href="https://digitalseams.com/blog/making-a-font-with-9999-ligatures-to-display-thirteenth-century-monk-numerals?ref=bobbiec.github.io"
          >the custom font in the blog post</a
        >
        . See all <a href="/">web demos</a>.
      </footer>
    </div>
    <script src="cistercian-font-demo.js"></script>
  </body>
</html>