Urbanbike

Recherche | mode avancée

Drafts | Élaborer une feuille de style

Utile ou non…? La réponse reste éminemment personnelle…!

dans écrire | outils | usages
par Jean-Christophe Courte

TL;DR
alias : billet long, certainement incomplet et partiellement chiant, à éviter…!

Pas évident d’évoquer ce type d’élément d’autant que l’application Drafts — sous macOS comme sous iOS — propose nombre de feuilles de style par défaut immédiatement utilisables.

Depuis la version 26, la possibilité de construire ses propres feuilles de Style est disponible… en passant par la souscription1 à Drafts Pro… Aucune obligation, CQFD. Et comme dit juste avant, la collection de base est exploitable.

Alors, pourquoi perdre du temps ?!

À quoi cela sert-il…?

Pour se repérer aisément dans un texte, la coloration syntaxique peut s’avérer très confortable dès lors que le texte est codé, emploie des balises.

coloration syntaxique Monochrome Light

  • Deux représentations d’un même texte : coloration syntaxique Monochrome Light au-dessus…
  • …puis coloration syntaxique Solarized ci-dessous…

coloration syntaxique Solarized

Si vous employez des balises MultiMarkdown ou Markdown, cela vous permettra de repérer plus confortablement la structure de votre texte.

En gros, la couleur du texte change en fonction des balises utilisées. On peut se contenter d’une coloration syntaxique légère, discrète…
Ou, inversement, avoir un dispositif qui permet de repérer les divers niveaux du plan, distinguer la citation du reste du corps du texte, etc.

Pour s’en convaincre, il suffit de faire défiler les diverses feuilles de style par défaut.

Liste des styles disponibles par défaut

À l’usage (…c’est fou comme on s’habitue vite et focalisons sur les détails), on va regretter de ne pas trouver telle balise suffisamment accentuée, que les liens ne soient pas bien mis en valeur.
Ou inversement.

C’est ici que l’option Styles proposée depuis la version 26 devient intéressante…! Attention, c’est hyper addictif et chacun peut se bâtir une solution qui lui conviendra… en propre.

Un cadre de travail personnel

En effet, à chacun de choisir sa stratégie en fonction de ses besoins, envies mais aussi en fonction de son âge (…eh oui, d’aucuns mettront quelques décennies à comprendre mes propos…!), de sa vue (je pense notamment aux copains Daltoniens)…
Voire… des conditions d’utilisation. Ainsi, dans mon cas, c’est essentiellement sur l’iPhone que je saisie mes premiers jets.
Sans oublier de l’endroit où sera utilisé l’écran : jour ou nuit ? Dans un coin ensoleillé ou pas, en fonction de la luminosité souhaitée de l’écran…

Tout ceci va conduire à des solutions chromatiques qui feront hurler les tenants du bon goût et de l’harmonie !

Alors, unique conseil : pensez à vous et non à suivre les remarques de votre entourage… c’est vous qui aller employer cette feuille de style sur vos écrans, personne ne sera contraint de le faire hormis vous…!

reduc-450

  • N’hésitez pas à pondre des déclinaisons que vous virerez à terme…

reduc-450

  • Pour ne conserver que celles que vous retenez après avoir fait saigné vous yeux…!

La feuille de style semblera immonde, Ugly ? Et alors ?!

Cette histoire d’harmonie me fait penser à aux dogmes culinaires, aux aliments qui ne doivent pas se mélanger. Étant partisan du combo “pain grillé + beurre salé avec Camembert bien fait et carreau de chocolat noir - noisettes”, ce petit rappel explique mon… mauvais goût !

Or l’important est que cette feuille de Style corresponde2 à ce que vous attendez, on est pas ici dans un concours de beauté mais bien dans l’élaboration d’un dispositif visuel pratique !

  • Prenez le temps de visualiser toutes les options disponibles (…seule la version PRO de Drafts offre des thèmes supplémentaires et la possibilité de construire votre feuille de style…)
  • Choisissez la feuille de style par défaut qui vous convient…
  • C’est uniquement après vous êtes coltiné des heures avec (…et changé quelques fois de modèle pour tester d’autres propositions…) que vous aurez — peut-être — envie de retrousser vos manches pour modifier a minima celle que vous aurez retenue…

Cela nécessite de ne plus utiliser Drafts gratuitement… Avec l’abonnement (mensuel ou annuel), souvenez-vous que vous allez accéder à un catalogue de solutions gigantesque et couvrant nettement plus de domaines que la problématique de la feuille de style3

Drafts vous offre un accès à une épatante documentation sur la structure des feuilles de style (en anglais) mais pas que !

Enfin, de nombreuses de feuilles prêtes à l’emploi sont disponibles dans l’application, contributions du développeur mais aussi de membres de la communauté et suffiront, qui sait, à votre bonheur !

Aussi je ne vais pas détailler comment récupérer un fichier du type mon style.draftsTheme depuis iCloud dans le sous dossier Drafts/Library/Themes, etc.

Texte et JSON

Contrairement à Ulysses pour ses propres feuilles de style, ici le langage employé par Drafts est du JSON.

Pas question de s’inventer de nouvelles entrées (idée farfelue que j’ai rapidement écartée !) et surtout, plus agaçant, impossible de commenter le code.

reduc-450

  • Pas inutile de conserver une copie d’écran de vos réglages principaux en l’absence de commentaires…

reduc-450

L’absence de cette dernière option m’a permis de me rendre compte que mon peu de mémoire immédiate (…quelle idée aussi de faire plein de trucs4 en parallèle !) pouvait me conduire à commettre de jolies erreurs !

reduc-450

  • D’autant qu’une astuce est parfois d’aller modifier bien avant la liste des couleurs de l’interface ou de l’éditeur…

Choix des couleurs, vaste débat…!

Drafts offre une version claire et une version sombre qui peuvent être activées manuellement ou associées à la fonction jour nuit Night Shift de votre écran activée via les options d’affichage.

J’ai démarré par quelques versions claires avant de m’attaquer à un version sombre, influencé par le thème Solarized Dark que j’emploie régulièrement. J’ai changé le style dark depuis un lien dans la page de documentation et hop…

Vivant sur une île et dans un environnement maritime, ce sont d’autres couleurs que j’avais envie de mettre en œuvre quitte à pondre un truc bizarre pour la version Dark.

reduc-450

reduc-450

Idem pour une version Light plus… chaude (sic !)…

reduc-450

reduc-450

Pour le choix des couleurs, je disposais de l’application PANTONE Studio qui fonctionne correctement même s’il est dédié à d’autres usages !

reduc-450

  • Certes, c’est un nuancier Pantone mais il donne les valeurs HEX de chaque référence (parfois illisibles en blanc sur une teinte très lumineuse quand affichée plein pot).

reduc-450

  • Il est possible de se construire une palette de 5 nuances, trouver les valeurs complémentaires, analogues, etc.

reduc-450

J’insiste à nouveau : l’idée n’est pas de gagner un concours de beauté, mais bien de rester cohérent vis-à-vis du but recherché, c’est à dire : aider à la lisibilité lors de la rédaction d’un texte.

J’ai certainement oublié des tas d’aspects de la feuille de style (certains n’ont même pas été traités dans les miennes)…!

Bref, le résultat est affaire de son propre goût !

La typo n’est pas innocente

Enfin, je ne vais pas rentrer dans les détails mais, contrairement à la grande majorité des utilisateurs, je n’emploie pas deux polices de caractères sur Drafts ou Ulysses !

J’ai opté pour l’usage exclusif de JetBrains Mono5.

Bref, une typo Code en permanence !

iCloud et patience

Dernière remarque : élaborer vos feuilles de styles demande de la patience. Au moment où vous enregistrez votre prototype sur iCloud dans le dossier ad hoc et le moment où vous pouvez le charger dans votre écran, il s’écoule… un certain temps !

Et vous pouvez avoir l’impression que votre dernière modification n’a pas été effectuée au bon endroit (!) alors que vous n’aviez toujours pas chargé la bonne version !!

Ce genre de gag m’est arrivé un grand nombre de fois…!

Bref, patience, vérifiez bien que la synchronisation vers le nuage s’est correctement déroulée ; accessoirement, chargez une feuille de style standard au hasard avant de réactiver la votre !

reduc-450

  • Une option est de modifier la description (attention à ne pas être trop long…!) pour se repérer…

reduc-450

  • Et donc réimporter votre feuille via Import

reduc-450

  • Bien valider Replace Existing… Et…

reduc-450

  • …s’assurer que la mention Theme updated apparaisse furtivement en haut…!

reduc-450

  • Enfin, assurez-vous d’avoir correctement sélectionné le bon thème pour le jour…

reduc-450

  • …et la nuit. Ou activé System pour un changement automatique calqué sur Night Shift (dans les réglages de votre iPhone, Luminosité et affichage) et hop…

Pour des informations complémentaires, se référer à la documentation de Drafts…! Et bravo à ceux qui sont arrivés à cette avant dernière ligne…!

À suivre…


  1. Pour mémoire, une souscription PRO est partageable avec les membres de votre famille, c’est le cas pour Ulysses ou Drafts, par exemple. Cet aspect m’a conduit à renouveler quelques abonnements car cela me permet de les amortir en quelque sorte. 

  2. Je vois plein de jolies déclinaisons faites à la chaîne, genre version bleue, jaune, grise. Mais — je parle pour moi — ça ne répond pas à ce que je recherche. 

  3. Mais l’aspect feuille de styles est bien loin d’être anecdotique… quoi qu’en pensent certains dogmatiques (!!), relire ce qui a été écrit plus haut… 

  4. Parfois je pense que je suis dans le déni…! 

  5. C’est une Typo gratuite pour mémoire… 

le 26/03/2021 à 15:15 | .(JavaScript must be enabled to view this email address) à Jean-Christophe Courte |