Como posso obter esquerda parágrafos justificados no reveal.js?

StackOverflow https://stackoverflow.com//questions/21019476

  •  21-12-2019
  •  | 
  •  

Pergunta

HTML padrão parágrafos são exibidos centralizado, reveal.js.Eu gostaria de mudar este justificado à esquerda, como em uma página web normal.Eu tenho visto reveal.js apresentações que fazem isso, mas como isso funciona?

Foi útil?

Solução

Solução

Você pode alterar o modo como os diapositivos são apresentados adicionando um pouco de CSS personalizado para a sua apresentação.E. g., adicionar

<style type="text/css">
p { text-align: left; }
</style>

para alinhar à esquerda todos os parágrafos.

Mais Exemplos

Você só perguntou sobre alinhado à esquerda parágrafos, mas aqui estão mais algumas complicado exemplos, no caso de alguém encontrar úteis:

  • Revolucionar o título da parte de não-slides título:

    <style type="text/css">
.reveal .slide h1 { font-size: 200%; text-decoration: underline; }
</style>

  • Revolucionar o título parte do título do slide:

    <style type="text/css">
.reveal .slides .title {
  /* Ugly ... */
  text-shadow: 0px 0px 25px rgb(100,256,0); 
  font-size: 300%;
}
</style>

O reveal.js padrão de arquivos CSS são complicados, por exemplo, revelar.css, mas eu tive a boa sorte com apenas olhando o HTML gerado para descobrir o que o meu CSS deve-alvo.

Pandoc

Tudo isso ainda funciona, se você estiver gerando reveal.js slides da markdown usando Pandoc, que eu recomendo.Nesse caso, coloque o <style> bloco em um arquivo e dizer Pandoc para inserir-la com pandoc --include-in-header=<file with <style> block> ....

Outras dicas

Se você começar a mudar as opções de CSS, assim como você pode fazer isso diretamente no tema do arquivo CSS, onde a maioria dessas coisas são definidas de qualquer maneira.

Por exemplo, você vai encontrar isso no "o céu.css" arquivo na pasta de temas. 

.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

Basta adicionar o CSS trecho "text-align:esquerda;" para isso, e seus parágrafos serão alinhadas conforme desejado:

.reveal p {
  margin: 20px 0;
  line-height: 1.3;
  text-align: left; }

Ele provavelmente faz sentido mudar o nome que o CSS para algo como "mysky.css" e o link para o novo tema em seus slides' cabeçalho.Dessa forma, se você executar em problemas, você sempre pode voltar para o tema original.Na minha experiência, isso funciona muito bem.

Use this code in section:

<section style="text-align: left;">

I'm using external markdown and as per the accepted answer I added

<style type="text/css">
    p { text-align: left; }
</style>

at the bottom of the <head> (after all other CSS <link>s).

This works great but now all my <p> text is left-aligned. So I re-appropriated the <h6> tag (which doesn't get used much) for any 'non-bold' text that I still want to be center-aligned.

<style type="text/css">
    p { text-align: left; }
    .reveal h6 {
        text-transform: none;
        font-weight: 400;
    }
</style>

I just use it in markdown with a 6-hash prefix:

######Some non-capitalized, normal weight, centered text

Finally my images were all in <p> tags and so they were also left-aligned, but I wanted them to remain centered and only have block text left-aligned. I hacked this by prefixing the image markdown with any <h> tag on the same line, e.g. using an <h1> single hash prefix:

#![alt text][path/to/my/image.png]
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top