Recuar texto do parágrafo?

Suporte
1

Sinto-me um idiota, mas não consigo descobrir por que isso não está funcionando:

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

O que resulta em:

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

Que notavelmente não está indentado!

Certamente deve haver alguma maneira de suportar a indentação de texto, mesmo que seja não óbvia por qualquer motivo, certo?

2

   Eu uso um par de &emsp; se precisar identar algo, mas isso só funciona para a primeira linha.

1 curtida
3

Isso só faz a primeira linha de um parágrafo, no entanto

1 curtida
4

Sinto que está na ponta da minha língua. :slightly_smiling_face:

Editar: Eu me confundi ao adicionar quatro espaços a um novo parágrafo em um item de lista para mantê-lo alinhado.

Descobri que você pode envolver um bloco de texto em <ul> </ul> e isso o recua. É um pouco improvisado, mas pode ser útil se você não tiver acesso às configurações de administrador para criar a solução de encapsulamento a partir de mais abaixo.

Ex:

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

Tenho quase certeza que quatro espaços são um bloco de código em Markdown

1 curtida
6

O Discourse apenas permite a entrada de certas tags e atributos HTML. Eu apostaria que eles bloqueiam completamente o atributo style, já que ele é basicamente todo-poderoso.

1 curtida
7

Existe alguma maneira de permitir mais tags/atributos nas configurações do nosso site?

8

Não vejo nada nas configurações do site, mas talvez você possa com um plugin. Encontrei dois arquivos mencionando tags HTML que podem ser úteis para analisar. Pessoalmente, acho que seria perigoso permitir o atributo style, no entanto.

1 curtida
9

Acredito que o div style não está na lista de permissões, você precisaria de um plugin ou componente. Mas você pode criar um bbcode de wrap diretamente no seu fórum de administrador. Adicione estas linhas em Customize > your theme or component > CSS Common

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

Em seguida, em sua postagem, use isto para o texto que você deseja:

[wrap="indent"]
Seu parágrafo
[/wrap]
9 curtidas
10

Eu não sabia que você podia fazer isso. Eu usava spans com um atributo data-theme no meu fórum:

image
image372×172 4.02 KB

(você pode ver isso ao vivo aqui: 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

A coisa do [wrap] é diferente de alguma forma? Podemos usá-la para estilos inline?
Existem outras maneiras de personalizar estilos de postagem?

1 curtida
11

Como usamos o elemento div, podemos personalizar bastante, mas para estilos inline, sua opção é a melhor, na minha opinião.

Não tenho certeza se existem muitas outras opções prontas. Quando uso algo com frequência, opto por um plugin ou componente para criar uma classe div ou bbcode e adicionar um ícone na barra de ferramentas.

12

Uma pergunta simples… Como se faz isso?

13

Você pode usar meu componente de tema como exemplo:

Você tem duas opções, adicionar um ícone à barra de ferramentas ou no menu de engrenagem

image
image485×241 3.13 KB

Barra de ferramentas:

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

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

Você pode ter algumas opções extras com um plugin, mas o componente deve ser suficiente: GitHub - MonDiscourse/discourse-formatting-toolbar: Add formatting options on your post (center, align to right, justify a text, etc.)

5 curtidas