Indenter le texte du paragraphe ?

Soutien
1

J’ai l’impression d’être un idiot, mais je n’arrive pas à comprendre pourquoi ça ne fonctionne pas :

<div style="margin-left: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Ce qui donne :

<div style="margin-left: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Ce qui n’est notablement pas indenté !

Il doit bien y avoir une façon de prendre en charge l’indentation du texte, même si elle est peu évidente pour quelque raison que ce soit, n’est-ce pas ?

2

   J’utilise quelques &emsp; si j’ai besoin d’indenter quoi que ce soit, mais cela ne fonctionne que pour la première ligne.

1 « J'aime »
3

Cela ne fait que la première ligne d’un paragraphe cependant

1 « J'aime »
4

J’ai l’impression que c’est sur le bout de ma langue. :slightly_smiling_face:

Modifier : J’avais confondu avec l’ajout de quatre espaces à un nouvel élément de liste pour le maintenir aligné.

J’ai découvert que vous pouvez entourer un bloc de texte de <ul> </ul> et que cela le décale. C’est un peu une solution de contournement, mais cela peut être utile si vous n’avez pas accès aux paramètres d’administration pour créer la solution d’enveloppement plus bas.

Par exemple.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1 « J'aime »
5

Je suis presque sûr que quatre espaces constituent un bloc de code en Markdown

1 « J'aime »
6

Discourse ne met sur liste blanche que certaines balises et certains attributs HTML. Je suppose qu’ils bloquent complètement l’attribut style car il est pratiquement tout-puissant.

1 « J'aime »
7

Existe-t-il un moyen d’autoriser plus de balises/attributs dans les paramètres de notre site ?

8

Je ne vois rien dans les paramètres du site, mais peut-être que vous pourriez le faire avec un plugin. J’ai trouvé deux fichiers mentionnant des balises HTML qui pourraient être utiles à examiner. Personnellement, je pense qu’il serait dangereux de mettre sur liste blanche l’attribut style.

1 « J'aime »
9

Je pense que le style div n’est pas autorisé, vous auriez besoin d’un plugin ou d’un composant. Mais vous pouvez créer un bbcode wrap directement dans votre forum d’administration. Ajoutez ces lignes dans Personnaliser > votre thème ou composant > CSS commun

[data-wrap="indent"] {
    margin-left: 20px;
}

Ensuite, dans votre message, utilisez ceci pour le texte que vous souhaitez :

[wrap="indent"]
Votre paragraphe
[/wrap]
9 « J'aime »
10

Je ne savais pas que vous pouviez faire ça. J’ai utilisé des spans avec un attribut data-theme sur mon forum :

image
image372×172 4.02 KB

(vous pouvez le voir en direct ici : 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

La chose [wrap] est-elle différente d’une quelconque manière ? Pouvons-nous l’utiliser pour des styles en ligne ?
Existe-t-il d’autres moyens de personnaliser les styles des publications ?

1 « J'aime »
11

Étant donné que nous utilisons l’élément div, nous pouvons personnaliser un peu plus, mais pour les styles en ligne, votre option est la meilleure à mon avis.

Je ne suis pas sûr qu’il y ait beaucoup plus d’options prêtes à l’emploi. Lorsque j’utilise quelque chose souvent, je passe par un plugin ou un composant pour créer une classe div ou un bbcode et ajouter une icône dans la barre d’outils.

12

Une simple question… Comment fait-on ?

13

Vous pouvez utiliser mon composant de thème comme exemple :

Vous avez deux options : ajouter une icône à la barre d’outils ou au menu d’engrenage.

image
image485×241 3.13 KB

Barre d’outils :

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "align_justify_button",
        group: "extras",
        icon: "align-justify",
        perform: e => e.applySurround('[wrap="justify"]\n', '\n[/wrap]', 'align_justify_text')
    });
});

Menu d’engrenage

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
      action: "floatleft",
      icon: "indent",
      label: "float_left_button"
  };
});

Vous pouvez avoir des options supplémentaires avec un plugin, mais le composant devrait suffire : GitHub - MonDiscourse/discourse-formatting-toolbar: Add formatting options on your post (center, align to right, justify a text, etc.)

5 « J'aime »