Description
Retype ajoute une entrée à la barre d’outils de mise en forme de l’éditeur de blocs, dans le menu déroulant « Plus », à côté de Surligner et Code en ligne. Sélectionnez un mot dans un titre ou un paragraphe, choisissez Retype, tapez quelques mots séparés par des virgules et appliquez. La même fenêtre contextuelle permet de définir, pour ce mot uniquement, la vitesse de frappe, la pause sur chaque mot et la couleur du curseur.
Sur l’interface publique, le mot sélectionné s’affiche en premier. Après une pause, il s’efface lettre par lettre, le mot suivant de la liste se tape à sa place, et le cycle continue. Un curseur fin clignote au bout du mot pendant la frappe.
We help every <baker, potter, beekeeper> find their customers.
Aucune page de réglages, aucune option dans votre base de données, aucun compte et aucune requête sortante.
Comportement
- Le mot prend sa largeur réelle au fil de la frappe : le texte qui le suit se déplace donc avec l’écriture.
- Un mot entièrement en gras, en italique ou en lien garde cette mise en forme pendant qu’il est retapé. Un mot mis en forme en partie uniquement reste immobile.
- Les mots ajoutés à la page après son chargement, par un bouton « Charger plus » par exemple, sont aussi animés.
- L’animation se met en pause quand l’onglet du navigateur est masqué ou que le mot sort de l’écran au défilement, et reprend quand il revient.
- Rien ne se charge sur les pages qui n’utilisent pas le format. Là où il est utilisé, l’interface publique reçoit un script d’environ 5 Ko, chargé avec
deferdans le pied de page, et une feuille de style de moins de 1 Ko. - Les mots sont insérés comme du texte, jamais comme du HTML.
- Le balisage enregistré est un simple
<span>avec une classe et un attribut data. Si vous désactivez l’extension, le mot sélectionné reste simplement dans la phrase, et aucun bloc n’est invalidé.
Accessibilité
Aucune extension ne peut à elle seule rendre un site accessible, et celle-ci ne le prétend pas. Voici ce qu’elle fait, dans son périmètre :
- Les lecteurs d’écran reçoivent le mot d’origine, une seule fois. Les lettres en cours de frappe leur sont masquées : la personne qui utilise un lecteur d’écran entend une phrase normale plutôt qu’une suite de modifications.
- Les internautes qui demandent à leur système de réduire les animations voient le mot d’origine, sans animation ni curseur clignotant. Si ce réglage est activé en cours de lecture, l’animation s’arrête et le mot d’origine revient.
- Sans JavaScript, le mot d’origine s’affiche en texte simple.
L’animation tourne en boucle tant que le mot est à l’écran, et l’extension ne propose pas de bouton pause. Un contenu animé qui démarre tout seul s’utilise avec parcimonie : un mot animé par page, des mots courts, et pas au milieu d’un texte que les gens ont besoin de lire. C’est à vous de juger s’il convient à votre site et à ses obligations.
Rythme et couleur du curseur
Chaque mot peut avoir sa propre vitesse de frappe, sa pause et sa couleur de curseur, définies dans la fenêtre contextuelle. Les mots sans réglage suivent les valeurs par défaut du site, qu’un développeur ou une développeuse peut modifier avec le filtre retype_delays. Consultez la FAQ.
Code source et compilation
Les scripts et feuilles de style livrés dans build/ sont compilés depuis le répertoire src/ du dépôt public, avec @wordpress/scripts, l’outil de compilation maintenu par le projet WordPress :
https://github.com/Fyrins/retype
Pour reproduire les fichiers livrés :
git clone https://github.com/Fyrins/retype.git
cd retype
npm install
npm run build
Captures d’écrans


Installation
- Dans votre administration, allez dans Extensions, puis Ajouter une extension, et recherchez Retype.
- Installez-la et activez-la.
- Modifiez une publication, sélectionnez un mot dans un titre ou un paragraphe, ouvrez le menu déroulant « Plus » de la barre d’outils de mise en forme et choisissez Retype.
Il n’y a rien à configurer ensuite.
FAQ
-
Comment modifier la liste de mots ?
-
Cliquez dans le mot et choisissez à nouveau Retype. La fenêtre contextuelle s’ouvre avec la liste actuelle. Retirer le format rend au mot son statut de texte ordinaire. Une liste vide fait de même.
-
Quel mot s’affiche en premier ?
-
Celui que vous avez sélectionné dans l’éditeur. C’est aussi le mot que lisent les lecteurs d’écran et celui qu’on montre aux internautes qui préfèrent réduire les animations : choisissez celui qui rend la phrase complète à lui seul.
-
Puis-je modifier la vitesse ?
-
Pour un mot, dans la fenêtre contextuelle : « Délai de frappe par lettre » est en millisecondes ; plus la valeur est basse, plus la frappe est rapide, et l’effacement accélère ou ralentit en proportion. « Pause sur chaque mot » est en secondes. Réinitialiser ramène un réglage à la valeur par défaut du site.
Pour tout le site, utilisez le filtre
retype_delays, dans lefunctions.phpde votre thème ou dans une petite extension à vous. Les valeurs sont en millisecondes :add_filter( 'retype_delays', function ( $delays ) { $delays['type'] = 90; // per letter while typing, default 40 $delays['erase'] = 30; // per letter while erasing, default 20 $delays['hold'] = 2500; // pause on each word, default 1200 return $delays; } );Les clés absentes gardent leur valeur par défaut.
typeeterasesont maintenus entre 10 et 2000,holdentre 200 et 60000, et tout ce qui n’est pas un nombre revient à la valeur par défaut.Un script de votre cru peut aussi définir
window.retypeDelaysavant l’exécution du script de l’extension, avec les mêmes clés et les mêmes bornes. Les réglages d’un mot dans la fenêtre contextuelle priment sur les deux. -
Le curseur peut-il avoir sa propre couleur ?
-
Oui. La fenêtre contextuelle propose les couleurs de la palette de votre thème. Une couleur de la palette est enregistrée comme une référence à la couleur du thème : le curseur la suit donc si le thème la modifie. Effacez la couleur et le curseur prend la couleur du texte.
-
Où sont enregistrés les réglages d’un mot ?
-
Dans le contenu de la publication, sous forme d’attributs data du
<span>du mot :data-retype-typeetdata-retype-holden millisecondes,data-retype-caretpour la couleur. Rien d’autre que votre publication n’est enregistré dans la base de données. Les valeurs hors plage sont ramenées aux mêmes bornes que celles du filtre, et une couleur qui n’est ni hexadécimale, nirgb(), nihsl(), ni une couleur de la palette du thème est ignorée. -
Un mot retapé peut-il être en gras ou être un lien ?
-
Oui, si le mot l’est en entier : la mise en forme reste et seules les lettres sont modifiées. Si une partie du mot uniquement est mise en forme, le mot s’affiche tel quel, sans animation, car il ne pourrait pas être retapé lettre par lettre sans reconstruire votre balisage.
-
Est-ce que cela fonctionne dans l’éditeur de site et dans les modèles ?
-
Le format est disponible dans tous les champs de texte enrichi de l’éditeur de blocs : l’éditeur de site le propose donc aussi, dans les titres et paragraphes des modèles et des compositions. Sur l’interface publique, tout bloc affiché qui le contient charge le script.
-
Le mot est coupé sur les petits écrans.
-
Le mot animé ne passe pas à la ligne : un mot plus large que l’écran est donc coupé. Gardez des mots courts, surtout dans les grands titres.
-
L’extension communique-t-elle avec un serveur externe ?
-
Non. Aucune télémétrie, aucune ressource externe, aucune requête sortante, et rien n’est écrit dans votre base de données.
Avis
Il n’y a aucun avis pour cette extension.
Contributeurs/contributrices & développeurs/développeuses
« Fyrins Retype » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.
Contributeurs“Fyrins Retype” a été traduit dans 1 locale. Remerciez l’équipe de traduction pour ses contributions.
Traduisez « Fyrins Retype » dans votre langue.
Le développement vous intéresse ?
Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.
Journal des modifications
1.0.0
- Première version.
- Format Retype pour l’éditeur de blocs, avec une fenêtre contextuelle pour saisir la liste de mots et, pour chaque mot, sa vitesse de frappe, sa pause et la couleur de son curseur.
- Animation sur l’interface publique, qui se met en pause quand l’onglet est masqué ou que le mot est hors de l’écran, et reste immobile quand la réduction des animations est activée.
- Script et feuille de style chargés uniquement sur les pages qui utilisent le format.
- Filtre
retype_delayspour les délais par défaut de frappe, d’effacement et de pause. - Les mots ajoutés à la page après le chargement sont animés, et un mot retiré de la page s’arrête.
