Una de las limitaciones de jupyter notebook para crear diapositivas, es que es posible crear de columnas. Por defecto, el texto ocupa toda la pantalla, como se muestra en la próxima celda.

Lo anterior no es ideal porque sería natural mostrarr el texto y la imagen con columnas.

Sin embargo, podemos usar todas las herramientas de html.

Existen distintas opciones: float: left o display: inline-block.

Veamos las diferencias.

Ejemplo de float: left:

Texto anterior.
<div style="clear: both;">
    <div style="float: left; width: 50%; background-color:#FF0000;">UNO</div>
    <div style="float: left; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="float: left; width: 30%; background-color:#00FF00;">TRES</div>
</div>
Texto posterior.

Se muestra como:

Notar que:

  • Podemos poner tantas columnas como necesitemos, siempre que sumen menos de 100%. Utilizo una columna interior para separar texto de imagen.
  • El texto "se pega" al div, lo cual se ve bastante feo.
  • La opción de background-color es opcional, acá se usa sólo para mostrar donde termina cada columna.

Ejemplo de display: inline-block:

Texto anterior.
<div style="clear: both;">
    <div style="display: inline-block; width: 50%; background-color:#FF0000;">UNO</div>
    <div style="display: inline-block; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="display: inline-block; width: 30%; background-color:#00FF00;">TRES</div>
</div>
Texto posterior.

Se muestra como:

Notar que el texto "no se pega" al div como antes.

En base a lo anterior, conviene preferir display: inline-block.

¿Como funciona para texto e imágenes?

Texto anterior.
<div>
    <div style="display: inline-block;  width: 50%; background-color:#FF0000;">UNO</div>
    <div style="display: inline-block; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="display: inline-block; width: 30%; background-color:#00FF00;">
    <img src="2020-03-19-rise-columns/lore_ipsum.png" alt="LoreIpsum">
    </div>
</div>
Texto posterior.

Ahora el texto quedó alineado abajo. Esto es porque por defecto, la imagen se alinea a texto. Esto se puede combatir con la opción adicional de vertical-align: text-top; en la imagen, como se ve a continuación.

Texto anterior.
<div>
    <div style="display: inline-block;  width: 50%; background-color:#FF0000;">UNO</div>
    <div style="display: inline-block; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="display: inline-block; vertical-align: text-top; width: 30%; background-color:#00FF00;">
    <img src="2020-03-19-rise-columns/lore_ipsum.png" alt="LoreIpsum">
    </div>
</div>
Texto posterior.

También podemos alinear un video:

Texto anterior.
<div>
    <div style="display: inline-block;  width: 50%; background-color:#FF0000;">UNO</div>
    <div style="display: inline-block; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="display: inline-block; vertical-align: text-top; width: 30%; background-color:#00FF00;">
    <video src="https://github.com/sebastiandres/blog/blob/master/videos/mov_bbb.mp4?raw=true" controls></video>
    </div>
</div>
Texto posterior.

Podemos juntar todo lo anterior en un contenedor estándar de texto e imagen, donde sólo será necesario actualizar las rutas y los porcentajes de las columnas:

<div>
    <div style="display: inline-block;  width: 40%;">Lorem Ipsum Text</div>
    <div style="display: inline-block; width: 10%;"></div>
    <div style="display: inline-block; vertical-align: text-top; width: 50%;">
    <img src="2020-03-19-rise-columns/lore_ipsum.png" alt="LoreIpsum">
    </div>
</div>

y de texto y video, para reutilizarlo a futuro.

<div>
    <div style="display: inline-block;  width: 40%;">Lorem Ipsum Text</div>
    <div style="display: inline-block; width: 10%;"></div>
    <div style="display: inline-block; vertical-align: text-top; width: 50%;">
    <video src="https://github.com/sebastiandres/blog/blob/master/videos/mov_bbb.mp4?raw=true" controls></video>
    </div>
</div>

Finalmente, entonces podemos obtener el texto e imagen tal como lo queríamos:

Observación:

 ¿Qué más me gustaría?

  • Código: A pesar que puedo poner código en las columnas (código "muerto" pues se puede escribir codigo en el markdown), me gustaría más que la columna fueran una celda de python ejecutable.

Update:

Existe una extensión que permite tener 2 celdas de jupyter notebook lado a lado: split cells.