From 8d3436fca3885ba648e2c6f6bad4fa11bd8cb8c4 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 27 Feb 2021 16:32:44 -0500
Subject: [PATCH] Refactor display styles (#1451)

* term-expression => expression

* term-pitch-accent => pitch-accent

* term-reason => inflection, term-reasons => inflection-list

* term-details => expression-list-details

* term-glossary => glossary

* Update tag list classes

* term-definition => definition
---
 ext/css/display.css                 | 258 ++++++++++++++--------------
 ext/display-templates.html          |  60 +++----
 ext/js/display/display-audio.js     |   4 +-
 ext/js/display/display-generator.js |  84 ++++-----
 ext/pitch-accents-preview.html      |  18 +-
 5 files changed, 212 insertions(+), 212 deletions(-)

diff --git a/ext/css/display.css b/ext/css/display.css
index dc0c4336..b80a949c 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -795,47 +795,47 @@ button.action-button[data-icon=source-term]::before {
     text-decoration: none;
     cursor: pointer;
 }
-.term-expression-text-container {
+.expression-text-container {
     display: inline-block;
     margin-left: calc(-1 * var(--expression-reading-space));
 }
-.term-expression-text-outer {
+.expression-text-outer {
     display: inline-block;
     position: relative;
     margin-left: var(--expression-reading-space);
 }
-.term-expression-reading-outer {
+.expression-reading-outer {
     display: none;
     position: relative;
     margin-left: var(--expression-reading-space);
 }
-.term-expression-text {
+.expression-text {
     color: var(--expression-text-color);
     font-size: var(--expression-font-size);
 }
-.term-expression-reading {
+.expression-reading {
     color: var(--expression-text-color);
     font-size: var(--expression-reading-font-size);
 }
-.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text-outer::after {
+.expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-text-outer::after {
     content: var(--expression-separator);
     font-size: var(--expression-font-size);
 }
-.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-reading-outer::after {
+.expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-reading-outer::after {
     content: var(--expression-separator);
     font-size: var(--expression-reading-font-size);
 }
-.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text,
-.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-reading,
-.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link {
+.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-text,
+.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-reading,
+.entry[data-expression-multi=true] .expression[data-frequency=popular] .kanji-link {
     color: var(--expression-text-color-popular);
 }
-.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-text,
-.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-reading,
-.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .kanji-link {
+.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-text,
+.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-reading,
+.entry[data-expression-multi=true] .expression[data-frequency=rare] .kanji-link {
     color: var(--expression-text-color-rare);
 }
-.term-expression-text>ruby>rt {
+.expression-text>ruby>rt {
     color: var(--expression-furigana-text-color);
 }
 .entry-header2,
@@ -845,60 +845,60 @@ button.action-button[data-icon=source-term]::before {
 .entry+.entry {
     border-top: var(--thin-border-size) solid var(--light-border-color);
 }
-.term-reasons {
+.inflection-list {
     display: inline-block;
     color: var(--reason-text-color);
 }
-.term-reasons:empty {
+.inflection-list:empty {
     display: none;
 }
-.term-reasons>.term-reason+.term-reason-separator+.term-reason::before {
+.inflection-list>.inflection+.inflection-separator+.inflection::before {
     content: ' \00AB  '; /* The two spaces is not a typo */
     white-space: pre-wrap;
     display: inline;
 }
-.term-expression-list {
+.expression-list {
     display: inline;
     margin-right: var(--expression-list-end-space);
 }
-.term-expression {
+.expression {
     display: inline-block;
 }
-.term-expression-details {
+.expression-details {
     display: inline;
 }
-.term-expression-details>.tags {
+.expression-tag-list {
     display: none;
 }
-.term-expression-details>.frequencies {
+.expression-details>.frequencies {
     display: none;
 }
-.term-details {
+.expression-list-details {
     display: inline;
 }
-.term-tags {
+.expression-list-tag-list {
     display: inline;
 }
-.entry[data-expression-multi=true] .term-details {
+.entry[data-expression-multi=true] .expression-list-details {
     display: block;
 }
-:root[data-term-display-mode=ruby-and-reading] .term-expression-text-outer::after,
-:root[data-term-display-mode=term-and-reading] .term-expression-text-outer::after {
+:root[data-term-display-mode=ruby-and-reading] .expression-text-outer::after,
+:root[data-term-display-mode=term-and-reading] .expression-text-outer::after {
     display: none;
 }
-:root[data-term-display-mode=ruby-and-reading] .term-expression-reading-outer,
-:root[data-term-display-mode=term-and-reading] .term-expression-reading-outer {
+:root[data-term-display-mode=ruby-and-reading] .expression-reading-outer,
+:root[data-term-display-mode=term-and-reading] .expression-reading-outer {
     display: inline-block;
 }
-:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after,
-:root[data-term-display-mode=term-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after {
+:root[data-term-display-mode=ruby-and-reading] .expression[data-reading-is-same=true] .expression-text-outer::after,
+:root[data-term-display-mode=term-and-reading] .expression[data-reading-is-same=true] .expression-text-outer::after {
     display: inline-block;
 }
-:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer,
-:root[data-term-display-mode=term-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer {
+:root[data-term-display-mode=ruby-and-reading] .expression[data-reading-is-same=true] .expression-reading-outer,
+:root[data-term-display-mode=term-and-reading] .expression[data-reading-is-same=true] .expression-reading-outer {
     display: none;
 }
-:root[data-term-display-mode=term-and-reading] .term-expression-text>ruby>rt {
+:root[data-term-display-mode=term-and-reading] .expression-text>ruby>rt {
     display: none;
 }
 
@@ -961,7 +961,7 @@ button.action-button[data-icon=source-term]::before {
 
 
 /* Triangle entry indicator */
-.term-expression-current-indicator {
+.expression-current-indicator {
     pointer-events: none;
     position: absolute;
     left: calc(-1 * var(--main-content-horizontal-padding));
@@ -973,17 +973,17 @@ button.action-button[data-icon=source-term]::before {
         opacity var(--entry-current-indicator-transition-duration) linear,
         visibility 0s linear var(--entry-current-indicator-transition-duration);
 }
-.term-expression-text .term-expression-current-indicator {
+.expression-text .expression-current-indicator {
     font-size: calc(1em / var(--expression-font-size-no-units));
 }
-.entry.entry-current .term-expression-current-indicator {
+.entry.entry-current .expression-current-indicator {
     opacity: 1;
     visibility: visible;
     transition:
         opacity var(--entry-current-indicator-transition-duration) linear,
         visibility 0s linear 0s;
 }
-.term-expression-current-indicator::after {
+.expression-current-indicator::after {
     content: '';
     display: block;
     position: absolute;
@@ -1003,8 +1003,8 @@ button.action-button[data-icon=source-term]::before {
     -webkit-mask-size: contain;
     -webkit-mask-image: url(/images/material-right-arrow.svg);
 }
-.term-expression:not(:first-of-type) .term-expression-current-indicator,
-:root:not([data-popup-current-indicator-mode=triangle]) .term-expression-current-indicator {
+.expression:not(:first-of-type) .expression-current-indicator,
+:root:not([data-popup-current-indicator-mode=triangle]) .expression-current-indicator {
     display: none;
     transition: none;
 }
@@ -1033,7 +1033,7 @@ button.action-button[data-icon=source-term]::before {
 
 
 /* Merged term styles */
-.entry[data-expression-multi=true] .term-expression-list .term-expression-details {
+.entry[data-expression-multi=true] .expression-list .expression-details {
     display: inline-block;
     position: relative;
     width: 0;
@@ -1041,78 +1041,78 @@ button.action-button[data-icon=source-term]::before {
     visibility: hidden;
     z-index: 1;
 }
-.entry[data-expression-multi=true] .term-expression-list>.term-expression:not(:last-of-type) .term-expression-details {
+.entry[data-expression-multi=true] .expression-list>.expression:not(:last-of-type) .expression-details {
     left: calc(-1 * var(--expression-font-size));
 }
-.entry[data-expression-multi=true] .term-expression:hover .term-expression-details {
+.entry[data-expression-multi=true] .expression:hover .expression-details {
     visibility: visible;
 }
-.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.action-play-audio {
+.entry[data-expression-multi=true] .expression-list .expression-details>.action-play-audio {
     position: absolute;
     left: 0;
     bottom: 0.5em;
 }
-.entry:not([data-expression-multi=true]) .term-expression-list .term-expression-details>.action-play-audio {
+.entry:not([data-expression-multi=true]) .expression-list .expression-details>.action-play-audio {
     display: none;
 }
-.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.tags {
+.entry[data-expression-multi=true] .expression-list .expression-tag-list {
     display: block;
     position: absolute;
     left: 0;
     bottom: -0.5em;
     white-space: nowrap;
 }
-.entry[data-type=term][data-expression-multi=true] .term-tags>.tag[data-category=search] {
+.entry[data-type=term][data-expression-multi=true] .expression-list-tag-list>.tag[data-category=search] {
     display: none;
 }
 
 
 /* Definitions */
-.term-definition-list {
+.definition-list {
     margin: 0;
     padding: 0 0 0 var(--list-padding1);
     list-style-type: decimal;
 }
-.term-definition-list[data-count='0'],
-.term-definition-list[data-count='1'] {
+.definition-list[data-count='0'],
+.definition-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
-.term-glossary-list {
+.glossary-list {
     margin: 0;
     padding: 0 0 0 var(--list-padding2);
     list-style-type: circle;
 }
-.term-glossary-list[data-count='0'],
-.term-glossary-list[data-count='1'] {
+.glossary-list[data-count='0'],
+.glossary-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
-.term-definition-item::marker,
-.term-glossary-item::marker {
+.definition-item::marker,
+.glossary-item::marker {
     color: var(--text-color-light3);
 }
-.term-glossary {
+.glossary {
     white-space: pre-line;
 }
-.term-definition-disambiguation-list {
+.definition-disambiguation-list {
     color: var(--text-color-light3);
     padding-right: var(--disambiguation-space);
 }
-.term-definition-disambiguation-list[data-count='0'] {
+.definition-disambiguation-list[data-count='0'] {
     display: none;
 }
-.term-definition-disambiguation-list::before {
+.definition-disambiguation-list::before {
     content: var(--disambiguation-prefix);
 }
-.term-definition-disambiguation-list::after {
+.definition-disambiguation-list::after {
     content: var(--disambiguation-suffix);
 }
-.term-definition-disambiguation+.term-definition-disambiguation::before {
+.definition-disambiguation+.definition-disambiguation::before {
     content: var(--disambiguation-separator);
 }
-.term-glossary-separator,
-.term-reason-separator {
+.glossary-separator,
+.inflection-separator {
     display: inline;
     font-size: 0;
     opacity: 0;
@@ -1320,70 +1320,70 @@ button.action-button[data-icon=source-term]::before {
 
 
 /* Pitch accent styles */
-.term-pitch-accent-group-list {
+.pitch-accent-group-list {
     margin: 0;
     padding: 0 0 0 var(--list-padding1);
     list-style-type: decimal;
 }
-.term-pitch-accent-group-list[data-count='0'],
-.term-pitch-accent-group-list[data-count='1'] {
+.pitch-accent-group-list[data-count='0'],
+.pitch-accent-group-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
-.term-pitch-accent-list {
+.pitch-accent-list {
     margin: 0;
     padding: 0 0 0 var(--list-padding2);
     list-style-type: circle;
     display: block;
 }
-.term-pitch-accent-list[data-count='0'],
-.term-pitch-accent-list[data-count='1'] {
+.pitch-accent-list[data-count='0'],
+.pitch-accent-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
     display: inline;
 }
-.term-pitch-accent-group::marker,
-.term-pitch-accent::marker {
+.pitch-accent-group::marker,
+.pitch-accent::marker {
     color: var(--text-color-light3);
 }
-.term-pitch-accent {
+.pitch-accent {
     display: list-item;
     line-height: 1.5;
 }
-.term-pitch-accent-list[data-count='0'] .term-pitch-accent,
-.term-pitch-accent-list[data-count='1'] .term-pitch-accent {
+.pitch-accent-list[data-count='0'] .pitch-accent,
+.pitch-accent-list[data-count='1'] .pitch-accent {
     display: inline;
 }
-.term-pitch-accent-group-tag-list {
+.pitch-accent-group-tag-list {
     margin-right: 0.375em;
 }
-.term-pitch-accent-disambiguation-list {
+.pitch-accent-disambiguation-list {
     color: var(--text-color-light3);
     padding-right: var(--disambiguation-space);
 }
-.term-pitch-accent-disambiguation-list::before {
+.pitch-accent-disambiguation-list::before {
     content: var(--disambiguation-prefix);
 }
-.term-pitch-accent-disambiguation-list::after {
+.pitch-accent-disambiguation-list::after {
     content: var(--disambiguation-suffix);
 }
-.term-pitch-accent-disambiguation+.term-pitch-accent-disambiguation::before {
+.pitch-accent-disambiguation+.pitch-accent-disambiguation::before {
     content: var(--disambiguation-separator);
 }
-.term-pitch-accent-disambiguation-list[data-count='0'] {
+.pitch-accent-disambiguation-list[data-count='0'] {
     display: none;
 }
-.term-pitch-accent-tag-list:not([data-count='0']) {
+.pitch-accent-tag-list:not([data-count='0']) {
     margin-right: 0.375em;
 }
-.term-pitch-accent-character {
+.pitch-accent-character {
     display: inline-block;
     position: relative;
 }
-.term-pitch-accent-character::before {
+.pitch-accent-character::before {
     border-color: var(--pitch-accent-annotation-color);
 }
-.term-pitch-accent-character[data-pitch='high']::before {
+.pitch-accent-character[data-pitch='high']::before {
     content: '';
     display: block;
     user-select: none;
@@ -1396,23 +1396,23 @@ button.action-button[data-icon=source-term]::before {
     border-top-width: 0.1em;
     border-top-style: solid;
 }
-.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low']::before {
+.pitch-accent-character[data-pitch='high'][data-pitch-next='low']::before {
     right: -0.1em;
     height: 0.4em;
     border-right-width: 0.1em;
     border-right-style: solid;
 }
-.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low'] {
+.pitch-accent-character[data-pitch='high'][data-pitch-next='low'] {
     padding-right: 0.1em;
     margin-right: 0.1em;
 }
-.term-pitch-accent-position::before {
+.pitch-accent-position::before {
     content: ' [';
 }
-.term-pitch-accent-position::after {
+.pitch-accent-position::after {
     content: ']';
 }
-.term-pitch-accent-details {
+.pitch-accent-details {
     display: inline-block;
     height: 0;
     padding: 0 0.25em;
@@ -1421,34 +1421,34 @@ button.action-button[data-icon=source-term]::before {
 
 
 /* Pitch accent graph styles */
-.term-pitch-accent-graph {
+.pitch-accent-graph {
     display: block;
     height: 1.5em;
     transform: translateY(-0.875em);
 }
-.term-pitch-accent-graph-line,
-.term-pitch-accent-graph-line-tail {
+.pitch-accent-graph-line,
+.pitch-accent-graph-line-tail {
     fill: none;
     stroke: var(--pitch-accent-annotation-color);
     stroke-width: 5;
 }
-.term-pitch-accent-graph-line-tail {
+.pitch-accent-graph-line-tail {
     stroke-dasharray: 5 5;
 }
-#term-pitch-accent-graph-dot {
+#pitch-accent-graph-dot {
     fill: var(--pitch-accent-annotation-color);
     stroke: var(--pitch-accent-annotation-color);
     stroke-width: 5;
 }
-#term-pitch-accent-graph-dot-downstep {
+#pitch-accent-graph-dot-downstep {
     fill: none;
     stroke: var(--pitch-accent-annotation-color);
     stroke-width: 5;
 }
-#term-pitch-accent-graph-dot-downstep>circle:last-of-type {
+#pitch-accent-graph-dot-downstep>circle:last-of-type {
     fill: var(--pitch-accent-annotation-color);
 }
-#term-pitch-accent-graph-triangle {
+#pitch-accent-graph-triangle {
     fill: none;
     stroke: var(--pitch-accent-annotation-color);
     stroke-width: 5;
@@ -1456,7 +1456,7 @@ button.action-button[data-icon=source-term]::before {
 
 
 /* Glossary images */
-.term-glossary-image-container {
+.glossary-image-container {
     display: inline-block;
     white-space: nowrap;
     max-width: 100%;
@@ -1467,14 +1467,14 @@ button.action-button[data-icon=source-term]::before {
     overflow: hidden;
     background-color: var(--glossary-image-background-color);
 }
-.term-glossary-image-link {
+.glossary-image-link {
     cursor: inherit;
     color: inherit;
 }
-.term-glossary-image-link[href]:hover {
+.glossary-image-link[href]:hover {
     cursor: pointer;
 }
-.term-glossary-image-container-overlay {
+.glossary-image-container-overlay {
     position: absolute;
     left: 0;
     top: 0;
@@ -1487,7 +1487,7 @@ button.action-button[data-icon=source-term]::before {
     white-space: normal;
     color: var(--text-color-light3);
 }
-.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after {
+.glossary-item[data-has-image=true][data-image-load-state=load-error] .glossary-image-container-overlay::after {
     content: 'Image failed to load';
     display: table-cell;
     width: 100%;
@@ -1496,7 +1496,7 @@ button.action-button[data-icon=source-term]::before {
     text-align: center;
     padding: 0.25em;
 }
-.term-glossary-image {
+.glossary-image {
     display: inline-block;
     position: absolute;
     left: 0;
@@ -1508,30 +1508,30 @@ button.action-button[data-icon=source-term]::before {
     border: none;
     outline: none;
 }
-.term-glossary-image:not([src]) {
+.glossary-image:not([src]) {
     display: none;
 }
-.term-glossary-image[data-pixelated=true] {
+.glossary-image[data-pixelated=true] {
     image-rendering: auto;
     image-rendering: -moz-crisp-edges;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: pixelated;
     image-rendering: crisp-edges;
 }
-.term-glossary-image-aspect-ratio-sizer {
+.glossary-image-aspect-ratio-sizer {
     content: '';
     display: inline-block;
     width: 0;
     vertical-align: top;
     font-size: 0;
 }
-.term-glossary-image-link-text::before {
+.glossary-image-link-text::before {
     content: '[';
 }
-.term-glossary-image-link-text::after {
+.glossary-image-link-text::after {
     content: ']';
 }
-.term-glossary-image-description {
+.glossary-image-description {
     white-space: pre-line;
 }
 
@@ -1954,77 +1954,77 @@ button.footer-notification-close-button {
 :root[data-audio-enabled=false] .action-play-audio {
     display: none;
 }
-:root[data-glossary-layout-mode=compact] .term-definition-tag-list,
-:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count='0']) {
+:root[data-glossary-layout-mode=compact] .definition-tag-list,
+:root[data-glossary-layout-mode=compact] .definition-disambiguation-list:not([data-count='0']) {
     display: inline;
 }
-:root[data-glossary-layout-mode=compact] .term-glossary-list {
+:root[data-glossary-layout-mode=compact] .glossary-list {
     display: inline;
     list-style: none;
     padding-left: 0;
 }
-:root[data-glossary-layout-mode=compact] .term-glossary-item {
+:root[data-glossary-layout-mode=compact] .glossary-item {
     display: inline;
 }
-:root[data-glossary-layout-mode=compact] .term-glossary-item:not(:first-child)::before {
+:root[data-glossary-layout-mode=compact] .glossary-item:not(:first-child)::before {
     white-space: pre-wrap;
     content: var(--compact-list-separator);
     display: inline;
     color: var(--text-color-light3);
 }
 
-:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count='0'],
-:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] {
+:root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation-list[data-expression-count='0'],
+:root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation[data-type=reading] {
     display: none;
 }
-:root[data-show-pitch-accent-downstep-notation=false] .term-pitch-accent-characters {
+:root[data-show-pitch-accent-downstep-notation=false] .pitch-accent-characters {
     display: none;
 }
-:root[data-show-pitch-accent-position-notation=false] .term-pitch-accent-position {
+:root[data-show-pitch-accent-position-notation=false] .pitch-accent-position {
     display: none;
 }
-:root[data-show-pitch-accent-graph=false] .term-pitch-accent-details {
+:root[data-show-pitch-accent-graph=false] .pitch-accent-details {
     display: none;
 }
 
-:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) {
+:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .pitch-accent-list:not([data-has-tags=true]) {
     display: inline;
     list-style: none;
     padding-left: 0;
 }
-:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent {
+:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .pitch-accent-list:not([data-has-tags=true]) .pitch-accent {
     display: inline;
 }
-:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent:not(:first-child)::before {
+:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .pitch-accent-list:not([data-has-tags=true]) .pitch-accent:not(:first-child)::before {
     white-space: pre-wrap;
     content: var(--compact-list-separator);
     display: inline;
     color: var(--text-color-light3);
 }
 
-:root[data-glossary-layout-mode=compact] .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .glossary-image-container {
     display: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 1;
 }
-:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .glossary-image-container {
     bottom: 100%;
     top: auto;
 }
-:root[data-glossary-layout-mode=compact] .term-glossary-image-link {
+:root[data-glossary-layout-mode=compact] .glossary-image-link {
     position: relative;
     display: inline-block;
 }
-:root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-glossary-image-container,
-:root[data-glossary-layout-mode=compact] .term-glossary-image-link:focus .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .glossary-image-link:hover .glossary-image-container,
+:root[data-glossary-layout-mode=compact] .glossary-image-link:focus .glossary-image-container {
     display: block;
 }
-:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-link-text {
+:root:not([data-glossary-layout-mode=compact]) .glossary-image-link-text {
     display: none;
 }
-:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description {
+:root:not([data-glossary-layout-mode=compact]) .glossary-image-description {
     display: block;
 }
 
diff --git a/ext/display-templates.html b/ext/display-templates.html
index f7523c87..1ff8a4e4 100644
--- a/ext/display-templates.html
+++ b/ext/display-templates.html
@@ -13,11 +13,11 @@
                     <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button>
                     <span class="entry-current-indicator-icon" title="Current entry"></span>
                 </div>
-                <div class="term-expression-list"></div>
+                <div class="expression-list"></div>
             </div>
-            <div class="term-details">
-                <div class="term-tags tag-list"></div>
-                <div class="term-reasons"></div>
+            <div class="expression-list-details">
+                <div class="expression-list-tag-list tag-list"></div>
+                <div class="inflection-list"></div>
             </div>
         </div>
     </div>
@@ -26,34 +26,34 @@
             <div class="entry-body-section-content frequency-group-list"></div>
         </div>
         <div class="entry-body-section" data-section-type="pitch-accents">
-            <ol class="entry-body-section-content term-pitch-accent-group-list"></ol>
+            <ol class="entry-body-section-content pitch-accent-group-list"></ol>
         </div>
         <div class="entry-body-section" data-section-type="definitions">
-            <ol class="entry-body-section-content term-definition-list"></ol>
+            <ol class="entry-body-section-content definition-list"></ol>
         </div>
     </div>
     <div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
 </div></template>
-<template id="term-expression-template" data-remove-whitespace-text="true"><div class="term-expression">
-    <div class="term-expression-text-container" lang="ja">
-        <span class="term-expression-text-outer source-text">
-            <span class="term-expression-current-indicator"></span>
-            <span class="term-expression-text"></span>
+<template id="expression-template" data-remove-whitespace-text="true"><div class="expression">
+    <div class="expression-text-container" lang="ja">
+        <span class="expression-text-outer source-text">
+            <span class="expression-current-indicator"></span>
+            <span class="expression-text"></span>
         </span>
-        <span class="term-expression-reading-outer">
-            <span class="term-expression-reading"></span>
+        <span class="expression-reading-outer">
+            <span class="expression-reading"></span>
         </span>
     </div>
-    <div class="term-expression-details">
+    <div class="expression-details">
         <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="right below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button>
-        <div class="tags tag-list"></div>
+        <div class="expression-tag-list tag-list"></div>
     </div>
 </div></template>
-<template id="term-definition-item-template"><li class="term-definition-item"><div class="term-definition-tag-list tag-list"></div><div class="term-definition-disambiguation-list"></div><ul class="term-glossary-list"></ul></li></template>
-<template id="term-definition-disambiguation-template"><span class="term-definition-disambiguation"></span></template>
-<template id="term-glossary-item-template"><li class="term-glossary-item click-scannable"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></template>
-<template id="term-glossary-item-image-template"><li class="term-glossary-item click-scannable" data-has-image="true"><span class="term-glossary-separator"> </span><span class="term-glossary"><a class="term-glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="term-glossary-image-container"><span class="term-glossary-image-aspect-ratio-sizer"></span><img class="term-glossary-image" alt=""><span class="term-glossary-image-container-overlay"></span></span><span class="term-glossary-image-link-text">Image</span></a> <span class="term-glossary-image-description"></span></span></li></template>
-<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
+<template id="definition-item-template"><li class="definition-item"><div class="definition-tag-list tag-list"></div><div class="definition-disambiguation-list"></div><ul class="glossary-list"></ul></li></template>
+<template id="definition-disambiguation-template"><span class="definition-disambiguation"></span></template>
+<template id="glossary-item-template"><li class="glossary-item click-scannable"><span class="glossary-separator"> </span><span class="glossary"></span></li></template>
+<template id="glossary-item-image-template"><li class="glossary-item click-scannable" data-has-image="true"><span class="glossary-separator"> </span><span class="glossary"><a class="glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="glossary-image-container"><span class="glossary-image-aspect-ratio-sizer"></span><img class="glossary-image" alt=""><span class="glossary-image-container-overlay"></span></span><span class="glossary-image-link-text">Image</span></a> <span class="glossary-image-description"></span></span></li></template>
+<template id="inflection-template"><span class="inflection"></span><span class="inflection-separator"> </span></template>
 
 <!-- Frequency templates -->
 <template id="frequency-group-item-template"><span class="frequency-group-item"><span class="tag tag-has-body frequency-group-tag" data-category="frequency"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content frequency-list"></span></span></span></span></template>
@@ -77,17 +77,17 @@
 </span></span></template>
 
 <!-- Pitch accent templates -->
-<template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;" focusable="false">
+<template id="pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;" focusable="false">
     <defs>
-        <g id="term-pitch-accent-graph-dot"><circle cx="0" cy="0" r="15" /></g>
-        <g id="term-pitch-accent-graph-dot-downstep"><circle cx="0" cy="0" r="15" /><circle cx="0" cy="0" r="5" /></g>
-        <g id="term-pitch-accent-graph-triangle"><path d="M0 13 L15 -13 L-15 -13 Z" /></g>
+        <g id="pitch-accent-graph-dot"><circle cx="0" cy="0" r="15" /></g>
+        <g id="pitch-accent-graph-dot-downstep"><circle cx="0" cy="0" r="15" /><circle cx="0" cy="0" r="5" /></g>
+        <g id="pitch-accent-graph-triangle"><path d="M0 13 L15 -13 L-15 -13 Z" /></g>
     </defs>
 </svg></template>
-<template id="term-pitch-accent-group-template"><li class="term-pitch-accent-group"><span class="term-pitch-accent-group-tag-list tag-list"></span><ul class="term-pitch-accent-list"></ul></li></template>
-<template id="term-pitch-accent-disambiguation-template"><span class="term-pitch-accent-disambiguation"></span></template>
-<template id="term-pitch-accent-template"><li class="term-pitch-accent"><span class="term-pitch-accent-tag-list tag-list"></span><span class="term-pitch-accent-disambiguation-list"></span><span class="term-pitch-accent-characters"></span><span class="term-pitch-accent-position"></span><span class="term-pitch-accent-details"><svg class="term-pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" focusable="false"><path class="term-pitch-accent-graph-line" /><path class="term-pitch-accent-graph-line-tail" /></svg></span></li></template>
-<template id="term-pitch-accent-character-template"><span class="term-pitch-accent-character"><span class="term-pitch-accent-character-inner"></span></span></template>
+<template id="pitch-accent-group-template"><li class="pitch-accent-group"><span class="pitch-accent-group-tag-list tag-list"></span><ul class="pitch-accent-list"></ul></li></template>
+<template id="pitch-accent-disambiguation-template"><span class="pitch-accent-disambiguation"></span></template>
+<template id="pitch-accent-template"><li class="pitch-accent"><span class="pitch-accent-tag-list tag-list"></span><span class="pitch-accent-disambiguation-list"></span><span class="pitch-accent-characters"></span><span class="pitch-accent-position"></span><span class="pitch-accent-details"><svg class="pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" focusable="false"><path class="pitch-accent-graph-line" /><path class="pitch-accent-graph-line-tail" /></svg></span></li></template>
+<template id="pitch-accent-character-template"><span class="pitch-accent-character"><span class="pitch-accent-character-inner"></span></span></template>
 
 <!-- Kanji entry templates -->
 <template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="kanji">
@@ -101,13 +101,13 @@
                     <span class="entry-current-indicator-icon" title="Current entry"></span>
                 </div>
                 <div class="kanji-glyph-container">
-                    <span class="term-expression-current-indicator"></span>
+                    <span class="expression-current-indicator"></span>
                     <div class="kanji-glyph source-text"></div>
                 </div>
             </div>
         </div>
     </div>
-    <div class="tags tag-list"></div>
+    <div class="kanji-tag-list tag-list"></div>
     <div class="entry-body">
         <div class="entry-body-section" data-section-type="frequencies">
             <div class="entry-body-section-content frequency-group-list"></div>
diff --git a/ext/js/display/display-audio.js b/ext/js/display/display-audio.js
index d793c287..f1feff5c 100644
--- a/ext/js/display/display-audio.js
+++ b/ext/js/display/display-audio.js
@@ -279,7 +279,7 @@ class DisplayAudio {
     }
 
     _getAudioPlayButtonExpressionIndex(button) {
-        const expressionNode = button.closest('.term-expression');
+        const expressionNode = button.closest('.expression');
         if (expressionNode !== null) {
             const expressionIndex = parseInt(expressionNode.dataset.index, 10);
             if (Number.isFinite(expressionIndex)) { return expressionIndex; }
@@ -293,7 +293,7 @@ class DisplayAudio {
         if (definitionIndex >= 0 && definitionIndex < definitionNodes.length) {
             const node = definitionNodes[definitionIndex];
             const button1 = (expressionIndex === 0 ? node.querySelector('.action-play-audio') : null);
-            const button2 = node.querySelector(`.term-expression:nth-of-type(${expressionIndex + 1}) .action-play-audio`);
+            const button2 = node.querySelector(`.expression:nth-of-type(${expressionIndex + 1}) .action-play-audio`);
             if (button1 !== null) { results.push(button1); }
             if (button2 !== null) { results.push(button2); }
         }
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 221cb772..1a73ff80 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -46,19 +46,19 @@ class DisplayGenerator {
     preparePitchAccents() {
         if (this._termPitchAccentStaticTemplateIsSetup) { return; }
         this._termPitchAccentStaticTemplateIsSetup = true;
-        const t = this._templates.instantiate('term-pitch-accent-static');
+        const t = this._templates.instantiate('pitch-accent-static');
         document.head.appendChild(t);
     }
 
     createTermEntry(details) {
         const node = this._templates.instantiate('term-entry');
 
-        const expressionsContainer = node.querySelector('.term-expression-list');
-        const reasonsContainer = node.querySelector('.term-reasons');
-        const pitchesContainer = node.querySelector('.term-pitch-accent-group-list');
+        const expressionsContainer = node.querySelector('.expression-list');
+        const reasonsContainer = node.querySelector('.inflection-list');
+        const pitchesContainer = node.querySelector('.pitch-accent-group-list');
         const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
-        const definitionsContainer = node.querySelector('.term-definition-list');
-        const termTagsContainer = node.querySelector('.term-tags');
+        const definitionsContainer = node.querySelector('.definition-list');
+        const termTagsContainer = node.querySelector('.expression-list-tag-list');
 
         const {expressions, type, reasons, frequencies} = details;
         const definitions = (type === 'term' ? [details] : details.definitions);
@@ -129,7 +129,7 @@ class DisplayGenerator {
 
         const glyphContainer = node.querySelector('.kanji-glyph');
         const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
-        const tagContainer = node.querySelector('.tags');
+        const tagContainer = node.querySelector('.kanji-tag-list');
         const glossaryContainer = node.querySelector('.kanji-glossary-list');
         const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese');
         const japaneseReadingsContainer = node.querySelector('.kanji-readings-japanese');
@@ -235,15 +235,15 @@ class DisplayGenerator {
         if (expression) { searchQueries.push(expression); }
         if (reading) { searchQueries.push(reading); }
 
-        const node = this._templates.instantiate('term-expression');
+        const node = this._templates.instantiate('expression');
 
-        const expressionContainer = node.querySelector('.term-expression-text');
-        const tagContainer = node.querySelector('.tags');
+        const expressionContainer = node.querySelector('.expression-text');
+        const tagContainer = node.querySelector('.expression-tag-list');
 
         node.dataset.readingIsSame = `${!reading || reading === expression}`;
         node.dataset.frequency = termFrequency;
 
-        this._setTextContent(node.querySelector('.term-expression-reading'), reading.length > 0 ? reading : expression);
+        this._setTextContent(node.querySelector('.expression-reading'), reading.length > 0 ? reading : expression);
 
         this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
         this._appendMultiple(tagContainer, this._createTag.bind(this), termTags);
@@ -253,19 +253,19 @@ class DisplayGenerator {
     }
 
     _createTermReason(reason) {
-        const fragment = this._templates.instantiateFragment('term-reason');
-        const node = fragment.querySelector('.term-reason');
+        const fragment = this._templates.instantiateFragment('inflection');
+        const node = fragment.querySelector('.inflection');
         this._setTextContent(node, reason);
         node.dataset.reason = reason;
         return fragment;
     }
 
     _createTermDefinitionItem(details, dictionaryTag) {
-        const node = this._templates.instantiate('term-definition-item');
+        const node = this._templates.instantiate('definition-item');
 
-        const tagListContainer = node.querySelector('.term-definition-tag-list');
-        const onlyListContainer = node.querySelector('.term-definition-disambiguation-list');
-        const glossaryContainer = node.querySelector('.term-glossary-list');
+        const tagListContainer = node.querySelector('.definition-tag-list');
+        const onlyListContainer = node.querySelector('.definition-disambiguation-list');
+        const glossaryContainer = node.querySelector('.glossary-list');
 
         const {dictionary, definitionTags} = details;
         node.dataset.dictionary = dictionary;
@@ -291,8 +291,8 @@ class DisplayGenerator {
     }
 
     _createTermGlossaryItemText(glossary) {
-        const node = this._templates.instantiate('term-glossary-item');
-        const container = node.querySelector('.term-glossary');
+        const node = this._templates.instantiate('glossary-item');
+        const container = node.querySelector('.glossary');
         this._setTextContent(container, glossary);
         return node;
     }
@@ -312,22 +312,22 @@ class DisplayGenerator {
             width / height
         );
 
-        const node = this._templates.instantiate('term-glossary-item-image');
+        const node = this._templates.instantiate('glossary-item-image');
         node.dataset.path = path;
         node.dataset.dictionary = dictionary;
         node.dataset.imageLoadState = 'not-loaded';
 
-        const imageContainer = node.querySelector('.term-glossary-image-container');
+        const imageContainer = node.querySelector('.glossary-image-container');
         imageContainer.style.width = `${usedWidth}em`;
         if (typeof title === 'string') {
             imageContainer.title = title;
         }
 
-        const aspectRatioSizer = node.querySelector('.term-glossary-image-aspect-ratio-sizer');
+        const aspectRatioSizer = node.querySelector('.glossary-image-aspect-ratio-sizer');
         aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
 
-        const image = node.querySelector('img.term-glossary-image');
-        const imageLink = node.querySelector('.term-glossary-image-link');
+        const image = node.querySelector('img.glossary-image');
+        const imageLink = node.querySelector('.glossary-image-link');
         image.dataset.pixelated = `${pixelated === true}`;
 
         if (this._mediaLoader !== null) {
@@ -340,7 +340,7 @@ class DisplayGenerator {
         }
 
         if (typeof description === 'string') {
-            const container = node.querySelector('.term-glossary-image-description');
+            const container = node.querySelector('.glossary-image-description');
             this._setTextContent(container, description);
         }
 
@@ -360,7 +360,7 @@ class DisplayGenerator {
     }
 
     _createTermDisambiguation(disambiguation) {
-        const node = this._templates.instantiate('term-definition-disambiguation');
+        const node = this._templates.instantiate('definition-disambiguation');
         node.dataset.term = disambiguation;
         this._setTextContent(node, disambiguation, 'ja');
         return node;
@@ -451,13 +451,13 @@ class DisplayGenerator {
 
         const {dictionary, pitches} = details;
 
-        const node = this._templates.instantiate('term-pitch-accent-group');
+        const node = this._templates.instantiate('pitch-accent-group');
         node.dataset.dictionary = dictionary;
         node.dataset.pitchesMulti = 'true';
         node.dataset.pitchesCount = `${pitches.length}`;
 
         const tag = this._createTag({notes: '', name: dictionary, category: 'pitch-accent-dictionary'});
-        node.querySelector('.term-pitch-accent-group-tag-list').appendChild(tag);
+        node.querySelector('.pitch-accent-group-tag-list').appendChild(tag);
 
         let hasTags = false;
         for (const {tags} of pitches) {
@@ -467,7 +467,7 @@ class DisplayGenerator {
             }
         }
 
-        const n = node.querySelector('.term-pitch-accent-list');
+        const n = node.querySelector('.pitch-accent-list');
         n.dataset.hasTags = `${hasTags}`;
         this._appendMultiple(n, this._createPitch.bind(this), pitches);
 
@@ -479,28 +479,28 @@ class DisplayGenerator {
         const {reading, position, tags, exclusiveExpressions, exclusiveReadings} = details;
         const morae = jp.getKanaMorae(reading);
 
-        const node = this._templates.instantiate('term-pitch-accent');
+        const node = this._templates.instantiate('pitch-accent');
 
         node.dataset.pitchAccentPosition = `${position}`;
         node.dataset.tagCount = `${tags.length}`;
 
-        let n = node.querySelector('.term-pitch-accent-position');
+        let n = node.querySelector('.pitch-accent-position');
         this._setTextContent(n, `${position}`, '');
 
-        n = node.querySelector('.term-pitch-accent-tag-list');
+        n = node.querySelector('.pitch-accent-tag-list');
         this._appendMultiple(n, this._createTag.bind(this), tags);
 
-        n = node.querySelector('.term-pitch-accent-disambiguation-list');
+        n = node.querySelector('.pitch-accent-disambiguation-list');
         this._createPitchAccentDisambiguations(n, exclusiveExpressions, exclusiveReadings);
 
-        n = node.querySelector('.term-pitch-accent-characters');
+        n = node.querySelector('.pitch-accent-characters');
         for (let i = 0, ii = morae.length; i < ii; ++i) {
             const mora = morae[i];
             const highPitch = jp.isMoraPitchHigh(i, position);
             const highPitchNext = jp.isMoraPitchHigh(i + 1, position);
 
-            const n1 = this._templates.instantiate('term-pitch-accent-character');
-            const n2 = n1.querySelector('.term-pitch-accent-character-inner');
+            const n1 = this._templates.instantiate('pitch-accent-character');
+            const n2 = n1.querySelector('.pitch-accent-character-inner');
 
             n1.dataset.position = `${i}`;
             n1.dataset.pitch = highPitch ? 'high' : 'low';
@@ -511,14 +511,14 @@ class DisplayGenerator {
         }
 
         if (morae.length > 0) {
-            this._populatePitchGraph(node.querySelector('.term-pitch-accent-graph'), position, morae);
+            this._populatePitchGraph(node.querySelector('.pitch-accent-graph'), position, morae);
         }
 
         return node;
     }
 
     _createPitchAccentDisambiguations(container, exclusiveExpressions, exclusiveReadings) {
-        const templateName = 'term-pitch-accent-disambiguation';
+        const templateName = 'pitch-accent-disambiguation';
         for (const exclusiveExpression of exclusiveExpressions) {
             const node = this._templates.instantiate(templateName);
             node.dataset.type = 'expression';
@@ -548,7 +548,7 @@ class DisplayGenerator {
         for (let i = 0; i < ii; ++i) {
             const highPitch = jp.isMoraPitchHigh(i, position);
             const highPitchNext = jp.isMoraPitchHigh(i + 1, position);
-            const graphic = (highPitch && !highPitchNext ? '#term-pitch-accent-graph-dot-downstep' : '#term-pitch-accent-graph-dot');
+            const graphic = (highPitch && !highPitchNext ? '#pitch-accent-graph-dot-downstep' : '#pitch-accent-graph-dot');
             const x = `${i * 50 + 25}`;
             const y = highPitch ? '25' : '75';
             const use = document.createElementNS(svgns, 'use');
@@ -559,7 +559,7 @@ class DisplayGenerator {
             pathPoints.push(`${x} ${y}`);
         }
 
-        let path = svg.querySelector('.term-pitch-accent-graph-line');
+        let path = svg.querySelector('.pitch-accent-graph-line');
         path.setAttribute('d', `M${pathPoints.join(' L')}`);
 
         pathPoints.splice(0, ii - 1);
@@ -568,14 +568,14 @@ class DisplayGenerator {
             const x = `${ii * 50 + 25}`;
             const y = highPitch ? '25' : '75';
             const use = document.createElementNS(svgns, 'use');
-            use.setAttribute('href', '#term-pitch-accent-graph-triangle');
+            use.setAttribute('href', '#pitch-accent-graph-triangle');
             use.setAttribute('x', x);
             use.setAttribute('y', y);
             svg.appendChild(use);
             pathPoints.push(`${x} ${y}`);
         }
 
-        path = svg.querySelector('.term-pitch-accent-graph-line-tail');
+        path = svg.querySelector('.pitch-accent-graph-line-tail');
         path.setAttribute('d', `M${pathPoints.join(' L')}`);
     }
 
diff --git a/ext/pitch-accents-preview.html b/ext/pitch-accents-preview.html
index 8c185aea..f649779d 100644
--- a/ext/pitch-accents-preview.html
+++ b/ext/pitch-accents-preview.html
@@ -22,25 +22,25 @@
     <li>
         <strong>Downstep notation</strong> -
         <span class="format-preview" lang="ja">
-            <span class="term-pitch-accent-characters"><span class="term-pitch-accent-character" data-position="0" data-pitch="high" data-pitch-next="low"><span class="term-pitch-accent-character-inner">よ</span></span><span class="term-pitch-accent-character" data-position="1" data-pitch="low" data-pitch-next="low"><span class="term-pitch-accent-character-inner">む</span></span></span>
+            <span class="pitch-accent-characters"><span class="pitch-accent-character" data-position="0" data-pitch="high" data-pitch-next="low"><span class="pitch-accent-character-inner">よ</span></span><span class="pitch-accent-character" data-position="1" data-pitch="low" data-pitch-next="low"><span class="pitch-accent-character-inner">む</span></span></span>
         </span>
     </li>
     <li>
         <strong>Downstep position</strong> -
         <span class="format-preview">
-            <span class="term-pitch-accent-position">1</span>
+            <span class="pitch-accent-position">1</span>
         </span>
     </li>
     <li>
         <strong>Graph</strong> -
         <span class="format-preview">
-            <span class="term-pitch-accent-details">
-                <svg class="term-pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100" focusable="false">
-                    <path class="term-pitch-accent-graph-line" d="M25 25 L75 75"></path>
-                    <path class="term-pitch-accent-graph-line-tail" d="M75 75 L125 75"></path>
-                    <use href="#term-pitch-accent-graph-dot-downstep" x="25" y="25"></use>
-                    <use href="#term-pitch-accent-graph-dot" x="75" y="75"></use>
-                    <use href="#term-pitch-accent-graph-triangle" x="125" y="75"></use>
+            <span class="pitch-accent-details">
+                <svg class="pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100" focusable="false">
+                    <path class="pitch-accent-graph-line" d="M25 25 L75 75"></path>
+                    <path class="pitch-accent-graph-line-tail" d="M75 75 L125 75"></path>
+                    <use href="#pitch-accent-graph-dot-downstep" x="25" y="25"></use>
+                    <use href="#pitch-accent-graph-dot" x="75" y="75"></use>
+                    <use href="#pitch-accent-graph-triangle" x="125" y="75"></use>
                 </svg>
             </span>
         </span>