¿Sangrar texto del párrafo?

Soporte
1

Me siento como un idiota, pero no puedo entender por qué esto no funciona:

<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>

Lo que da lo siguiente:

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.

¡Que notablemente no está indentado!

Seguramente debe haber alguna manera de soportar la indentación de texto, incluso si no es obvia por alguna razón, ¿verdad?

2

   Uso un par de &emsp; si necesito identar algo, pero eso solo funciona para la primera línea.

1 me gusta
3

Eso solo hace la primera línea de un párrafo.

1 me gusta
4

Siento que lo tengo en la punta de la lengua. :slightly_smiling_face:

Editar: Me confundí al añadir cuatro espacios a un nuevo párrafo en un elemento de lista para mantener la alineación.

Descubrí que puedes envolver un bloque de texto en <ul> </ul> y eso lo indenta. Es un poco chapucero, pero puede ser útil si no tienes acceso a la configuración del administrador para crear la solución de envoltura de más abajo.

Por ejemplo.

    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 me gusta
5

Estoy bastante seguro de que cuatro espacios son un bloque de código en Markdown.

1 me gusta
6

Discourse solo permite en lista blanca ciertas etiquetas y atributos HTML. Supongo que bloquean completamente el atributo style ya que es básicamente todopoderoso.

1 me gusta
7

¿Hay alguna forma de permitir más etiquetas/atributos en la configuración de nuestro sitio?

8

No veo nada en la configuración del sitio, pero tal vez podrías hacerlo con un plugin. Encontré dos archivos que mencionan etiquetas HTML que podrían ser útiles para revisar. Personalmente, creo que sería peligroso permitir el atributo style.

1 me gusta
9

Creo que el estilo div no está en la lista blanca, necesitarías un plugin o componente. Pero puedes crear un bbcode de envoltura directamente en tu foro de administrador. Agrega estas líneas en Personalizar > tu tema o componente > CSS común

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

Luego, en tu publicación, usa esto para el texto que desees:

[wrap="indent"]
Tu párrafo
[/wrap]
9 Me gusta
10

No sabía que podías hacer eso. Usé spans con un atributo data-theme en mi foro:

image
image372×172 4.02 KB

(puedes verlo en vivo aquí: 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

¿Es la cosa [wrap] diferente de alguna manera? ¿Podemos usarla para estilos en línea?
¿Hay otras formas de personalizar los estilos de las publicaciones?

1 me gusta
11

Dado que usamos el elemento div, podemos personalizar bastante, pero para estilos en línea, tu opción es la mejor en mi opinión.

No estoy seguro de si hay muchas más opciones de entrada. Cuando uso algo con frecuencia, opto por un plugin o componente para crear una clase div o bbcode y añadir un icono en la barra de herramientas.

12

Una pregunta sencilla… ¿Cómo se hace eso?

13

Puedes usar mi componente de tema como ejemplo:

Tienes dos opciones, añadir un icono a la barra de herramientas o al menú de engranaje

image
image485×241 3.13 KB

Barra de herramientas:

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')
    });
});

Menú de engranaje

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

Puedes tener opciones adicionales con un plugin, pero el componente debería ser suficiente: GitHub - MonDiscourse/discourse-formatting-toolbar: Add formatting options on your post (center, align to right, justify a text, etc.)

5 Me gusta