¿Cómo puedo obtener párrafos justificados a la izquierda en reveal.js?
(4)
Solución
Puede cambiar la forma en que aparecen las diapositivas agregando algunos CSS personalizados a su presentación. Por ejemplo, agregar
<style type="text/css">
p { text-align: left; }
</style>
a la izquierda alinear todos los párrafos.
Más ejemplos
Solo preguntaste sobre párrafos alineados a la izquierda, pero aquí hay algunos ejemplos más complicados, en caso de que alguien los encuentre útiles:
Restaure la parte del título de las diapositivas sin título:
<style type="text/css"> .reveal .slide h1 { font-size: 200%; text-decoration: underline; } </style>Restaure la parte del título de la diapositiva del título:
<style type="text/css"> .reveal .slides .title { /* Ugly ... */ text-shadow: 0px 0px 25px rgb(100,256,0); font-size: 300%; } </style>
Los archivos CSS predeterminados deveve.js son complicados, por ejemplo, reveal.css , pero he tenido buena suerte con solo mirar el HTML generado para averiguar a qué se debe dirigir mi CSS.
Pandoc
Todo esto todavía funciona si está generando las diapositivas reveal.js de markdown utilizando Pandoc , que recomiendo altamente. En ese caso, coloque el bloque <style> en un archivo y dígale a Pandoc que lo inserte con pandoc --include-in-header=<file with <style> block> ...
Los párrafos HTML estándar se muestran centrados por reveal.js. Me gustaría cambiar esto a justificado a la izquierda, como en una página web normal. He visto las presentaciones de reveal.js que hacen esto, pero ¿cómo funciona esto?
Estoy usando markdown externo y según la respuesta aceptada que agregué
<style type="text/css">
p { text-align: left; }
</style>
en la parte inferior del <head> (después de todos los demás <link> s CSS).
Esto funciona muy bien, pero ahora todo mi texto <p> está alineado a la izquierda. Así que volví a apropiarme de la etiqueta <h6> (que no se usa mucho) para cualquier texto "no en negrita" que aún quiero alinear en el centro.
<style type="text/css">
p { text-align: left; }
.reveal h6 {
text-transform: none;
font-weight: 400;
}
</style>
Solo lo uso en markdown con un prefijo de 6 hash:
######Some non-capitalized, normal weight, centered text
Finalmente, todas mis imágenes estaban en etiquetas <p> y, por lo tanto, también estaban alineadas a la izquierda, pero quería que permanecieran centradas y solo tuvieran el texto del bloque alineado a la izquierda. Hacké esto prefijando el markdown de la imagen con cualquier etiqueta <h> en la misma línea, por ejemplo, usando un prefijo de hash único <h1> :
#![alt text][path/to/my/image.png]
Si comienza a cambiar las opciones de CSS, también puede hacerlo directamente en el archivo CSS del tema, donde la mayoría de estas cosas se definen de todos modos.
Por ejemplo, encontrará esto en el archivo "sky.css" en la carpeta de temas.
.reveal p {
margin: 20px 0;
line-height: 1.3; }
Solo agrega el fragmento de código CSS "text-align: left;" a esto, y sus párrafos se alinearán como se desee:
.reveal p {
margin: 20px 0;
line-height: 1.3;
text-align: left; }
Probablemente tenga sentido cambiar el nombre de CSS a algo como "mysky.css" y vincularlo al nuevo tema en el encabezado de sus diapositivas. De esa manera, si tiene problemas, siempre puede volver al tema original. En mi experiencia, esto funciona muy bien.
Usa este código en la sección:
<section style="text-align: left;">