From 305799fd3f08c12956d0f6ba045fcf4a6c481f03 Mon Sep 17 00:00:00 2001
From: RealET <real3t@gmail.com>
Date: Wed, 12 Apr 2023 18:53:14 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20int=C3=A9gration=20de=20Modern=20Fon?=
=?UTF-8?q?t=20Stacks=20(on=20garde=20quand=20m=C3=AAme=20les=20anciennes,?=
=?UTF-8?q?=20mais=20les=20nouvelles=20sont=20plus=20vari=C3=A9es).?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../configurer_soyezcreateurs_couleurs.html | 157 ++++++++++++++++--
lang/soyezcreateursprive_fr.php | 8 +-
2 files changed, 145 insertions(+), 20 deletions(-)
diff --git a/formulaires/configurer_soyezcreateurs_couleurs.html b/formulaires/configurer_soyezcreateurs_couleurs.html
index 0bb498e0..c4f0e241 100755
--- a/formulaires/configurer_soyezcreateurs_couleurs.html
+++ b/formulaires/configurer_soyezcreateurs_couleurs.html
@@ -1,3 +1,22 @@
+<style>
+.key { text-align: right; }
+
+.nope {
+ color: #DC2626;
+}
+
+.yep {
+ text-decoration: underline;
+ text-underline-offset: 3px;
+ color: #265997;
+}
+
+.yep ~ .yep {
+ text-decoration-style: dotted;
+ text-decoration-color: #26599799;
+}
+
+</style>
<div class="formulaire_spip formulaire_configurer_sc">
[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
@@ -595,22 +614,45 @@
</p>
<fieldset>
<h3 class="legend"><:soyezcreateursprive:cfg_polices_affichage:></h3>
- <p[ style='font-family:(#ENV{fontsnavigation,'Verdana, Arial, Geneva, sans-serif'});border:1px solid #aaa;']>
- <:spip:icone_voir_en_ligne:> : <a href="http://www.angelfire.com/al4/rcollins/style/fonts.html">Fonts for the Web</a>
- et <a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html">Common fonts to all versions of Windows & Mac equivalents</a>.
- <br /><em><:soyezcreateursprive:cfg_texte_police_choisie:></em>.
- </p>
- #SET{fonts, #ARRAY{'Arial, Helvetica, sans-serif','Arial, Helvetica, sans-serif',
- 'Calibri,Tahoma,Arial,Helvetica, sans-serif','Calibri,Tahoma,Arial,Helvetica, sans-serif',
- '"Courier New", Courier, monospace', '"Courier New", Courier, monospace',
- 'Georgia, serif','Georgia, serif',
- 'Impact, Charcoal, sans-serif','Impact, Charcoal, sans-serif',
- '"Lucida Console", Monaco, monospace','"Lucida Console", Monaco, monospace',
- '"Times New Roman", Times, serif','"Times New Roman", Times, serif',
- 'Verdana, Arial, Geneva, sans-serif','Verdana, Arial, Geneva, sans-serif',
- '"Trebuchet MS", Helvetica, sans-serif','"Trebuchet MS", Helvetica, sans-serif'}}
- #SET{font_defaut, 'Verdana, Arial, Geneva, sans-serif'}
- <[(#VAL{ul}|saisie_balise_structure_formulaire)] class="editer-groupe">
+ <div[ style='font-family:(#ENV{fontsnavigation,'Verdana, Arial, Geneva, sans-serif'});border:1px solid #aaa;']>
+ <p><:spip:icone_voir_en_ligne:> : </p>
+ <ul class="spip">
+ <li><a href="https://modernfontstacks.com/" class="spip_out" target="_blank" rel="noopener noreferrer">Modern Font Stacks</a></li>
+ <li><a href="http://www.angelfire.com/al4/rcollins/style/fonts.html" class="spip_out" target="_blank" rel="noopener noreferrer">Fonts for the Web</a> (déprécié)</li>
+ <li><a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html" class="spip_out" target="_blank" rel="noopener noreferrer">Common fonts to all versions of Windows & Mac equivalents</a> (déprécié)</li>
+ </ul>
+ <p><em><:soyezcreateursprive:cfg_texte_police_choisie:></em>.</p>
+ </div>
+ <div class="key">
+ Sur cet ordinateur : <span class="yep">Utilisée</span>, <span class="yep">Installée</span>, <span class="nope">Non installée</span>
+ </div>
+ #SET{fonts, #ARRAY{
+ 'system-ui, sans-serif', '<b style="font-family: system-ui, sans-serif;">System UI</b> : <span>system-ui</span>, <span>sans-serif</span>',
+ 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif', '<b style="font-family: Charter, ''Bitstream Charter'', ''Sitka Text'', Cambria, serif;">Transitional</b> : <span>Charter</span>, <span> Bitstream Charter</span>, <span> Sitka Text</span>, <span> Cambria</span>, <span> serif</span>',
+ '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif', '<b style="font-family: ''Iowan Old Style'', ''Palatino Linotype'', ''URW Palladio L'', P052, serif;">Old Style</b> : <span>Iowan Old Style</span>, <span>Palatino Linotype</span>, <span>URW Palladio L</span>, <span>P052</span>, <span>serif</span>',
+ 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif', '<b style="font-family: Seravek, ''Gill Sans Nova'', Ubuntu, Calibri, ''DejaVu Sans'', source-sans-pro, sans-serif;">Humanist</b> : <span>Seravek</span>, <span>Gill Sans Nova</span>, <span>Ubuntu</span>, <span>Calibri</span>, <span>DejaVu Sans</span>, <span>source-sans-pro</span>, <span>sans-serif</span>',
+ 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif', '<b style="font-family: Avenir, ''Avenir Next LT Pro'', Montserrat, Corbel, ''URW Gothic'', source-sans-pro, sans-serif;">Geometric Humanist</b> : <span>Avenir</span>, <span>Avenir Next LT Pro</span>, <span>Montserrat</span>, <span>Corbel</span>, <span>URW Gothic</span>, <span>source-sans-pro</span>, <span>sans-serif</span>',
+ 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif', '<b style="font-family: Optima, Candara, ''Noto Sans'', source-sans-pro, sans-serif;">Classical Humanist</b> : <span>Optima</span>, <span>Candara</span>, <span>Noto Sans</span>, <span>source-sans-pro</span>, <span>sans-serif</span>',
+ 'Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif', '<b style="font-family: Inter, Roboto, ''Helvetica Neue'', ''Arial Nova'', ''Nimbus Sans'', Arial, sans-serif;">Neo-Grotesque</b> : <span>Inter</span>, <span>Roboto</span>, <span>Helvetica Neue</span>, <span>Arial Nova</span>, <span>Nimbus Sans</span>, <span>Arial</span>, <span>sans-serif</span>',
+ '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace', '<b style="font-family: ''Nimbus Mono PS'', ''Courier New'', ''Cutive Mono'', monospace;">Monospace Slab Serif</b> : <span>Nimbus Mono PS</span>, <span>Courier New</span>, <span>Cutive Mono</span>, <span>monospace</span>',
+ 'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace', '<b style="font-family: ui-monospace, ''Cascadia Code'', ''Source Code Pro'', Menlo, Consolas, ''DejaVu Sans Mono'', monospace;">Monospace Code</b> : <span>ui-monospace</span>, <span>Cascadia Code</span>, <span>Source Code Pro</span>, <span>Menlo</span>, <span>Consolas</span>, <span>DejaVu Sans Mono</span>, <span>monospace</span>',
+ 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif', '<b style="font-family: Bahnschrift, ''DIN Alternate'', ''Franklin Gothic Medium'', ''Nimbus Sans Narrow'', sans-serif-condensed, sans-serif;">Industrial</b> : <span>Bahnschrift</span>, <span>DIN Alternate</span>, <span>Franklin Gothic Medium</span>, <span>Nimbus Sans Narrow</span>, <span>sans-serif-condensed</span>, <span>sans-serif</span>',
+ 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif', '<b style="font-family: ui-rounded, ''Hiragino Maru Gothic ProN'', Quicksand, Comfortaa, Manjari, ''Arial Rounded MT Bold'', Calibri, source-sans-pro, sans-serif;">Rounded Sans</b> : <span>ui-rounded</span>, <span>Hiragino Maru Gothic ProN</span>, <span>Quicksand</span>, <span>Comfortaa</span>, <span>Manjari</span>, <span>Arial Rounded MT Bold</span>, <span>Calibri</span>, <span>source-sans-pro</span>, <span>sans-serif</span>',
+ 'Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif', '<b style="font-family: Rockwell, ''Rockwell Nova'', ''Roboto Slab'', ''DejaVu Serif'', ''Sitka Small'', serif;">Slab Serif</b> : <span>Rockwell</span>, <span>Rockwell Nova</span>, <span>Roboto Slab</span>, <span>DejaVu Serif</span>, <span>Sitka Small</span>, <span>serif</span>',
+ 'Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif', '<b style="font-family: Superclarendon, ''Bookman Old Style'', ''URW Bookman'', ''URW Bookman L'', ''Georgia Pro'', Georgia, serif;">Antique</b> : <span>Superclarendon</span>, <span>Bookman Old Style</span>, <span>URW Bookman</span>, <span>URW Bookman L</span>, <span>Georgia Pro</span>, <span>Georgia</span>, <span>serif</span>',
+ 'Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif', '<b style="font-family: Didot, ''Bodoni MT'', ''Noto Serif Display'', ''URW Palladio L'', P052, Sylfaen, serif;">Didone</b> : <span>Didot</span>, <span>Bodoni MT</span>, <span>Noto Serif Display</span>, <span>URW Palladio L</span>, <span>P052</span>, <span>Sylfaen</span>, <span>serif</span>',
+ '"Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive', '<b style="font-family: ''Segoe Print'', ''Bradley Hand'', Chilanka, TSCu_Comic, casual, cursive;">Handwritten</b> : <span>Segoe Print</span>, <span>Bradley Hand</span>, <span>Chilanka</span>, <span>TSCu_Comic</span>, <span>casual</span>, <span>cursive</span>',
+ 'Arial, Helvetica, sans-serif','<span>Arial</span>, <span>Helvetica</span>, <span>sans-serif</span>',
+ 'Calibri,Tahoma,Arial,Helvetica, sans-serif','<span>Calibri</span>, <span>Tahoma</span>, <span>Arial</span>, <span>Helvetica</span>, <span>sans-serif</span>',
+ '"Courier New", Courier, monospace', '<span>Courier New</span>, <span>Courier</span>, <span>monospace</span>',
+ 'Georgia, serif','<span>Georgia</span>, <span>serif</span>',
+ 'Impact, Charcoal, sans-serif','<span>Impact</span>, <span>Charcoal</span>, <span>sans-serif</span>',
+ '"Lucida Console", Monaco, monospace','<span>Lucida Console</span>, <span>Monaco</span>, <span>monospace</span>',
+ '"Times New Roman", Times, serif','<span>Times New Roman</span>, <span>Times</span>, <span>serif</span>',
+ 'Verdana, Arial, Geneva, sans-serif','<span>Verdana</span>, <span>Arial</span>, <span>Geneva</span>, <span>sans-serif</span>',
+ '"Trebuchet MS", Helvetica, sans-serif','<span>Trebuchet MS</span>, <span>Helvetica</span>, <span>sans-serif</span>'}}
+ #SET{font_defaut, '<span>Verdana</span>, <span>Arial</span>, <span>Geneva</span>, <span>sans-serif</span>'}
+ <[(#VAL{ul}|saisie_balise_structure_formulaire)] class="editer-groupe font-stack">
[(#SAISIE{radio,fontsnavigation,
label=<:soyezcreateursprive:cfg_police_nav:>,
defaut=#GET{font_defaut},
@@ -679,3 +721,86 @@
</div>
</form>
</div>
+<script>/**
+ * Checks if a font is available to be used on a web page.
+ *
+ * @param {String} fontName The name of the font to check
+ * @param {Function} callback A function to handle the boolean result of the font availability check
+ * @license MIT
+ * @copyright Sam Clarke 2013
+ * @author Sam Clarke <sam@samclarke.com>
+ * @url https://www.samclarke.com/javascript-is-font-available/
+ *
+ * Modified on 02/2023 to execute the font availability check asynchronously
+ * using requestIdleCallback, and to invoke the callback function with the boolean result of the check.
+ */
+
+((document) => {
+ let width;
+ const body = document.body;
+
+ const container = document.createElement('span');
+ container.innerHTML = 'wi'.repeat(100);
+ container.style.cssText = `
+ position:absolute;
+ width:auto;
+ font-size:128px;
+ left:-99999px;
+ `;
+
+ const getWidth = (fontFamily) => {
+ container.style.fontFamily = fontFamily;
+
+ body.appendChild(container);
+ width = container.clientWidth;
+ body.removeChild(container);
+
+ return width;
+ };
+
+ // Pre compute the widths of monospace, serif & sans-serif
+ // to improve performance.
+ const monoWidth = getWidth('monospace');
+ const serifWidth = getWidth('serif');
+ const sansWidth = getWidth('sans-serif');
+
+ window.isFontAvailable = (font, callback) => {
+ if ('requestIdleCallback' in window) {
+ requestIdleCallback(() => {
+ const available =
+ monoWidth !== getWidth(`${font},monospace`) ||
+ sansWidth !== getWidth(`${font},sans-serif`) ||
+ serifWidth !== getWidth(`${font},serif`);
+ callback(available);
+ });
+ } else {
+ // Fallback to setTimeout for Safari
+ setTimeout(() => {
+ const available =
+ monoWidth !== getWidth(`${font},monospace`) ||
+ sansWidth !== getWidth(`${font},sans-serif`) ||
+ serifWidth !== getWidth(`${font},serif`);
+ callback(available);
+ }, 0);
+ }
+ };
+})(document);
+
+
+// ----- FONT STACKS ----- //
+const systemfont = document.querySelectorAll('.font-stack span');
+
+
+
+Array.from(systemfont).forEach((el) => {
+ const font = el.innerText;
+ isFontAvailable(font, (available) => {
+ if (available) {
+ el.classList.add('yep');
+ } else {
+ el.classList.add('nope');
+ }
+ });
+});
+
+</script>
diff --git a/lang/soyezcreateursprive_fr.php b/lang/soyezcreateursprive_fr.php
index 271f7051..a6cd80da 100644
--- a/lang/soyezcreateursprive_fr.php
+++ b/lang/soyezcreateursprive_fr.php
@@ -353,7 +353,7 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'cfg_texte_bloc_header' => 'En-tête',
'cfg_texte_central' => 'Texte central',
'cfg_texte_explicationslogin' => 'Texte d’explication (raccourcis typo autorisés)',
- 'cfg_texte_police_choisie' => 'Ce texte est affiché dans la police choisie',
+ 'cfg_texte_police_choisie' => 'Ce texte est affiché dans la police choisie pour la navigation',
'cfg_texte_quoi2neuf' => 'Quoi de neuf',
'cfg_textesiplanvide' => 'Texte si le plan est vide',
'cfg_textesiplanvide_label' => 'Texte dans le plan du site si le plan est vide de contenu',
@@ -426,9 +426,9 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'commencer' => 'Pour bien commencer',
'configurations_rapides_soyezcreateurs' => 'Configurations rapides de SoyezCréateurs',
'configurersc' => 'Configurer SoyezCréateurs',
-
+
'ieconfig_import_spe' => 'Importation de configuration pré-enregistrés <i>(<strong>Attention</strong>, action immédiate !)</i> :',
-
+
'layout_accueil_title' => 'Agencement spécifique à la page d’accueil',
'layout_defaut_title' => 'Agencement par défaut pour le site (articles et rubriques)',
@@ -436,5 +436,5 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'soyezcreateurs_couleurs' => 'Couleurs',
'soyezcreateurs_google' => 'Référencement',
'soyezcreateurs_layout' => 'Positionnement',
-
+
);
--
GitLab