Skip to content

Commit 26edf21

Browse files
hellpanderrrhellpanderrr
committed
adding help button; adding meta description translations
1 parent 9b8c3cf commit 26edf21

4 files changed

Lines changed: 81 additions & 19 deletions

File tree

‎wiktionary_pron/css/style.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,12 @@ body i.icon-moon {
219219
color: black;
220220
}
221221

222+
#help_button {
223+
color: black;
224+
padding: 3px 15px 5px 15px;
225+
position: absolute;
226+
display: none;
227+
}
222228
#header {
223229
display: flex;
224230
flex-direction: row;
@@ -228,10 +234,21 @@ body i.icon-moon {
228234
align-items: baseline;
229235
}
230236

237+
#header > h1 {
238+
max-width: 80%;
239+
240+
}
241+
231242
#header > a {
232243
font-size: 30px;
233244
}
234245

246+
#tts_options {
247+
248+
display: flex;
249+
justify-content: center;
250+
}
251+
235252
.audio-popup {
236253
color: #000;
237254
text-align: left;
@@ -449,7 +466,7 @@ i svg {
449466
--moon-icon: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%0A%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.39703%2011.6315C3.39703%2016.602%207.42647%2020.6315%2012.397%2020.6315C15.6858%2020.6315%2018.5656%2018.8664%2020.1358%2016.23C16.7285%2017.3289%2012.6922%2016.7548%209.98282%2014.0455C7.25201%2011.3146%206.72603%207.28415%207.86703%203.89293C5.20697%205.47927%203.39703%208.38932%203.39703%2011.6315ZM21.187%2013.5851C22.0125%2013.1021%2023.255%2013.6488%2023%2014.5706C21.7144%2019.2187%2017.4543%2022.6315%2012.397%2022.6315C6.3219%2022.6315%201.39703%2017.7066%201.39703%2011.6315C1.39703%206.58874%204.93533%202.25845%209.61528%200.999986C10.5393%200.751502%2011.0645%201.99378%2010.5641%202.80935C8.70026%205.84656%208.83194%2010.0661%2011.397%2012.6312C13.9319%2015.1662%2018.1365%2015.3702%2021.187%2013.5851Z%22%20fill%3D%22%230F0F0F%22%2F%3E%0A%3C%2Fsvg%3E");
450467
--sun-icon: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%0A%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m24%2014.358-3.04-2.965%202.608-3.348-4.114-1.051.584-4.204-4.088%201.142-1.6-3.932-2.965%203.04-3.348-2.608-1.051%204.114-4.204-.584%201.142%204.087-3.932%201.596%203.04%202.966-2.608%203.348%204.114%201.051-.59%204.204%204.087-1.142%201.6%203.932%202.965-3.04%203.348%202.608%201.051-4.114%204.205.59-1.142-4.087zm-9.719%204.302c-.677.238-1.457.376-2.269.376-3.888%200-7.04-3.152-7.04-7.04s3.152-7.04%207.04-7.04c3.073%200%205.686%201.969%206.647%204.714l.015.049c.24.679.378%201.461.378%202.276%200%203.076-1.973%205.691-4.722%206.649l-.049.015z%22%2F%3E%3C%2Fsvg%3E");
451468
--icon-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M304 48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zm0 416c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM48 304c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm464-48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM142.9 437A48 48 0 1 0 75 369.1a48 48 0 1 0 67.9 67.9zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1a48 48 0 1 0-67.9 67.9z'/%3E%3C/svg%3E");
452-
--volume-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M215%2072L126.1%20161H24c-13.3%200-24%2010.7-24%2024v144c0%2013.3%2010.7%2024%2024%2024h102.1l89%2089c15%2015%2041%204.5%2041-17V89c0-21.5-26-32-41-17zm123.2%20108.1c-11.6-6.3-26.2-2.2-32.6%209.5-6.4%2011.6-2.2%2026.2%209.5%2032.6C328%20229.3%20336%20242.6%20336%20257c0%2014.4-8%2027.7-20.9%2034.8-11.6%206.4-15.8%2021-9.5%2032.6%206.4%2011.7%2021.1%2015.8%2032.6%209.5%2028.2-15.6%2045.8-45%2045.8-76.9s-17.5-61.3-45.8-76.9z%22%2F%3E%3C%2Fsvg%3E")
469+
--volume-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M215%2072L126.1%20161H24c-13.3%200-24%2010.7-24%2024v144c0%2013.3%2010.7%2024%2024%2024h102.1l89%2089c15%2015%2041%204.5%2041-17V89c0-21.5-26-32-41-17zm123.2%20108.1c-11.6-6.3-26.2-2.2-32.6%209.5-6.4%2011.6-2.2%2026.2%209.5%2032.6C328%20229.3%20336%20242.6%20336%20257c0%2014.4-8%2027.7-20.9%2034.8-11.6%206.4-15.8%2021-9.5%2032.6%206.4%2011.7%2021.1%2015.8%2032.6%209.5%2028.2-15.6%2045.8-45%2045.8-76.9s-17.5-61.3-45.8-76.9z%22%2F%3E%3C%2Fsvg%3E");
453470
}
454471

455472
/* Base icon class with common styles */
@@ -481,6 +498,7 @@ i svg {
481498

482499
}
483500

501+
484502
button[disabled] .icon {
485503
opacity: 0.7;
486504

@@ -532,3 +550,4 @@ button[disabled] .icon {
532550
.icon--spinner-slow {
533551
animation-duration: 1.5s;
534552
}
553+

‎wiktionary_pron/index.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<meta content="Online IPA Latin German French Spanish Portuguese Czech Ancient Greek Polish Armenian Phonetics Transcription"
2222
name="Keywords"/>
2323
<meta content="Free Online Rule-based IPA phonetic/phonemic transcription engine, which uses Wiktionary Lua pronunciation modules.
24-
Latin, German, French, Spanish, Ancient Greek, Polish, Armenian, Czech, languages are fully supported. Russian, Ukrainian and Portuguese require vowels' stressing for proper functioning."
24+
Latin, German, French, Spanish, Ancient Greek, Polish, Armenian, Czech, Russian, Belorussian, Ukrainian, Bulgarian, Icelandic, Lithuanian languages are fully supported. Portuguese require vowels' stressing for proper functioning."
2525
name="description">
2626

2727
<script src="scripts/lib/localforage.min.js"></script>
@@ -60,7 +60,8 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
6060

6161

6262
</select>
63-
<!-- <button id="help_button" type="button" title="Help for selected language" style="margin-left: 10px; display: none;">?</button>-->
63+
<button id="help_button" type="button" title="Help for selected language" style="margin-left: 10px;">?
64+
</button>
6465
<p id="loading_text"></p>
6566
</div>
6667
<div>
@@ -94,10 +95,11 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
9495
</select>
9596

9697

97-
<div>
98-
Speed: <input class="custom-input" type="range" min="0" max="200" step="10" value="100" id="tts_speed">
99-
Volume: <input class="custom-input" type="range" min="0" max="100" step="10" value="100"
100-
id="tts_volume">
98+
<div id="tts_options">
99+
<div>Speed: <input class="custom-input" type="range" min="0" max="200" step="10" value="100"
100+
id="tts_speed"></div>
101+
<div>Volume: <input class="custom-input" type="range" min="0" max="100" step="10" value="100"
102+
id="tts_volume"></div>
101103

102104
</div>
103105
</div>

‎wiktionary_pron/scripts/dynamic_meta.js‎

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,43 @@
11
import { languages } from "./languages.js";
22

3+
const translatedMeta = {
4+
// --- Languages with BOTH Phonemic and Phonetic ---
5+
Latin:
6+
"Online Latin to IPA phonemic/phonetic transcription generator and macronizer. Automatically add macrons and generate phonetic transcription.",
7+
German:
8+
"Online-Übersetzer und Generator für deutsche IPA-Transkription. Konvertiert Text in phonetische Lautschrift (phonemisch/phonetisch).",
9+
Portuguese:
10+
"Português para IPA: Gerador e conversor online de transcrição fonética. Transforme texto em português em transcrição fonémica/fonética.",
11+
Spanish:
12+
"Español a IPA: Traductor y generador de transcripción fonética en línea. Convierte texto en español a transcripción fonémica/fonética.",
13+
Armenian:
14+
"Հայերենի IPA տառադարձության առցանց գեներատոր։ Փոխակերպեք հայերեն տեքստը ֆոնեմիկ/ֆոնետիկ տառադարձության։",
15+
16+
// --- Languages with ONLY Phonemic ---
17+
French:
18+
"Français vers API/IPA : Générateur en ligne de transcription phonétique. Convertisseur de texte français en transcription phonémique.",
19+
Polish:
20+
"Polski na IPA: Online konwerter i generator transkrypcji fonetycznej. Przekształć tekst na zapis fonemiczny.",
21+
Belorussian:
22+
"Фанетычная транскрыпцыя беларускай мовы онлайн. Анлайн-генератар для пераўтварэння тэксту ў фанемічную транскрыпцыю IPA.",
23+
Bulgarian:
24+
"Фонетична транскрипция онлайн. Онлайн генератор за преобразуване на български текст във фонемична транскрипция по IPA.",
25+
Lithuanian:
26+
"Lietuvių į IPA: Internetinis fonetinės transkripcijos konverteris ir generatorius. Paverskite tekstą į foneminę transkripciją.",
27+
Czech:
28+
"Online generátor a převodník pro fonetický přepis z češtiny do IPA. Převeďte český text na fonemickou transkripci.",
29+
Greek:
30+
"Ελληνικά σε IPA: Online μετατροπέας και γεννήτρια φωνητικής μεταγραφής. Μετατρέψτε ελληνικό κείμενο σε φωνημική μεταγραφή.",
31+
Icelandic:
32+
"Íslenska yfir í IPA: Hljóðritunarbreytir og rafall á netinu. Breyttu texta í hljóðfræðilega umritun.",
33+
34+
// --- Languages with ONLY Phonetic ---
35+
Russian:
36+
"Русский в IPA: Онлайн-генератор и конвертер для фонетической транскрипции. Преобразуйте русский текст в фонетическую запись.",
37+
Ukrainian:
38+
"Українська на IPA: Онлайн-генератор і конвертер для фонетичної транскрипції. Перетворюйте текст на фонетичну транскрипцію.",
39+
};
40+
341
const sampleTexts = {
442
Latin: `Abecedarium Phoneticum Internationale, saepe notum ob litteras primas nominis Anglici IPA (International Phonetic Alphabet), sive Francogallici API (Alphabet phonétique international), est abecedarium phoneticum, a linguistis Francicis et Britannicis anno 1888 excogitatum, cuius ratio creandi est sonos omnium linguarum eodem orthographiae systemate explicare.`,
543
German: `Das Internationale Phonetische Alphabet (kurz IPA) ist ein phonetisches Alphabet und somit eine Sammlung von Zeichen, mit deren Hilfe die Laute aller menschlichen Sprachen nahezu genau beschrieben und notiert werden können. Es wurde von der International Phonetic Association (kurz IPA) entwickelt, kam in seinem ersten Entwurf 1888 heraus und ist die heute am weitesten verbreitete Lautschrift.`,
@@ -22,23 +60,30 @@ Esta transcrição normalmente se aproxima de maneira padrão de pronunciar dete
2260
Þau grunntákn sem stuðst er við í alþjóðlega hljóðstafrófinu eru stafir og sérmerki. Hægt er að hljóðrita af mismikilli nákvæmni og stöðugt er unnið að því að bæta nákvæmni stafrófsins. Alþjóðlega hljóðfræðifélagið bætir við, fjarlægir og breytir táknum eftir þörf. Núorðið eru stafirnir alls 107, sérmerkin 52 og hljómfallstákn fjögur í stafrófinu.`,
2361
};
2462

25-
try {
26-
const urlParams = new URLSearchParams(window.location.search);
27-
const selectedLanguage = urlParams.get("lang");
63+
function updateMeta(selectedLanguage) {
2864
if (selectedLanguage) {
2965
document.title = `Online ${selectedLanguage} IPA transcription`;
3066
const lang = languages[selectedLanguage];
3167
if (lang) {
32-
const availableStyles = lang.styles.join(", ");
68+
let availableStyles = " Dialects: " + lang.styles.join(", ").trim() + ".";
69+
if (lang.styles[0] === "Default") {
70+
availableStyles = "";
71+
}
3372
const availableForms = lang.forms
3473
.map((form) => form.toLowerCase())
3574
.join("/");
36-
document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator. Dialects: ${availableStyles}`;
75+
document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator.${availableStyles} ${translatedMeta[selectedLanguage]}`;
3776
}
3877
document.querySelector("#text_to_transcribe").value =
3978
sampleTexts[selectedLanguage];
40-
console.log("sample text", sampleTexts[selectedLanguage]);
4179
}
80+
}
81+
82+
try {
83+
const urlParams = new URLSearchParams(window.location.search);
84+
const selectedLanguage = urlParams.get("lang");
85+
updateMeta(selectedLanguage);
4286
} catch (err) {
4387
console.log(err);
4488
}
89+
export { updateMeta };

‎wiktionary_pron/scripts/main.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "./dynamic_meta.js";
1+
import { updateMeta } from "./dynamic_meta.js";
22
import { languages } from "./languages.js";
33
import { loadLanguage } from "./lua_init.js";
44

@@ -689,11 +689,7 @@ async function updateOptionsUponLanguageSelection(event) {
689689
updateSelectOptions(selectedLanguage, styleSelect, styleOptions);
690690
updateSelectOptions(selectedLanguage, formSelect, formOptions);
691691

692-
document.title = `Online ${selectedLanguage} IPA transcription`;
693-
const availableStyles = lang.styles.join(", ");
694-
const availableForms = lang.forms.map((form) => form.toLowerCase()).join("/");
695-
document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator. Dialects: ${availableStyles}`;
696-
692+
updateMeta(selectedLanguage);
697693
console.log("Finished changing language to ", selectedLanguage);
698694
await processTextParam();
699695
rememberText();

0 commit comments

Comments
 (0)