Commit d69b2470 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout fonction set taille espaces

parent 14d0ef3a
......@@ -470,4 +470,9 @@ var langJson = {
"en": "Export/Save",
"zh": "Export/Save"
},
"sp_customSpace": {
"fr": "Taille des espaces entre les mots :",
"en": "Length of spaces between words:",
"zh": "Length of spaces between words:"
}
}
\ No newline at end of file
......@@ -65,7 +65,7 @@ async function getColorisation() {
outputDiv.innerHTML = outputDiv.innerHTML + '<span class="phon_neutre">'+ outText[i][0][0][0].graph +'</span>';
if (outText[i][0][0][0].graph.match(/^-$/)) noSpace = true; else noSpace = false;
} else if (outText[i][0][0][0].graph.match(/\(|\[|\{|<|«|“/)) {
outputDiv.innerHTML = outputDiv.innerHTML + '<span> </span><span class="phon_neutre">'+ outText[i][0][0][0].graph +'</span>';
outputDiv.innerHTML = outputDiv.innerHTML + '<span class="space"> </span><span class="phon_neutre">'+ outText[i][0][0][0].graph +'</span>';
noSpace = true;
} else if (noSpace) {
if (outText[i].length>1) {
......@@ -83,9 +83,9 @@ async function getColorisation() {
}
} else {
if (outText[i].length>1) {
outputDiv.innerHTML = outputDiv.innerHTML + '<span> </span><span class="tokens" id="tok'+ i +'" onclick="showAlignPop(this.id)"></span>';
outputDiv.innerHTML = outputDiv.innerHTML + '<span class="space"> </span><span class="tokens" id="tok'+ i +'" onclick="showAlignPop(this.id)"></span>';
} else {
outputDiv.innerHTML = outputDiv.innerHTML + '<span> </span><span class="tokens" id="tok'+ i +'"></span>';
outputDiv.innerHTML = outputDiv.innerHTML + '<span class="space"> </span><span class="tokens" id="tok'+ i +'"></span>';
}
}
if (outText[i][0][0][0].graph.match(/^.+’$/)) noSpace = true; else noSpace = false;
......@@ -750,4 +750,10 @@ window.onclick = function(event) {
}
}
if (window.location.href.split('!').length>1) importCustom(window.location.href.split('!')[1]);
\ No newline at end of file
if (window.location.href.split('!').length>1) importCustom(window.location.href.split('!')[1]);
function setSpaceLength(val){
document.documentElement.style.setProperty('--space', val/10+'em');
console.log("Set space length to",val);
}
\ No newline at end of file
......@@ -239,6 +239,9 @@ function exportCustom(){
var fac = 1;
if(!document.getElementById('liaisonsFacultatives').checked) fac=0;
// Mémorisation taille des espaces
var spaceLen = getComputedStyle(document.documentElement).getPropertyValue('--space').replace('em','')*10;
// Génération du lien
var params = [];
if(unchecks.length>0) params.push('uck'+unchecks);
......@@ -246,6 +249,7 @@ function exportCustom(){
if(bicol) params.push('bic');
if(mnc) params.push('mnc');
if(obl==0 || fac==0) params.push('lia'+String(obl)+String(fac));
if(spaceLen!="normal") params.push('spa'+spaceLen);
if(defaultBg == "white") params.push('bgw');
if(thisRegion!="FR") params.push('reg'+thisRegion);
......@@ -319,4 +323,9 @@ function importCustom(paramlink){
}
toggleLiaisons();
}
if ("spa" in p2param) {
document.getElementById('spaceLenInput').value = p2param['spa'][0];
setSpaceLength(p2param['spa'][0]);
}
}
/* CSS ALeM-APP v4 */
/* https://alem.hypotheses.org/ */
/* Last update: 2021/09/16 */
/* Last update: 2021/10/13 */
:root {
--bicolor1: #ff0000;
......@@ -16,10 +16,9 @@
--phon_o_maj_nas: #7f2a18; /*ɔ̃*/
--phon_1: #00655d; /*ɨ*/
--phon_2: #c9004d; /*ø*/
--phon_3: #ef2d52; /*ɜ*/
--phon_3_rho: #ed727e; /*ɝ*/
--phon_3: #ed727e; /*ɜ*/
--phon_3_rho: #c77a82; /*ɝ*/
--phon_3_slash: lightgray; /*ɞ 3\*/
--phon_3_long: #ef2d52; /*ɜ:*/
--phon_4: #c3ffff; /*ɾ*/
--phon_6: lightgray; /*ɐ*/
--phon_7: #ad9501; /*ɤ*/
......@@ -29,7 +28,6 @@
--phon_9_maj: lightgray; /*ɶ*/
--phon_9_nas: #f89f7d; /*œ̃*/
--phon_a_maj: #922289; /*ɑ*/
--phon_a_maj_long: #922289; /*ɑ:*/
--phon_a: #ffffff;
--phon_a_centr: lightgray; /*ä a_"*/
--phon_arobase_rho: #ffcc99; /*ɚ*/
......@@ -53,7 +51,6 @@
--phon_h: #d8e7d9;
--phon_h_maj: #ffeba2; /*ɥ*/
--phon_i: #e60004;
--phon_i_long: #e60004;
--phon_i_maj: #e7236d; /*ɪ*/
--phon_int_slash: #be2f2f; /*ʕ ?\*/
--phon_j: #f591ad;
......@@ -69,7 +66,6 @@
--phon_n_emph: #555c8a; /*nˤ*/
--phon_o: #a64b00;
--phon_o_maj: #bc7b5e; /*ɔ*/
--phon_o_maj_long: #bc7b5e; /*ɔ:*/
--phon_p: #90312f;
--phon_p_slash: #e8ea2d; /*ɸ p\*/
--phon_p_h: #00cccc; /*pʰ*/
......@@ -79,7 +75,7 @@
--phon_r_emph: #35ccb3; /*rˤ*/
--phon_r_maj: #ee863f; /*ʁ*/
--phon_r_slash_retr: #8C9194; /*ɻ r\`*/
--phon_r_slash: #fe6017;/*ɹ r\*/
--phon_r_slash: #ee7d2d;/*ɹ r\*/
--phon_s_maj: #019bcf; /*ʃ*/
--phon_s: #6eab2c;
--phon_s_emph: #5b8d25; /*sˤ*/
......@@ -90,7 +86,6 @@
--phon_t_maj: #e9ea8c; /*θ*/
--phon_t_h: #f8bfc6; /*tʰ*/
--phon_u: #007b4e;
--phon_u_long: #007b4e;
--phon_u_maj: #ae9a91; /*ʊ*/
--phon_v: #9a8d1b;
--phon_v_maj: #feea56; /*ʌ*/
......@@ -106,7 +101,7 @@
--phon_z_retr: #b87d6b; /*ʐ z`*/
--phon_schwi: #f8b3ba; /* pour l'anglais i/ɪ */
--phon_schwa: #ffed59; /* pour l'anglais ə */
--phon_schwa: #e7dd87; /* pour l'anglais ə */
--phon_schwu: #b9dbc5; /* pour l'anglais u/ʊ */
--phon_nas: #acadee; /*̃ */
......@@ -181,6 +176,7 @@
.phon_n { fill: var(--phon_n); color:var(--phon_n); stop-color:var(--phon_n); background:-webkit-linear-gradient(var(--phon_n), var(--phon_n));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; }
.phon_n_emph { fill: var(--phon_n_emph); color:var(--phon_n_emph); stop-color:var(--phon_n_emph); background:-webkit-linear-gradient(var(--phon_n_emph), var(--phon_n_emph));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; }
.phon_o { fill: var(--phon_o); color:var(--phon_o); stop-color:var(--phon_o); background:-webkit-linear-gradient(var(--phon_o), var(--phon_o));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; }
.phon_o_long { fill: var(--phon_o); color:var(--phon_o); stop-color:var(--phon_o); background:-webkit-linear-gradient(var(--phon_o), var(--phon_o));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; text-decoration: underline var(--phon_o); }
.phon_o_maj { fill: var(--phon_o_maj); color:var(--phon_o_maj); stop-color:var(--phon_o_maj); background:-webkit-linear-gradient(var(--phon_o_maj), var(--phon_o_maj));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; } /*ɔ*/
.phon_o_maj_long { fill: var(--phon_o_maj); color:var(--phon_o_maj); stop-color:var(--phon_o_maj); background:-webkit-linear-gradient(var(--phon_o_maj), var(--phon_o_maj));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; text-decoration: underline var(--phon_o_maj);} /*ɔ:*/
.phon_p { fill: var(--phon_p); color:var(--phon_p); stop-color:var(--phon_p); background:-webkit-linear-gradient(var(--phon_p), var(--phon_p));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; }
......@@ -231,12 +227,13 @@
.bicolorWhite2 { fill: var(--bicolorWhite2); color: var(--bicolorWhite2); }
/* gradients 20-30% */
.phon_m_maj7 { background:-webkit-linear-gradient(var(--phon_m_maj) 20%, var(--phon_7) 30%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
/* gradients 40% */
.phon_wo { background:-webkit-linear-gradient(var(--phon_w) 42%, var(--phon_o) 40%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
/* gradients 50% */
.phon_arho { background:-webkit-linear-gradient(var(--phon_a) 52%, var(--phon_rho) 50%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_7rho { background:-webkit-linear-gradient(var(--phon_7) 52%, var(--phon_rho) 50%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_wa { background:-webkit-linear-gradient(var(--phon_w) 52%, var(--phon_a) 50%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_wa_maj { background: -webkit-linear-gradient(var(--phon_w) 52%, var(--phon_a_maj) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_wa_maj_long { background: -webkit-linear-gradient(var(--phon_w) 52%, var(--phon_a_maj) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-decoration: underline var(--phon_a_maj); }
......@@ -272,29 +269,33 @@
.phon_tt_maj { background: -webkit-linear-gradient(var(--phon_t) 52%, var(--phon_t_maj) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_jarobase { background: -webkit-linear-gradient(var(--phon_j) 52%, var(--phon_schwa) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* gradient 60% */
.phon_ei_maj { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_i_maj) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ei_maj { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majarobase { background: -webkit-linear-gradient(var(--phon_i_maj) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_earobase { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_au_maj { background: -webkit-linear-gradient(var(--phon_a) 50%, var(--phon_u_maj) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobaseu_maj { background: -webkit-linear-gradient(var(--phon_schwa) 50%, var(--phon_u_maj) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_au_maj { background: -webkit-linear-gradient(var(--phon_cbrack) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_arobaseu_maj { background: -webkit-linear-gradient(var(--phon_3) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_u_majarobase { background: -webkit-linear-gradient(var(--phon_u_maj) 50%, var(--phon_schwa) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maji_maj { background: -webkit-linear-gradient(var(--phon_o_maj) 50%, var(--phon_i_maj) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_maj { background: -webkit-linear-gradient(var(--phon_a) 50%, var(--phon_i_maj) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maji_maj { background: -webkit-linear-gradient(var(--phon_o) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_maj { background: -webkit-linear-gradient(var(--phon_v_maj) 50%, var(--phon_schwi) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_er { background: -webkit-linear-gradient(var(--phon_e) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_i_majr { background: -webkit-linear-gradient(var(--phon_i_maj) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_u_majr { background: -webkit-linear-gradient(var(--phon_u_maj) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_a_majr { background: -webkit-linear-gradient(var(--phon_a_maj) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_majr { background: -webkit-linear-gradient(var(--phon_o_maj) 50%, var(--phon_r_slash) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maju_maj { background: -webkit-linear-gradient(var(--phon_o_maj) 50%, var(--phon_u_maj) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_o_maju_maj { background: -webkit-linear-gradient(var(--phon_o_maj) 50%, var(--phon_schwu) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* gradient 50-70% */
.phon_a_rho { background:-webkit-linear-gradient(var(--phon_a) 50%, var(--phon_rho) 70%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.phon_7_rho { background:-webkit-linear-gradient(var(--phon_7) 50%, var(--phon_rho) 70%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
/* gradients triples */
.phon_ju_majarobase { background: -webkit-linear-gradient(var(--phon_j) 45%, var(--phon_u_maj) 55%, var(--phon_schwa) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_wai_maj { background: -webkit-linear-gradient(var(--phon_w) 45%, var(--phon_a) 55%, var(--phon_i_maj) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_wai_maj { background: -webkit-linear-gradient(var(--phon_w) 45%, var(--phon_a) 55%, var(--phon_schwi) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_war { background: -webkit-linear-gradient(var(--phon_w) 45%, var(--phon_a) 55%, var(--phon_r_slash) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ju_majr { background: -webkit-linear-gradient(var(--phon_j) 45%, var(--phon_u_maj) 55%, var(--phon_r_slash) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_majarobase { background: -webkit-linear-gradient(var(--phon_a) 45%, var(--phon_i_maj) 55%, var(--phon_arobase) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.phon_ai_majarobase { background: -webkit-linear-gradient(var(--phon_a) 45%, var(--phon_i_maj) 55%, var(--phon_schwa) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
/* gradients horizontaux (mandarin) */
......
......@@ -5,6 +5,7 @@
--sinosvgtextfill: black;
--sinosvgneutrecolor: white;
--sinosvgborder: solid 1px white;
--space: normal;
}
body {
......@@ -552,4 +553,8 @@ footer {
margin: auto;
display: inline-flex;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.space {
letter-spacing: var(--space);
}
\ No newline at end of file
......@@ -115,6 +115,7 @@
<button class="langtitle" style="background-color: rgb(247, 211, 93);font-size:.8em;" id="ti_partager" onclick="exportCustom()"><span id="sp_btnExportCustom" class="langspan"></span></button>
<br/>
<p><span class="langspan" id="sp_customSpace"></span> <input id="spaceLenInput" type="number" size="2" value="0" min="-3" onchange="setSpaceLength(this.value)"></p>
<small><i>(*n'hésitez pas à nous faire remonter vos besoins et suggestions pour WikiColor! <a href="mailto:contact@alem-app.fr">nous contacter</a>)</i></small>
</div> <!-- end accordion body -->
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment