Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Pédagogies Multimodales
wikicolor
Commits
254b7060
Commit
254b7060
authored
Aug 20, 2020
by
Sylvain Coulange
Browse files
Mise à jour copier/coller anglais + optimisation
parent
73729dbf
Changes
4
Hide whitespace changes
Inline
Side-by-side
static/scripts/bicol2colcol.js
0 → 100644
View file @
254b7060
var
bicol2colcol
=
{
"
phon_a_majr
"
:[
"
--phon_a_maj
"
,
"
--phon_r_slash
"
],
"
phon_ai_maj
"
:[
"
--phon_a
"
,
"
--phon_i_maj
"
],
"
phon_ai_majarobase
"
:[
"
--phon_a
"
,
"
--phon_i_maj
"
,
"
--phon_schwa
"
],
"
phon_au_maj
"
:[
"
--phon_a
"
,
"
--phon_u_maj
"
],
"
phon_au_majwarobase
"
:[
"
--phon_a
"
,
"
--phon_u_maj
"
,
"
--phon_w
"
,
"
--phon_schwa
"
],
"
phon_arobasel
"
:[
"
--phon_schwa
"
,
"
--phon_l
"
],
"
phon_arobasem
"
:[
"
--phon_schwa
"
,
"
--phon_m
"
],
"
phon_arobasen
"
:[
"
--phon_schwa
"
,
"
--phon_n
"
],
"
phon_arobaseu_maj
"
:[
"
--phon_schwa
"
,
"
--phon_u_maj
"
],
"
phon_dz
"
:[
"
--phon_d
"
,
"
--phon_z
"
],
"
phon_dz_maj
"
:[
"
--phon_d
"
,
"
--phon_z_maj
"
],
"
phon_dz_retr
"
:[
"
--phon_d
"
,
"
--phon_z_retr
"
],
"
phon_dz_slash
"
:[
"
--phon_d
"
,
"
--phon_z_slash
"
],
"
phon_ef
"
:[
"
--phon_e
"
,
"
--phon_f
"
],
"
phon_ei_maj
"
:[
"
--phon_e
"
,
"
--phon_i_maj
"
],
"
phon_earobase
"
:[
"
--phon_e
"
,
"
--phon_schwa
"
],
"
phon_er
"
:[
"
--phon_e
"
,
"
--phon_r_slash
"
],
"
phon_i_majarobase
"
:[
"
--phon_i_maj
"
,
"
--phon_schwa
"
],
"
phon_ju_majarobase
"
:[
"
--phon_j
"
,
"
--phon_u_maj
"
,
"
--phon_schwa
"
],
"
phon_gb
"
:[
"
--phon_g
"
,
"
--phon_b
"
],
"
phon_gz
"
:[
"
--phon_g
"
,
"
--phon_z
"
],
"
phon_gz_maj
"
:[
"
--phon_g
"
,
"
--phon_z_maj
"
],
"
phon_h_maj_i
"
:[
"
--phon_h_maj
"
,
"
--phon_i
"
],
"
phon_ij
"
:[
"
--phon_i
"
,
"
--phon_j
"
],
"
phon_i_majr
"
:[
"
--phon_i_maj
"
,
"
--phon_r_slash
"
],
"
phon_j_maj
"
:[
"
--phon_n
"
,
"
--phon_j
"
],
"
phon_jarobase
"
:[
"
--phon_j
"
,
"
--phon_schwa
"
],
"
phon_ju_long
"
:[
"
--phon_j
"
,
"
--phon_u_long
"
],
"
phon_ju_majr
"
:[
"
--phon_j
"
,
"
--phon_u_maj
"
,
"
--phon_r_slash
"
],
"
phon_kp
"
:[
"
--phon_k
"
,
"
--phon_p
"
],
"
phon_ks
"
:[
"
--phon_k
"
,
"
--phon_s
"
],
"
phon_ks_maj
"
:[
"
--phon_k
"
,
"
--phon_s_maj
"
],
"
phon_kx
"
:[
"
--phon_k
"
,
"
--phon_x
"
],
"
phon_kw
"
:[
"
--phon_k
"
,
"
--phon_w
"
],
"
phon_lj
"
:[
"
--phon_l
"
,
"
--phon_j
"
],
"
phon_nj
"
:[
"
--phon_n
"
,
"
--phon_j
"
],
"
phon_ou_maj
"
:[
"
--phon_o
"
,
"
--phon_u_maj
"
],
"
phon_o_maji_maj
"
:[
"
--phon_o_maj
"
,
"
--phon_i_maj
"
],
"
phon_o_majr
"
:[
"
--phon_o_maj
"
,
"
--phon_r_slash
"
],
"
phon_pf
"
:[
"
--phon_p
"
,
"
--phon_f
"
],
"
phon_sz
"
:[
"
--phon_s
"
,
"
--phon_z
"
],
"
phon_tk_maj
"
:[
"
--phon_t
"
,
"
--phon_k_maj
"
],
"
phon_tk_maj_slash
"
:[
"
--phon_t
"
,
"
--phon_k_maj_slash
"
],
"
phon_ts
"
:[
"
--phon_t
"
,
"
--phon_s
"
],
"
phon_ts_chev2
"
:[
"
--phon_t
"
,
"
--phon_s_chev2
"
],
"
phon_ts_maj
"
:[
"
--phon_t
"
,
"
--phon_s_maj
"
],
"
phon_ts_maj_chev2
"
:[
"
--phon_t
"
,
"
--phon_s_maj_chev2
"
],
"
phon_ts_retr
"
:[
"
--phon_t
"
,
"
--phon_s_retr
"
],
"
phon_ts_slash
"
:[
"
--phon_t
"
,
"
--phon_s_slash
"
],
"
phon_tt_maj
"
:[
"
--phon_t
"
,
"
--phon_t_maj
"
],
"
phon_u_majarobase
"
:[
"
--phon_u_maj
"
,
"
--phon_schwa
"
],
"
phon_u_majr
"
:[
"
--phon_u_maj
"
,
"
--phon_r_slash
"
],
"
phon_wa
"
:[
"
--phon_w
"
,
"
--phon_a
"
],
"
phon_war
"
:[
"
--phon_w
"
,
"
--phon_a
"
,
"
--phon_r_slash
"
],
"
phon_wa_maj
"
:[
"
--phon_w
"
,
"
--phon_a_maj
"
],
"
phon_wa_maj_long
"
:[
"
--phon_w
"
,
"
--phon_a_maj_long
"
],
"
phon_wai_maj
"
:[
"
--phon_w
"
,
"
--phon_a
"
,
"
--phon_i_maj
"
],
"
phon_we_maj_nas
"
:[
"
--phon_w
"
,
"
--phon_e_maj_nas
"
],
"
phon_wv_maj
"
:[
"
--phon_w
"
,
"
--phon_v_maj
"
],
"
phon_schwju
"
:[
"
--phon_j
"
,
"
--phon_schwu
"
],
"
phon_schwiz
"
:[
"
--phon_schwi
"
,
"
--phon_z
"
],
"
phon_schwaz
"
:[
"
--phon_schwa
"
,
"
--phon_z
"
]
}
\ No newline at end of file
static/scripts/main.js
View file @
254b7060
...
...
@@ -4,6 +4,14 @@ $(document).ready(function(){
txtarea
.
focus
();
});
var
boolBold
=
true
;
function
toggleBold
()
{
document
.
getElementById
(
'
output
'
).
classList
.
toggle
(
'
outputBold
'
);
boolBold
=
!
boolBold
;
console
.
log
(
"
boolBold to
"
,
boolBold
);
}
const
thisURL
=
window
.
location
.
href
;
console
.
log
(
"
url:
"
,
thisURL
);
var
thisPageLang
=
""
;
...
...
@@ -28,7 +36,7 @@ function selectLang(lang){
if
(
lang
==
"
en
"
){
interface
(
"
en
"
);
document
.
getElementById
(
'
choixLang
'
).
value
=
'
en
'
;
document
.
getElementById
(
'
output
'
).
classList
.
remove
(
'
output
Bold
'
);
if
(
boolBold
)
toggle
Bold
(
);
document
.
getElementById
(
'
monochromeLabel
'
).
style
.
display
=
""
;
document
.
getElementById
(
'
monochrome
'
).
style
.
display
=
""
;
...
...
@@ -41,7 +49,7 @@ function selectLang(lang){
}
else
if
(
lang
==
"
fr
"
){
interface
(
"
fr
"
);
document
.
getElementById
(
'
choixLang
'
).
value
=
'
fr
'
;
document
.
getElementById
(
'
output
'
).
classList
.
add
(
'
output
Bold
'
);
if
(
boolBold
==
false
)
toggle
Bold
(
);
document
.
getElementById
(
'
monochromeLabel
'
).
style
.
display
=
"
none
"
;
document
.
getElementById
(
'
monochrome
'
).
style
.
display
=
"
none
"
;
...
...
@@ -418,10 +426,6 @@ function toMonochrome() {
};
}
function
toggleBold
()
{
document
.
getElementById
(
'
output
'
).
classList
.
toggle
(
'
outputBold
'
);
}
// Initialisation couleur background (par défaut black)
// if (document.getElementById('defaultBg').value == 'white') {
// document.getElementById('outputDiv').classList.toggle('win-white');
...
...
@@ -472,79 +476,112 @@ var span = document.getElementsByClassName("close")[0];
// Fonction pour ouvrir le PopUp
function
getPopUp
()
{
var
outputContent
=
document
.
getElementById
(
'
output
'
).
innerHTML
;
// <span> </span><span class="tokens" id="tok1" onclick="changeAlign(this.id)"><span class="phon phon_b">B</span><span class="phon phon_o_maj_nas">on</span><span class="phon phon_z_maj">j</span><span class="phon phon_u">ou</span><span class="phon phon_r_maj">r</span></span><span> </span><span class="tokens transMult" id="tok2" onclick="changeAlign(this.id)" title="changer de prononciation"><span class="phon phon_neutre">à</span></span><span> </span><span class="tokens transMult" id="tok3" onclick="changeAlign(this.id)" title="changer de prononciation"><span class="phon phon_t">t</span><span class="phon phon_u">ous</span></span>
var
outputContent
=
document
.
getElementById
(
'
output
'
).
innerHTML
;
var
finalOutput
=
""
;
// contiendra la chaîne de caractères à copier coller
function
phon2color
(
correspondance
,
p1
,
decalage
,
chaine
){
if
(
p1
==
'
phon_wa
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_w
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_a
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_we_maj_nas
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_w
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_e_maj_nas
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_ij
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_i
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_j
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_h_maj_i
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_h_maj
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_i
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_nj
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_n
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_j
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_ts_maj
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_t
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_s_maj
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_dz_maj
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_d
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_z_maj
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_ks
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_k
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_s
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_gz
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_g
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_z
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
if
(
p1
==
'
phon_ts
'
){
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_t
'
);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_s
'
);
var
res
=
'
<span style="background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
else
{
var
expFonte
=
"
font-family: Palatino, Times, Calibri;
"
;
var
expCoulBase
=
"
color:#cccccc;
"
var
expSizeBase
=
"
font-size:30pt;
"
;
var
expSizeStress1
=
"
font-size:45pt;
"
;
var
expSizeStress2
=
"
font-size:36pt;
"
;
var
expSizeSchwa
=
"
font-size:20pt;
"
;
var
expBold
=
"
font-weight: bold;
"
;
var
expNoBold
=
"
font-weight: normal;
"
;
var
expLong
=
"
text-decoration: underline;
"
;
// On récupère la liste des <span>
const
regexSpan
=
/<span class="tokens.*
?
>
(
.*
?
<
\/
span>
)
<
\/
span>|
(
<span class="phon_neutre">.*
?
<
\/
span>
)
|
(
<span> <
\/
span>
)
|
(
<br>
)
/gm
;
// group1: word in colors
// group2: punctuation
// group3: space
// group4: <br>
let
m
;
while
((
m
=
regexSpan
.
exec
(
outputContent
))
!==
null
)
{
// parses each result of the regex
// This is necessary to avoid infinite loops with zero-width matches
if
(
m
.
index
===
regexSpan
.
lastIndex
)
{
regexSpan
.
lastIndex
++
;
}
console
.
log
(
"
group1:
"
,
m
[
1
],
"
group2:
"
,
m
[
2
],
"
group3:
"
,
m
[
3
],
"
group4:
"
,
m
[
4
]);
if
(
m
[
4
])
{
finalOutput
+=
"
<br>
"
}
else
if
(
m
[
3
])
{
finalOutput
+=
'
<span style="
'
+
expFonte
+
expCoulBase
+
expSizeBase
+
'
"> </span>
'
;
}
else
if
(
m
[
2
])
{
if
(
boolBold
)
finalOutput
+=
m
[
2
].
replace
(
'
class="phon_neutre"
'
,
'
style="
'
+
expFonte
+
expCoulBase
+
expSizeBase
+
expBold
+
'
"
'
);
else
finalOutput
+=
m
[
2
].
replace
(
'
class="phon_neutre"
'
,
'
style="
'
+
expFonte
+
expCoulBase
+
expSizeBase
+
expNoBold
+
'
"
'
);
}
else
if
(
m
[
1
])
{
// Dans cette situation on a une suite de span de phono-graphèmes comme <span class="phon phon_au_maj stress1">hou</span><span class="phon phon_arobase_rho schwa">r</span>
// On va la transformer en liste de spans pour les traiter une par une
const
phonographiesRegex
=
/<span class="phon
(
.*
?)
">
(
.*
?)
<
\/
span>/gm
;
while
((
n
=
phonographiesRegex
.
exec
(
m
[
1
]))
!==
null
)
{
// This is necessary to avoid infinite loops with zero-width matches
if
(
n
.
index
===
phonographiesRegex
.
lastIndex
)
{
phonographiesRegex
.
lastIndex
++
;
}
// The result can be accessed through the `n`-variable.
//console.log('RESULT:',n[1],n[2]);
var
newOutputSpan
=
"
<span style='
"
;
if
(
n
[
1
].
includes
(
"
unstressed
"
))
newOutputSpan
+=
expFonte
+
expSizeBase
+
expNoBold
;
else
if
(
n
[
1
].
includes
(
"
schwa
"
))
newOutputSpan
+=
expFonte
+
expSizeSchwa
+
expNoBold
;
else
if
(
n
[
1
].
includes
(
"
stress1
"
))
newOutputSpan
+=
expFonte
+
expSizeStress1
+
expBold
;
else
if
(
n
[
1
].
includes
(
"
stress2
"
))
newOutputSpan
+=
expFonte
+
expSizeStress2
+
expBold
;
else
{
if
(
boolBold
)
newOutputSpan
+=
expFonte
+
expSizeBase
+
expBold
;
else
newOutputSpan
+=
expFonte
+
expSizeBase
+
expNoBold
;
}
// COULEURS
n
[
1
]
=
n
[
1
].
split
(
"
"
);
var
phonClass
=
""
;
for
(
i
=
0
;
i
<
n
[
1
].
length
;
i
++
)
{
if
(
n
[
1
][
i
].
match
(
/phon_.*/
))
phonClass
=
n
[
1
][
i
];
}
if
(
phonClass
.
match
(
/.*_long/
))
newOutputSpan
+=
expLong
;
if
(
phonClass
!=
""
)
newOutputSpan
+=
phon2color
(
phonClass
);
newOutputSpan
+=
"
'>
"
+
n
[
2
]
+
"
</span>
"
;
finalOutput
+=
newOutputSpan
;
}
}
}
console
.
log
(
"
finalOutput :
"
,
finalOutput
);
function
phon2color
(
p1
){
if
(
p1
in
bicol2colcol
)
{
var
col1
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
bicol2colcol
[
p1
][
0
]);
var
col2
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
bicol2colcol
[
p1
][
1
]);
var
res
=
'
background-color:
'
+
col1
+
'
;color:
'
+
col2
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;
'
;
}
else
{
var
col
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--
'
+
p1
);
var
res
=
'
<span style="color:
'
+
col
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
}
console
.
log
(
p1
+
'
→
'
+
col
);
console
.
log
(
res
);
return
res
;
}
function
bicol2color
(
correspondance
,
p1
,
decalage
,
chaine
){
var
col
=
getComputedStyle
(
document
.
documentElement
).
getPropertyValue
(
'
--phon_
'
+
p1
);
var
res
=
'
<span style="color:
'
+
col
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;">
'
;
console
.
log
(
p1
+
'
→
'
+
col
);
console
.
log
(
res
);
var
res
=
'
color:
'
+
col
+
'
;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;
'
;
}
return
res
;
}
// outputContent = outputContent.replace('<span> </span>',''); // suppr du premier span vide
outputContent
=
outputContent
.
replace
(
/<span class="phon_neutre">/g
,
'
<span style="color:#cccccc">
'
)
outputContent
=
outputContent
.
replace
(
/<span class="phon
(\w
+
)
">/g
,
phon2color
);
outputContent
=
outputContent
.
replace
(
/<span class="phon
\w
+
(\w
+
)
">/g
,
bicol2color
);
outputContent
=
outputContent
.
replace
(
/onclick="changeAlign
\(
this
\.
id
\)
"/g
,
''
);
outputContent
=
outputContent
.
replace
(
/title="changer de prononciation"/g
,
''
);
outputContent
=
outputContent
.
replace
(
/class="tokens
(
transMult
)
*" /g
,
''
);
outputContentWhite
=
outputContent
.
replace
(
/#ffffff/g
,
'
#000000
'
);
document
.
getElementById
(
'
pLienDiv
'
).
innerHTML
=
outputContent
;
document
.
getElementById
(
'
pLienDivWhite
'
).
innerHTML
=
outputContentWhite
;
}
// Remplacement des blancs par des noirs pour le fond blanc
finalOutputWhite
=
finalOutput
.
replace
(
/#ffffff/g
,
'
#000000
'
);
finalOutput
=
finalOutput
.
replace
(
/-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;/g
,
''
);
// on vire les strokes pour fond noir
// Insertion des résultats dans les div associées du popup
document
.
getElementById
(
'
pLienDiv
'
).
innerHTML
=
finalOutput
;
document
.
getElementById
(
'
pLienDivWhite
'
).
innerHTML
=
finalOutputWhite
;
// Affichage popup
modal
.
style
.
display
=
"
block
"
;
}
// When the user clicks on <span> (x), close the modal
span
.
onclick
=
function
()
{
modal
.
style
.
display
=
"
none
"
;
...
...
static/styles/phonochromie_alem_v3.css
View file @
254b7060
/* CSS ALeM-APP v3 */
/* https://alem.hypotheses.org/ */
/* Last update: 2020/0
6
/2
7
*/
/* Last update: 2020/0
8
/2
0
*/
:root
{
--phon_bicolor1
:
#ff0000
;
...
...
@@ -207,30 +207,45 @@ svg {
.phon_ij
{
background
:
-webkit-linear-gradient
(
var
(
--phon_i
)
62%
,
var
(
--phon_j
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_h_maj_i
{
background
:
-webkit-linear-gradient
(
var
(
--phon_h_maj
)
62%
,
var
(
--phon_i
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_nj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_n
)
62%
,
var
(
--phon_j
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_j_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_n
)
62%
,
var
(
--phon_j
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_ef
{
background
:
-webkit-linear-gradient
(
var
(
--phon_e
)
62%
,
var
(
--phon_f
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_ju
{
background
:
-webkit-linear-gradient
(
var
(
--phon_j
)
62%
,
var
(
--phon_u
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_ju_long
{
background
:
-webkit-linear-gradient
(
var
(
--phon_j
)
62%
,
var
(
--phon_u
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
text-decoration
:
underline
var
(
--phon_u
);}
.phon_ju_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_j
)
62%
,
var
(
--phon_u_maj
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_schwju
{
background
:
-webkit-linear-gradient
(
var
(
--phon_j
)
62%
,
var
(
--phon_schwu
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_arobasel
{
background
:
-webkit-linear-gradient
(
var
(
--phon_
arobase
)
62%
,
var
(
--phon_l
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_arobasem
{
background
:
-webkit-linear-gradient
(
var
(
--phon_
arobase
)
62%
,
var
(
--phon_m
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_arobasen
{
background
:
-webkit-linear-gradient
(
var
(
--phon_
arobase
)
62%
,
var
(
--phon_n
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_arobasel
{
background
:
-webkit-linear-gradient
(
var
(
--phon_
schwa
)
62%
,
var
(
--phon_l
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_arobasem
{
background
:
-webkit-linear-gradient
(
var
(
--phon_
schwa
)
62%
,
var
(
--phon_m
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_arobasen
{
background
:
-webkit-linear-gradient
(
var
(
--phon_
schwa
)
62%
,
var
(
--phon_n
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_schwiz
{
background
:
-webkit-linear-gradient
(
var
(
--phon_schwi
)
62%
,
var
(
--phon_z
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_schwaz
{
background
:
-webkit-linear-gradient
(
var
(
--phon_schwa
)
62%
,
var
(
--phon_z
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_lj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_l
)
62%
,
var
(
--phon_j
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_sz
{
background
:
-webkit-linear-gradient
(
var
(
--phon_s
)
62%
,
var
(
--phon_z
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_tt_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_t
)
62%
,
var
(
--phon_t_maj
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_jarobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_j
)
62%
,
var
(
--phon_schwa
)
60%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
/* gradient 70% */
.phon_ei_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_e
)
60%
,
var
(
--phon_i_maj
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_i_majarobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_i_maj
)
60%
,
var
(
--phon_arobase
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_i_majr
{
background
:
-webkit-linear-gradient
(
var
(
--phon_i_maj
)
60%
,
var
(
--phon_r_slash
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_earobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_e
)
60%
,
var
(
--phon_arobase
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_i_majarobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_i_maj
)
60%
,
var
(
--phon_schwa
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_earobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_e
)
60%
,
var
(
--phon_schwa
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_au_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_a
)
60%
,
var
(
--phon_u_maj
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_arobaseu_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_
arobase
)
60%
,
var
(
--phon_u_maj
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_u_majarobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_u_maj
)
60%
,
var
(
--phon_
arobase
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_arobaseu_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_
schwa
)
60%
,
var
(
--phon_u_maj
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_u_majarobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_u_maj
)
60%
,
var
(
--phon_
schwa
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_o_maji_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_o_maj
)
60%
,
var
(
--phon_i_maj
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_ai_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_a
)
60%
,
var
(
--phon_i_maj
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_er
{
background
:
-webkit-linear-gradient
(
var
(
--phon_e
)
60%
,
var
(
--phon_r_slash
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_i_majr
{
background
:
-webkit-linear-gradient
(
var
(
--phon_i_maj
)
60%
,
var
(
--phon_r_slash
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_u_majr
{
background
:
-webkit-linear-gradient
(
var
(
--phon_u_maj
)
60%
,
var
(
--phon_r_slash
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_a_majr
{
background
:
-webkit-linear-gradient
(
var
(
--phon_a_maj
)
60%
,
var
(
--phon_r_slash
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_o_majr
{
background
:
-webkit-linear-gradient
(
var
(
--phon_o_maj
)
60%
,
var
(
--phon_r_slash
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_o_maju_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_o_maj
)
60%
,
var
(
--phon_u_maj
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
/* gradients triples */
.phon_ju_majarobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_j
)
55%
,
var
(
--phon_u_maj
)
65%
,
var
(
--phon_
arobase
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_ju_majarobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_j
)
55%
,
var
(
--phon_u_maj
)
65%
,
var
(
--phon_
schwa
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_wai_maj
{
background
:
-webkit-linear-gradient
(
var
(
--phon_w
)
58%
,
var
(
--phon_a
)
58%
,
var
(
--phon_i_maj
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_war
{
background
:
-webkit-linear-gradient
(
var
(
--phon_w
)
58%
,
var
(
--phon_a
)
58%
,
var
(
--phon_r_slash
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_ju_majr
{
background
:
-webkit-linear-gradient
(
var
(
--phon_j
)
58%
,
var
(
--phon_u_maj
)
58%
,
var
(
--phon_r_slash
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
.phon_ai_majarobase
{
background
:
-webkit-linear-gradient
(
var
(
--phon_a
)
58%
,
var
(
--phon_i_maj
)
58%
,
var
(
--phon_arobase
)
75%
);
-webkit-background-clip
:
text
;
background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;}
/*STYLES DES TRANSCRIPTIONS GRAPHIQUES*/
.tran
{
...
...
templates/coloriseur.html
View file @
254b7060
...
...
@@ -68,11 +68,11 @@
</div>
<div
class=
"modal-body"
>
<p>
Copier/coller le texte ci-dessous dans LibreOffice, Word ou dans un e-mail, par exemple.
</p>
<div
id=
"pLienDiv"
contenteditable=
"true"
class=
"pLienDiv"
style=
"background-color: #000000;
font-weight: bold;
"
></div>
<div
id=
"pLienDiv"
contenteditable=
"true"
class=
"pLienDiv"
style=
"background-color: #000000;"
></div>
<div
class=
"copyButton"
>
<button
onclick=
"toClipBoard('pLienDiv','myTooltip')"
onmouseout=
"outFunc()"
><span
class=
"copyButtonText"
id=
"myTooltip"
>
Copier
</span>
Copier
</button>
</div>
<div
id=
"pLienDivWhite"
contenteditable=
"true"
class=
"pLienDiv"
style=
"
font-weight: bold;
-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"
></div>
<div
id=
"pLienDivWhite"
contenteditable=
"true"
class=
"pLienDiv"
style=
"-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"
></div>
<div
class=
"copyButton"
>
<button
onclick=
"toClipBoard('pLienDivWhite', 'myTooltipWhite')"
onmouseout=
"outFuncWhite()"
><span
class=
"copyButtonText"
id=
"myTooltipWhite"
>
Copier
</span>
Copier
</button>
</div>
...
...
@@ -103,6 +103,7 @@
<script
type=
"text/javascript"
src=
"{% static 'languages/languages.js' %}"
></script>
<script
src=
"{% static 'scripts/loc2stand.js' %}"
></script>
<script
src=
"{% static 'scripts/bicol2colcol.js' %}"
></script>
<script
src=
"{% static 'scripts/main.js' %}"
></script>
<script
src=
"{% static 'scripts/keyboard.js' %}"
></script>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment