Dar formato a mi documento

div
fences
pestañas
cajas
estilo texto
referencias cruzadas
extensiones
Autor/a

Miguel Equihua

Fecha de publicación

Xalapa, Ver., 4 de abril, 2025

Voy a empezar por mi propia reacción “no me gustó la configuración default que usa Quarto”, en cuanto a justificar a la izquierda las leyendas de las figuras. Para cambiar eso use el código del Listado 1, dentro de un trozo de código css:

Listado 1: Código css para centrar la leyenda. 
  figcaption {    
    text-align: center;   
    }

 

Figura 1: Descripción

Esto tiene un poco que ver con el asunto de darle en general un tema/aspecto al proyecto. Aquí puedes encontrar más información al respecto. Para cambiar el tema modifica el archivo _quarto.yml en la línea de theme (Figura 2). Por cierto, nota que en esta figura aparece la opción lightbox. Esa opción es la que activa la función que permite interactuar con las ilustraciones como entidades separadas, para que el usuario pueda explorarlas con más detalle.

Figura 2

Otra cosa que puede interesarte hacer es controlar el arreglo general de la página de tu blog (Figura 3). Algo que puedes hacer en el documento general _quarto.yml. Aquí están los detalles. Por cierto, el componente about del blog tiene sus propios estilos, pues se asume que debe acomodar datos personales, biográficos, etc. Puedes encontrar más información al respecto en esta parte de la documentación de Quarto.

 

Figura 3: Partes de la página que normalmente construye Quarto.

Quizás no encuentres exactamente el tema que te gusta, hay ajustes que puedes hacer usando instrucciones css. Sin embargo, una cuestión común y sencilla de ajustar es el color de las barras de navegación, las que aparecen arriba de tu blog. Si deseas cambiar estos colores puedes usar las opciones de navbar que controlan el color de fondo: background y el color de la escritura foreground en el archivo _quarto.yml_ que está en la raíz de tu proyecto. Los usas así:

---
⋮
navbar: 
  background: pink
  foreground: green
⋮
---

Ya sabes, Hay muchas páginas de ayuda para conseguir el dato del color, pero estas dos son comunes.

Imágenes en el margen

Para hacer esto hay que escribir así:

:::{.column-margin}   
 ![](img/door-575958_1280.png){width=200} 
:::

para obtener este resultado.

 

Crear Columnas

A veces nos gustaría tener una figura al lado del texto o como en un periódico o revista, tener el texto en columnas angostas. Esto es bastante fácil de lograr en Quarto. Hay varias maneras de hacerlo. la más sencilla:

:::{layout="[1,1]"}
Párrafo 1 con algunas ideas muy sabias... 

Párrafo 2 para explicar lo sabio del párrafo 1...
:::

Los número dentro de paréntesis cuadrados indican proporción, no una magnitud absoluta. En este caso, dos columnas del mismo tamaño. Puedes usar valores negativos para abrir espacios entre columnas. El resultado se ve así:

Párrafo 1 con algunas ideas muy sabias. 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.

Párrafo 2 para explicar lo sabio del párrafo 1. 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.

Otra manera es la siguiente. Nota que agrego una columna vacía para dejar un espacio entre columnas. Aunque realmente no necesitas poner nada ahí, en este caso lo marqué con la notación de comentario:<!-- algo -->. Esta forma de comentar la puedes usar en cualquier lado para anotar tu texto y no producir nada que se muestre en el render.

:::{.columns}
::::{.column width="40%"}
Párrafo 1 con algunas ideas muy sabias... 
::::

::: {.column width="5%"}
<!-- Columna vacía. Separa los textos -->
:::
   
::::{.column width="55%"}
Párrafo 2 para explicar lo sabio del párrafo...
::::
:::

Párrafo 1 con algunas ideas muy sabias. 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.

Párrafo 2 para explicar lo sabio del párrafo 1. 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.

¡Otra forma más!. El concepto que se usa aquí parte de dividir el cuerpo del documento en una retícula de 12 unidades. Cada una de ellas puede recibir un formato distinto. Los números, n, en .g-col-n hacen referencia al número de unidades por abarcar. Puedes hacer las combinaciones que gustes. En el ejemplo que te muestro puse 6 unidades, así que estoy dividiendo la página en dos columnas.

:::{.grid}
::::{.g-col-6}
Párrafo 1 con algunas ideas muy sabias... 
::::
   
::::{.g-col-6}
Párrafo 2 para explicar lo sabio del párrafo...
::::
:::

El resultado se ve así:

Párrafo 1 con algunas ideas muy sabias. 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.

Párrafo 2 para explicar lo sabio del párrafo 1. 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.

Intenta usar esto para producir un texto al lado de una imagen. ¿Con cuál variante te sientes más cómoda o cómodo?

 

Texto destacado con balitas

Lo usual es que las listas lleven al inicio alguna marca que las distinga, un disco, círculo, cuadro, etc. Pero que tal si en lugar de eso quisieras poner una imagen. Lo puedes lograr definiendo el formato en el archivo style.css que usualmente tenemos en la raíz del proyecto. Agrega, por ejemplo, estas líneas.

/* cada "ul"" implica un nuevo subnivel */

.planta ul {
  list-style-image: url("https://github.com/equihuam/2025-Ciencia-Reproducible/blob/main/images/Plant%20icons%20created%20by%20Icongeek26%20-%20Flaticon-rubber-plant-16.png?raw=true")
}

.planta ul ul {
  list-style-image: url("https://github.com/equihuam/2025-Ciencia-Reproducible/blob/main/images/gloves_gardening_utensils_icon_146742-16px.png?raw=true")
}

Las imágenes indicadas en la URL podrían estar en mi equipo, pero yo aquí puse la liga a lo que subí a Github, de manera que si copias lo de arriba directamente te funcionará. En todo caso podrías bajar el archivo de la imagen que te guste y poner la ruta en tu máquina para que quede algo así: url(images/rubber-plant-16.png). El caso es que puedes usar cualquier imagen que quieras, lo único que hice es escalarla para que tuviera un tamaña de 16x16 pixeles, en este caso.

Luego, para usar ese formato que has definido pondrás, en donde lo desees algo como esto.


:::{.planta}
- uno
  - A
  - B
- dos
- tres
:::

Se verá así cuando lo renderices

  • uno
    • A
    • B
  • dos
  • tres

Hay muchos sitios de íconos en la web. No olvides acreditar según te lo indiquen. Créditos de los íconos que acabo de usar:

Identificadores definidos para referencias cruzadas

Quarto tiene prevista toda una colección de identificadores para reconocer los distintos tipos de componentes que pueden requerir alguna forma de llamada en el texto. Claramente es el caso de figuras y tablas. Pero Quarto tiene además toda una gama de componentes que son susceptibles de referencia cruzada. Los anoto en el Tabla 1. Algunos de ellos corresponden con bloques de llamada (callouts), que desde luego también puede ser interesante referir en otras partes del texto y que podrían tener contenido distinto al sugerido por el bloque. Por ejemplo, dentro de un bloque tip, podría ponerse una definición a la que se hace referencia en otra parte del texto. Además, podrías definir tu propio prefijo para llevar control de alguna clase de componente de tu interés. Puedes encontrar más al respecto en la documentación de Quarto.

 

Tabla 1: Lista de prefijos previstos en Quarto.
Prefijo Componente
{tu clave} {tus términos}
cau precaución
cnj conjetura
cor corolario
def definición
eq ecuación
exm ejemplo
exr ejercicio
fig figura
imp importante
lem lema
lst código de cómputo
nte notas
prp proposición
rem observación
sec sección
sol solución
tbl cuadro
thm teorema
tip sugerencia
wrn advertencia

 

Usa esos prefijos según se requiera y aplica el concepto de marcar la definición de la referencia con # y su llamada con @. Ve el ejemplo siguiente. Quiero incluir la definición de algo de interés (Definición 1 - aquí use @def-definir para hacer la llamada). Esta llamada hace referencia a esto, que puedo poner en cualquier lugar del documento.

 

::: {#def-definir} \ 
Definición de algo importante \ 
::: \

 

Este texto se verá así en donde quiera que lo pongas.

Definición 1 Definición de algo importante

   

Puede ser que interese hacer referencia a un poco de código computacional que es importante en la explicación de tus hallazgos científicos o tecnológicos. Por ejemplo, el Listado 2 es el que use para producir la Figura 4. Se trata de una ilustración de la taxonomía de características de sabor que pueden apreciarse en una taza de café. La gráfica de la izquierda son datos un poco resumidos y los de la derecha una lista llamada completa. La presentación permite comparar ambos conjuntos de datos.

 

Listado 2: Código para producir una gráfica bonita.
muestra el escript: 
library(plotly, warn.conflicts = FALSE, quietly = TRUE, mask.ok = TRUE)

d1 <- read.csv('https://raw.githubusercontent.com/plotly/datasets/master/coffee-flavors.csv')
d2 <- read.csv('https://raw.githubusercontent.com/plotly/datasets/718417069ead87650b90472464c7565dc8c2cb1c/sunburst-coffee-flavors-complete.csv')
fig <- plot_ly() 
fig <- fig %>%
  add_trace(
    ids = d1$ids,
    labels = d1$labels,
    parents = d1$parents,
    type = 'sunburst',
    maxdepth = 2,
    domain = list(column = 0)
    ) 
fig <- fig %>%
  add_trace(
    ids = d2$ids,
    labels = d2$labels,
    parents = d2$parents,
    type = 'sunburst',
    maxdepth = 3,
    domain = list(column = 1)
  ) 

fig <- fig %>%
  layout(autosize=F, width = 700, height = 450, 
         grid = list(columns =2, rows = 1),
         margin = list(l = 0, r = 0, b = 0, t = 0),
         sunburstcolorway = c("#636efa","#EF553B","#00cc96",
                              "#ab63fa","#19d3f3","#e763fa",
                              "#FECB52","#FFA15A","#FF6692",
                              "#B6E880"),
      extendsunburstcolors = TRUE)

 

Figura 4: Gráfica dinámica bonita con biblioteca Plotly

 

Bloques tipo “caja”

A veces conviene ofrecer información adicional al lector, dándole la oportunidad de decidir cuándo o si es que la desea ver. Hay una colección de cajas de este tipo en Quarto que se engloban en el conjunto callout. Su uso es mediante fences (div), el sistema de marcado que se inicia con ::: {_indicación_} y se cierra con :::.

tipo llamada
note ::: {.callout-note}
warning ::: {.callout-warning}
important ::: {.callout-important}
tip ::: {.callout-tip}
caution ::: {.callout-caution}

En cada uno de estos casos puedes agregar la frase: collapse="true". Al hacerlo, el bloque aparecerá cerrado y el lector deberá activarlo para leer su contenido. Puedes también agregar un título con la frase title="Tip with Title" o si anotas un texto con marcado de subtítulo en seguida de la llamada.

::: {.callout-tip} \ 
## Título de un bloque de "sugerencias" \ 
Algo que sea importante decir, ¡pero no indispensable! \ 
:::

La marcas de estos bloques pueden anidarse, en cuyo caso habrá que cuidar que el número de veces que aparece : sea el mismo al abrir y cerrar el bloque respectivo. Algo así:

::: {inicia 1} \ 
:::: {inicia B} \ 
algo de contenido \  
:::: \ 
::: \

 

Formato del texto

Se puede usar la opción style que admite varios componentes:

::: {style="font-size: 50%; color:green; font-family: helvetica; font-size:44px;"}

Esto también se puede hacer a nivel incluso de una letra con la idea siguiente:

[rojo\]{style="color:red;"}**

Puede interesarte una referencia a como definir los colores. Hay muchas posibilidades en la Web, pero está es un inicio. Con esta página conseguirás el código hexadecimal, el que está marcado con #. Lo puedes usar así:

[rojo\]{style="color:#E71D02;"}

Muchos colores tienen nombres definidos, si lo prefieres puedes usarlos en lugar del código hexadecimal.

Otra opción del atributo style es la forma de justificación de un texto. La frase a usar es text-align: justify. Las variantes de justificación son las usuales: justify, center, right, left. Si quieres profundizar más en todo esto te sugiero empezar aquí

Lorem ipsum dolor sit amet consectetur adipiscing elit, aunque rutrum feugiat vitae habitasse nisi aenean tellus, suspendisse malesuada faucibus nam dapibus id. Gravida felis dictumst at nibh lacinia ut hendrerit euismod pellentesque, scelerisque sed conubia commodo iaculis luctus tristique rhoncus, velit eleifend purus class non rutrum odio placerat. Integer sagittis magnis lacus erat senectus lobortis aliquet sodales, dignissim convallis conubia arcu pretium suscipit a torquent faucibus, velit laoreet maecenas auctor vivamus morbi netus.

 

Tamaño de letra en unidades expresadas como una proporción relativa al tamaño de letra definido para el contenido (em). Concretamente, se trata de una fracción o un múltiplo de escalamiento que se define con referencia al tamaño de letra en uso.

{style="font-size:3em;"}

algo así texto de color y sigo escribiendo.

Para incluir exponentes se puede recurrir a la modalidad fórmula usando algo así: $m^{2}$ que se verá así: \(m^{2}\). Otra opción es recurrir al marcado html. Pondríamos algo así: algo<sup>superíndice</sup> y se verá así: algosuperíndice. Subíndices, algo semejante, cambiando los códigos necesarios: $m_{2}$ que se verá así: \(m_{2}\). En marcado html. Pondríamos algo así: algo<sub>subíndice</sub> y se verá así: algosubíndice.

Información en “pestañas”

Puede resultarte interesante considerar presentar tu información como si se tratara de una libreta con secciones reconocibles por pestañas. Para hacerlo, el bloque (div) se construye así.

::: {.panel-tabset} \ 
## Descripción de los datos \ 

Es realmente un subdocumento, que podrá tener texto, código, gráficas,
etc. \ 

## Estrategia analítica \ 

**Misma cosa. Subdocumento en el que abordas el tema que anuncias en la
*pestaña*.**

:::

Es realmente un subdocumento, que podrá tener texto, código, gráficas, etc.

Misma cosa. Subdocumento en el que abordas el tema que anuncias en la pestaña.

Hay muchas posibilidades para dar formato a un documento. Lo que describí aquí son sólo cosas elementales. Otros recursos disponibles son temas, definición de estilos con archivos *.css o *.scc. Más información la podrás encontrar acá. Puedes darte una idea de las posibilidades visitando la galería.

Por otro lado, te sugiero dosificar el esfuerzo. Nuestro propósito es la comunicación efectiva de contenidos científicos y la documentación reproducible de los procesos de producción de conocimiento nuevo en los que participes. Esto sugiere que hay que procurar mantener al mínimo el uso de variantes estilísticas en tus documentos, aunque hay que recordar también que somos sensibles al valor estético de lo que observamos. Desde luego, ser minimalista no te debe impedir elaborar algunos productos muy cuidados en los que los elementos de diseño tomarán un papel relevante: presentaciones para público general, libros, manuales, infografías, tableros interactivos (dashboards), etc. Siempre, deberás encontrar un equilibrio entre estética y funcionalidad. También recuerda ser ordenado en tus procesos. Cada proyecto un directorio nuevo, adecuadamente documentado y preservado.

Cómo configurar un sitio web en Quarto

Configura un Blog

Es básicamente un Website con una landing-page que genera automáticamente una lista del contenido del blog (los documentos contenidos en posts).

  • documento definiendo la landing-page index.qmd en directorio raíz.
  • especificar en el archivo de control un directorio base de contribuciones.
  • documento de metadatos que especifica como tratar el contenido de contribuciones

Escribir una presentación Revealjs

Extensiones para Quarto

Quarto, como R, es una pieza de software que propicia la colaboración abierta en su desarrollo, así que hay creciente número de extensiones. Algunas de ellas las encuentras aquí. Para el caso particular de las presentaciones te interesará aprender algunas técnicas avanzadas.

Cómo incluir diagramas en mi blog

Por ejemplo algo muy útil como un diagrama de Gantt. Se puede construir a partir de una especificación de elementos según comandos clave de la aplicación mermaid para la producción de diverso tipos de diagrama basados en Java Script. La documentación e incluso un herramienta de diseño auxiliar se encuentra en la documentación de mermaid.

 

muestra el escript: 
library(DiagrammeR)

m <- mermaid(
"
  gantt
      dateFormat YYYY-MM-DD
      title Un diagrama de Gantt
  
      section Grupo 1
         Una tareas      :a1, 2025-03-01, 30d
         Otra tarea      :after a1, 25d
      section Grupo 2
         Tarea en grupo 2 :a2, 2025-10-01, 12d
         Otra tareaa en 2 :after a2, 24d
"
    
)


m

 

Este otro ejemplo ilustra como puede hacerse un diagrama de flujo.

 

muestra el escript: 
mermaid("
  graph LR
    A-->B
    A-->C
    C-->E
    B-->D
    C-->D
    D-->F
    E-->F
")
muestra el escript: 
mermaid("graph LR;A(cuadrado redondeado)-->B[cuadrado];B-->C{Una decisión};
 C-->D[Cuadrado uno];C-->E[Cuadrado dos];
 style A fill:#E5E25F;  style B fill:#87AB51; style C fill:#3C8937;
 style D fill:#23772C;  style E fill:#B6E6E6;"
)

Este es un DAG (grafo acíclico dirigido) que representa un diagrama de influencia con interpretación causal. En este caso se usa el lenguaje de diagramación [dot](https://en.wikipedia.org/wiki/DOT_(graph_description_language). Aquí puedes ver ejemplos de diagramas producidos con esta herramienta.

 

muestra el escript: 
grViz(engine = "dot", 
  diagram =  "
      digraph DAG {
      
        # características generales del diagram
        graph [overlap = true, fontsize = 8]

        # Usa rectángulos para representar los 'nodos'
        node [overlap = true,
              shape = box,
              fontname = Helvetica,
              color = blue,
              style = filled,
              fillcolor = pink]
        Visita_Asia; Tuberculosis; Fumador;
        Cancer_pulmonar; Bronquitis; 
        Rayos_X;Disnea
        
        node [shape = record,
              fontname = Helvetica,
              color = red,
              style = filled,
              fillcolor = cyan]
        t_o_c [label='tuberculosis\\no\\ncancer\\n|{si:|no:}|{{[(?, ?)]}|{[(?, ?)]}}']; 

      
        # patrón de 'influencia'
        Visita_Asia->Tuberculosis
        Tuberculosis->t_o_c
        t_o_c->Rayos_X
        t_o_c->Disnea
        Fumador->Cancer_pulmonar
        Fumador->Bronquitis
        Cancer_pulmonar->t_o_c
        Bronquitis->Disnea
      }
      "
  )