diff --git a/content/issues/4/sonorous-medieval/index.md b/content/issues/4/sonorous-medieval/index.md index ec46da63..8e95ce19 100644 --- a/content/issues/4/sonorous-medieval/index.md +++ b/content/issues/4/sonorous-medieval/index.md @@ -365,95 +365,94 @@ The first obstacle we face in turning the *Jingdian Shiwen* into phonological tr Only with such a digitized version of the *Jingdian Shiwen* and related texts can we approach the key question of how to extract useful phonological data from Lu Deming's commentary. A look at the content of this text highlights why this question is crucial: while close to one-third of the roughly 55,000 notes in the *Jingdian Shiwen* consist solely of a reading gloss (thus providing a reading aid to indicate pronunciation), the remainder is more complex and addresses multiple concerns. Some annotations feature semantic glosses, and others highlight instances in which additional works reproduce a glyph differently or include citations to the interpretations of other scholars. Many annotations combine these different elements. More importantly, the *Jingdian Shiwen* contains yet another form of abridgement: instead of reproducing the same annotation multiple times, the text attaches qualifiers to indicate that a given reading applies every time a human reader encounters the given string of glyphs in a specific section of the source text. These qualifiers act as multipliers for the data, effectively extending the commentary to cover whole swaths of text not explicitly noted elsewhere. {{}} - -
-
相摩
-
-
-
Headword
+

+ Figure 7, showing the richness of annotations in the Jingdian Shiwen 經典釋文, and the common patterns they take. +

+
+
+

相摩

+
+
Headword
+
-
-
-
本又作磨
-
-
Edition[s] also write it [摩] as “磨”
-
Graphic
+
+

本又作磨

+
+
Edition[s] also write it [摩] as “磨”
+
Graphic
+
-
-
-
末何反
-
-
it is pronounced like 末 + 何 [ma]
-
Phonetic
+
+

末何反

+
+
it is pronounced like 末 + 何 [ma]
+
Phonetic
+
-
-
-
京
-
-
Jing
-
Person
+
+

京

+
+
Jing
+
Person
+
-
-
-
云相磑切也
-
-
says that it means “milled against one another”
-
Semantic
+
+

云相磑切也

+
+
says that it means “milled against one another”
+
Semantic
+
-
-
-
磑音古代反
-
-
“mill” [磑] is pronounced like 古 + 代 [gojH]
-
Phonetic
+
+

磑音古代反

+
+
“mill” [磑] is pronounced like 古 + 代 [gojH]
+
Phonetic
+
-
-
-
馬
-
-
Ma
-
Person
+
+

馬

+
+
Ma
+
Person
+
-
-
-
云摩切也
-
-
says that it means “ground up”
-
Semantic
+
+

云摩切也

+
+
says that it means “ground up”
+
Semantic
+
-
-
-
鄭
-
-
Zheng[’s]
-
Person
+
+

鄭

+
+
Zheng[’s]
+
Person
+
-
-
-
注禮記
-
-
commentary on the Book of Rites
-
Work
+
+

注禮記

+
+
commentary on the Book of Rites
+
Work
+
-
-
-
云迫也
-
-
says that it means “compelled”
-
Semantic
+
+

云迫也

+
+
says that it means “compelled”
+
Semantic
+
-
-
-
迫音百
-
-
“compel” [迫] is pronounced like 百 [paek]
-
Phonetic
+
+

迫音百

+
+
“compel” [迫] is pronounced like 百 [paek]
+
Phonetic
+
- -

- Figure 7, showing the richness of annotations in the Jingdian Shiwen 經典釋文, and the common patterns they take. -

{{}} diff --git a/content/issues/4/sonorous-medieval/style.css b/content/issues/4/sonorous-medieval/style.css index 15d166de..88ad60bc 100644 --- a/content/issues/4/sonorous-medieval/style.css +++ b/content/issues/4/sonorous-medieval/style.css @@ -406,38 +406,43 @@ button.play:hover:after { /* figure 7 */ #fig7 { + padding: 0; + color: #404040; /* override interlude text color */ + font-family: var(--font-sans); +} + +#fig7:before { + background-color: #E9E9E9; +} + +#fig7 .caption { + font-size: 18px; + line-height: 1.25; + margin: 0 auto; + padding: 1rem 0; +} + +#fig7 .text { /* use flexbox to let terms follow each other (with translation & annotation) and wrap as needed */ display: flex; /* on mobile, layout one term per row */ flex-direction: column; justify-content: flex-start; - color: #404040; /* override interlude text color */ - - font-family: var(--font-sans); /* on larger screens, display layout horizontally but wrap */ @media (min-width: 768px) { flex-direction: row; flex-wrap: wrap; - gap: 24px; + column-gap: 24px; } } -#fig7:before { - background-color: #E9E9E9; -} - -#fig7 .caption { - margin-top: 1rem; -} - #fig7 .segment { /* use flexbox within each block so they stack nicely */ display: flex; flex-direction: column; width: 100%; - background-color: #FEFEFE; /* full screen width on mobile */ width: 100vw; @@ -460,20 +465,47 @@ button.play:hover:after { } #fig7 .source { + font-size: 1.5rem; + font-family: var(--font-serif); + position: relative; + padding: 1rem 0; + margin: 0; + text-underline-offset: .25rem; + + @media (min-width: 768px) { + font-size: 2rem; + text-underline-offset: .5rem; + } +} + +#fig7 .source p { + position: relative; + z-index: 1; + line-height: 1.25; + font-style: normal; + padding: 0; + padding-left: 1rem; + margin: 0; white-space: nowrap; - font-size: 24px; - background-color: #E9E9E9; @media (min-width: 768px) { - font-size: 40px; - padding-bottom: 18px; + padding-left: 0; } } +#fig7 .source::before { + content: ''; + position: absolute; + top: 0; + left: calc(100vw * -1); + width: 200vw; + height: 100%; + background-color: #FEFEFE; +} + #fig7 .translation { font-size: 18px; align-self: flex-start; - z-index: 1; @media (min-width: 768px) { font-size: 20px; @@ -484,38 +516,37 @@ button.play:hover:after { #fig7 .label { font-size: 18px; font-style: italic; - z-index: 1; +} + +#fig7 .head .notes { + justify-content: flex-end; } #fig7 .notes { display: flex; flex-direction: column; justify-content: space-between; - gap: 8px; padding: 8px 0; height: 100%; position: relative; - background-color: #FEFEFE; @media (min-width: 768px) { - gap: 14px; padding: 14px 0; } } -#fig7 .notes::before { - content: ''; - position: absolute; - top: 0; - left: calc(100vw * -1); - width: 200vw; - height: 100%; - background-color: #FEFEFE; +#fig7 .translation + .label { + padding-top: 8px; + + @media (min-width: 768px) { + padding-top: 14px; + } } /* visual indicators for annotations (provisional) */ #fig7 .source { + position: relative; text-decoration: none; font-family: var(--font-serif); } @@ -544,6 +575,11 @@ button.play:hover:after { } } +#fig7 .head .notes::after, +#fig7 .head .source { + text-decoration: none; +} + #fig7 .graphic .notes::after, #fig7 .graphic .source { text-decoration-style: dotted;