update japanese sentences
This commit is contained in:
Ren Tatsumoto
parent
448b60242a
commit
a2cbfb9301
|
|
@ -11,26 +11,31 @@
|
|||
{{/SentEng}}
|
||||
</div>
|
||||
|
||||
{{#VocabDef}}
|
||||
<section class="headword_section">
|
||||
<div class="vocab">
|
||||
{{VocabAudio}}{{SentAudio}}
|
||||
<span id="vocab-audio">{{VocabAudio}}</span>
|
||||
<span id="sent-audio">{{SentAudio}}</span>
|
||||
<div class="reading" id="pitchpattern">{{VocabPitchPattern}}{{^VocabPitchPattern}}{{text:kana:VocabFurigana}}{{/VocabPitchPattern}}</div>
|
||||
{{#VocabPitchNum}}<span class="tags" id="pitchnum">{{text:VocabPitchNum}}</span>{{/VocabPitchNum}}
|
||||
{{#VocabKanji}}<div class="target_word">{{text:kanji:VocabKanji}}</div>{{/VocabKanji}}
|
||||
</div>
|
||||
|
||||
{{#VocabDef}}
|
||||
<div class="definitions">{{edit:furigana:VocabDef}}</div>
|
||||
</section>
|
||||
{{/VocabDef}}
|
||||
|
||||
{{#Notes}}
|
||||
<div class="notes">
|
||||
<div class="tags">Notes</div>
|
||||
<details open class="notes">
|
||||
<summary>Notes</summary>
|
||||
<div>{{furigana:Notes}}</div>
|
||||
</div>
|
||||
</details>
|
||||
{{/Notes}}
|
||||
|
||||
{{#Image}}
|
||||
<details class="images-details">
|
||||
<summary>Image</summary>
|
||||
<div class="images">{{Image}}</div>
|
||||
</details>
|
||||
{{/Image}}
|
||||
|
||||
<hr>
|
||||
|
|
@ -79,9 +84,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
function removeAudioIfMarkedX() {
|
||||
const pr = document.getElementById("vocab-audio");
|
||||
if (pr && pr.innerText.match(/^[x×]/i)) {
|
||||
pr.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
markPitch();
|
||||
removePitchBrackets();
|
||||
tweakRevealText();
|
||||
removeNoPitchAccentDataText();
|
||||
reformatMultiFurigana();
|
||||
removeAudioIfMarkedX();
|
||||
toggleImageDetails();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!--
|
||||
mpvacious cards, version 15.0
|
||||
Sun Mar 5 12:08:06 AM UTC 2023
|
||||
Fri Jul 7 06:33:50 PM UTC 2023
|
||||
-->
|
||||
|
||||
<div class="wrap">
|
||||
|
|
@ -14,7 +14,7 @@ Sun Mar 5 12:08:06 AM UTC 2023
|
|||
</header>
|
||||
|
||||
<div class="sent-center">
|
||||
<div class="jpsentence on-front" lang="ja">
|
||||
<div class="jpsentence" lang="ja">
|
||||
{{edit:furigana:SentKanji}}
|
||||
{{^SentKanji}}
|
||||
<nokana>{{edit:kanji:SentFurigana}}</nokana>
|
||||
|
|
@ -22,7 +22,12 @@ Sun Mar 5 12:08:06 AM UTC 2023
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{#Image}}<div class="images on-front">{{Image}}</div>{{/Image}}
|
||||
{{#Image}}
|
||||
<details class="images-on-front images-details">
|
||||
<summary>Image</summary>
|
||||
<div class="images">{{Image}}</div>
|
||||
</details>
|
||||
{{/Image}}
|
||||
</div> <!-- /wrap -->
|
||||
|
||||
<div style="display:none;">
|
||||
|
|
@ -107,14 +112,6 @@ Sun Mar 5 12:08:06 AM UTC 2023
|
|||
}
|
||||
}
|
||||
|
||||
function setImageOnFront() {
|
||||
const tags = `{{Tags}}`.split(" ");
|
||||
const front_img = document.querySelector("div.images.on-front");
|
||||
if (front_img && tags.includes("imageonfront")) {
|
||||
front_img.classList.toggle("on-front");
|
||||
}
|
||||
}
|
||||
|
||||
function formatNewRuby(kanji, readings) {
|
||||
if (readings.length > 1) {
|
||||
return `<ruby>${formatNewRuby(kanji, readings.slice(0, -1))}</ruby><rt>${readings.slice(-1)}</rt>`
|
||||
|
|
@ -125,15 +122,25 @@ Sun Mar 5 12:08:06 AM UTC 2023
|
|||
|
||||
function reformatMultiFurigana() {
|
||||
const separators = /[\s;,.、・。]+/iu;
|
||||
document.querySelectorAll("ruby").forEach(ruby => {
|
||||
const max_inline = 2;
|
||||
document.querySelectorAll("ruby:not(ruby ruby)").forEach(ruby => {
|
||||
try {
|
||||
const kanji = (ruby.querySelector("rb") || ruby.firstChild).textContent.trim()
|
||||
const kanji = (ruby.querySelector("rb") || ruby.firstChild).textContent.trim();
|
||||
const readings = ruby.querySelector("rt").textContent
|
||||
.split(separators)
|
||||
.map(str => str.trim())
|
||||
.filter(str => str.length)
|
||||
.filter(str => str.length);
|
||||
|
||||
if (readings.length > 1) {
|
||||
ruby.innerHTML = formatNewRuby(kanji, readings)
|
||||
ruby.innerHTML = formatNewRuby(kanji, readings.slice(0, max_inline));
|
||||
}
|
||||
if (readings.length > max_inline) {
|
||||
const sequence = readings.map(reading => `<span class="tooltip-reading">${reading}</span>`).join('');
|
||||
const wrapper = document.createElement("span");
|
||||
wrapper.classList.add("tooltip");
|
||||
wrapper.innerHTML += `<span class="tooltip-text">${sequence}</span>`;
|
||||
ruby.replaceWith(wrapper);
|
||||
wrapper.appendChild(ruby);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
|
@ -141,8 +148,32 @@ Sun Mar 5 12:08:06 AM UTC 2023
|
|||
})
|
||||
}
|
||||
|
||||
function isMobile() {
|
||||
return document
|
||||
.getElementsByTagName("html")[0]
|
||||
.classList
|
||||
.contains("mobile");
|
||||
}
|
||||
|
||||
/* If a card has the "imageonfront" tag set, show images on the front side. */
|
||||
function setVisibleImageOnFront() {
|
||||
if (`{{Tags}}`.split(" ").includes("imageonfront")) {
|
||||
for (const frontImg of document.querySelectorAll(".images-on-front")) {
|
||||
frontImg.setAttribute("visible", true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide images on mobile devices. */
|
||||
function toggleImageDetails() {
|
||||
for (const detailsElement of document.querySelectorAll(".images-details")) {
|
||||
detailsElement.toggleAttribute("open", !isMobile());
|
||||
}
|
||||
}
|
||||
|
||||
markPitch();
|
||||
splitTagDiv();
|
||||
setImageOnFront();
|
||||
reformatMultiFurigana();
|
||||
setVisibleImageOnFront();
|
||||
toggleImageDetails();
|
||||
</script>
|
||||
|
|
@ -48,6 +48,7 @@ b,
|
|||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.jpsentence b,
|
||||
.jpsentence strong {
|
||||
color: #f026cb;
|
||||
|
|
@ -181,7 +182,9 @@ header>div:not(:last-child) {
|
|||
/* Hide front side when the back is shown. */
|
||||
|
||||
.fside .jpsentence,
|
||||
.fside .images {
|
||||
.fside .sent-center,
|
||||
.fside .images,
|
||||
.fside .images-details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -191,15 +194,15 @@ div.ensentence>a.hint {
|
|||
color: #555;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid hsl(0deg 80% 50% / 15%);
|
||||
border-radius: 2.2px;
|
||||
padding: 2px 10px;
|
||||
margin: 4px 0;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
div.ensentence>a.hint:hover {
|
||||
color: #111;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
color: hsl(20deg 100% 20% / 80%);
|
||||
background-color: hsl(0deg 80% 50% / 3%);
|
||||
}
|
||||
|
||||
/* Definition */
|
||||
|
|
@ -322,7 +325,7 @@ footer>a:not(:last-child)::after {
|
|||
.vocab {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-top: 16px;
|
||||
margin-top: 2px;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
|
@ -394,7 +397,7 @@ footer>a:not(:last-child)::after {
|
|||
|
||||
/* Images on front, toggled by JavaScript if "imageonfront" tag is set. */
|
||||
|
||||
.images.on-front {
|
||||
.images-on-front:not([visible="true"]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -466,6 +469,61 @@ ol {
|
|||
content: "";
|
||||
}
|
||||
|
||||
/* Fix: Don't select furigana */
|
||||
|
||||
ruby rt {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.jpsentence {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.jpsentence>.overlay {
|
||||
position: absolute;
|
||||
/* Some versions of Anki don't understand inset. */
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.jpsentence>.background,
|
||||
.jpsentence>.overlay ruby rt {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.jpsentence>.background ruby rt {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Outline editable fields */
|
||||
|
||||
div[contenteditable="true"] {
|
||||
background-color: white;
|
||||
border: 1px solid gray;
|
||||
padding: 3px;
|
||||
box-shadow: 10px 5px 5px gray;
|
||||
}
|
||||
|
||||
/* Details */
|
||||
|
||||
details,
|
||||
.headword_section {
|
||||
background-color: hsl(0deg 80% 50% / 3%);
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
margin-block-end: 0.4rem;
|
||||
border: 1px solid hsl(0deg 80% 50% / 15%);
|
||||
;
|
||||
}
|
||||
|
||||
summary {
|
||||
font-size: 18px;
|
||||
color: hsl(0 80% 10% / 70%);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Night Mode */
|
||||
|
||||
.nightMode.card {
|
||||
|
|
@ -475,6 +533,7 @@ ol {
|
|||
.nightMode .wrap {
|
||||
color: #ffffff;
|
||||
background-color: inherit;
|
||||
border-color: #6d6868;
|
||||
}
|
||||
|
||||
.nightMode .tags {
|
||||
|
|
@ -522,39 +581,67 @@ ol {
|
|||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Fix: Don't select furigana */
|
||||
|
||||
ruby rt {
|
||||
user-select: none;
|
||||
.nightMode summary {
|
||||
color: hsl(0 80% 100% / 70%);
|
||||
}
|
||||
|
||||
.jpsentence {
|
||||
/* Tooltips */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.jpsentence>.overlay {
|
||||
.tooltip::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
/* Some versions of Anki don't understand inset. */
|
||||
top: 0;
|
||||
bottom: 5px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-bottom: 2px dotted hsl(0 80% 40% / 20%);
|
||||
}
|
||||
|
||||
.jpsentence>.background,
|
||||
.jpsentence>.overlay ruby rt {
|
||||
.tooltip>.tooltip-text {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
border-radius: 6px;
|
||||
padding: 0 2px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: calc(100% + 6px);
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.jpsentence>.background ruby rt {
|
||||
.tooltip .tooltip-text::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent black transparent;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Outline editable fields */
|
||||
|
||||
div[contenteditable="true"] {
|
||||
background-color: white;
|
||||
border: 1px solid gray;
|
||||
padding: 3px;
|
||||
box-shadow: 10px 5px 5px gray;
|
||||
.tooltip>.tags {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -9px;
|
||||
}
|
||||
|
||||
.tooltip-text>.tooltip-reading:not(:last-child)::after {
|
||||
content: "; ";
|
||||
color: #f6a192;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue