Skip to content

Commit

Permalink
Merge pull request #374 from Princeton-CDH/fig7-alternation
Browse files Browse the repository at this point in the history 
Adjust styling for figure 7 to match figure 3
  • Loading branch information
@rlskoeser
rlskoeser authored Sep 28, 2023
2 parents e272847 + 22df391 commit ffdb68f
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 106 deletions.
151 changes: 75 additions & 76 deletions content/issues/4/sonorous-medieval/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

{{<wrap class="interlude" id="fig7">}}

<div class="head segment">
<div class="source" lang="zh">相摩</div>
<div class="notes">
<div class="translation"></div>
<div class="label">Headword</div>
<p class="caption">
<b>Figure 7,</b> showing the richness of annotations in the <cite class="book">Jingdian Shiwen</cite> <span lang="zh">經典釋文</span>, and the common patterns they take.
</p>
<div class="text">
<div class="head segment">
<div class="source"><p lang="zh">相摩</p></div>
<div class="notes">
<div class="label">Headword</div>
</div>
</div>
</div>
<div class="graphic segment">
<div class="source" lang="zh">本又作磨</div>
<div class="notes">
<div class="translation">Edition[s] also write it [<span lang="zh">摩</span>] as “<span lang="zh">磨</span>”</div>
<div class="label">Graphic</div>
<div class="graphic segment">
<div class="source"><p lang="zh">本又作磨</p></div>
<div class="notes">
<div class="translation">Edition[s] also write it [<span lang="zh">摩</span>] as “<span lang="zh">磨</span>”</div>
<div class="label">Graphic</div>
</div>
</div>
</div>
<div class="phon segment">
<div class="source" lang="zh">末何反</div>
<div class="notes">
<div class="translation">it is pronounced like <span lang="zh">末</span> + <span lang="zh">何</span> [ma]</div>
<div class="label">Phonetic</div>
<div class="phon segment">
<div class="source"><p lang="zh">末何反</p></div>
<div class="notes">
<div class="translation">it is pronounced like <span lang="zh">末</span> + <span lang="zh">何</span> [ma]</div>
<div class="label">Phonetic</div>
</div>
</div>
</div>
<div class="person segment">
<div class="source" lang="zh">京</div>
<div class="notes">
<div class="translation">Jing</div>
<div class="label">Person</div>
<div class="person segment">
<div class="source"><p lang="zh">京</p></div>
<div class="notes">
<div class="translation">Jing</div>
<div class="label">Person</div>
</div>
</div>
</div>
<div class="semantic segment">
<div class="source" lang="zh">云相磑切也</div>
<div class="notes">
<div class="translation">says that it means “milled against one another”</div>
<div class="label">Semantic</div>
<div class="semantic segment">
<div class="source"><p lang="zh">云相磑切也</p></div>
<div class="notes">
<div class="translation">says that it means “milled against one another”</div>
<div class="label">Semantic</div>
</div>
</div>
</div>
<div class="phon segment">
<div class="source" lang="zh">磑音古代反</div>
<div class="notes">
<div class="translation">“mill” <span lang="zh">[磑]</span> is pronounced like <span lang="zh">古</span> + <span lang="zh">代</span> [gojH]</div>
<div class="label">Phonetic</div>
<div class="phon segment">
<div class="source"><p lang="zh">磑音古代反</p></div>
<div class="notes">
<div class="translation">“mill” <span lang="zh">[磑]</span> is pronounced like <span lang="zh">古</span> + <span lang="zh">代</span> [gojH]</div>
<div class="label">Phonetic</div>
</div>
</div>
</div>
<div class="person segment">
<div class="source" lang="zh">馬</div>
<div class="notes">
<div class="translation">Ma</div>
<div class="label">Person</div>
<div class="person segment">
<div class="source"><p lang="zh">馬</p></div>
<div class="notes">
<div class="translation">Ma</div>
<div class="label">Person</div>
</div>
</div>
</div>
<div class="semantic segment">
<div class="source" lang="zh">云摩切也</div>
<div class="notes">
<div class="translation">says that it means “ground up”</div>
<div class="label">Semantic</div>
<div class="semantic segment">
<div class="source"><p lang="zh">云摩切也</p></div>
<div class="notes">
<div class="translation">says that it means “ground up”</div>
<div class="label">Semantic</div>
</div>
</div>
</div>
<div class="person segment">
<div class="source" lang="zh">鄭</div>
<div class="notes">
<div class="translation">Zheng[’s]</div>
<div class="label">Person</div>
<div class="person segment">
<div class="source"><p lang="zh">鄭</p></div>
<div class="notes">
<div class="translation">Zheng[’s]</div>
<div class="label">Person</div>
</div>
</div>
</div>
<div class="work segment">
<div class="source" lang="zh">注禮記</div>
<div class="notes">
<div class="translation">commentary on the <cite class="book">Book of Rites</cite></div>
<div class="label">Work</div>
<div class="work segment">
<div class="source"><p lang="zh">注禮記</p></div>
<div class="notes">
<div class="translation">commentary on the <cite class="book">Book of Rites</cite></div>
<div class="label">Work</div>
</div>
</div>
</div>
<div class="semantic segment">
<div class="source" lang="zh">云迫也</div>
<div class="notes">
<div class="translation">says that it means “compelled”</div>
<div class="label">Semantic</div>
<div class="semantic segment">
<div class="source"><p lang="zh">云迫也</p></div>
<div class="notes">
<div class="translation">says that it means “compelled”</div>
<div class="label">Semantic</div>
</div>
</div>
</div>
<div class="phon segment">
<div class="source" lang="zh">迫音百</div>
<div class="notes">
<div class="translation">“compel” <span lang="zh">[迫]</span> is pronounced like <span lang="zh">百</span> [paek]</div>
<div class="label">Phonetic</div>
<div class="phon segment">
<div class="source"><p lang="zh">迫音百</p></div>
<div class="notes">
<div class="translation">“compel” <span lang="zh">[迫]</span> is pronounced like <span lang="zh">百</span> [paek]</div>
<div class="label">Phonetic</div>
</div>
</div>
</div>

<p class="caption">
<b>Figure 7,</b> showing the richness of annotations in the <cite class="book">Jingdian Shiwen</cite> <span lang="zh">經典釋文</span>, and the common patterns they take.
</p>
{{</wrap>}}


Expand Down
96 changes: 66 additions & 30 deletions content/issues/4/sonorous-medieval/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit ffdb68f

Please sign in to comment.