html: mueve un cuadro flotante una línea hacia abajo

Estoy intentando producir un efecto similar a un "cuadro lateral" en el texto, donde una nota o encabezado al comienzo del párrafo "flota" a la izquierda o a la derecha con un espacio negativo alrededor y ligeramente debajo de la parte superior, como la fecha aquí:

Un flotador simple como este no me permite mover la nota debajo de la primera línea, por lo que obtengo una línea completa de texto:

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

El simple hecho de configurar el relleno o los márgenes hace que el cuadro sea más grande, pero quiero moverlo todo hacia abajo. Establecer un posicionamiento absoluto significa que ya no reserva espacio ni se superpone.

¿Hay alguna manera de lograr esto (y aún así tener la nota primero en el párrafo?)

------------------------------------

shape-outside puede hacer esto:

.note {
  float: right;
  margin: 0 0.5em;
  padding-top:1.1em; /* padding equal (or slightly smaller) to one line */
  shape-outside:inset(1.2em 0 0 0); /* this will do the magic */
}

p {
  line-height:1.2em; /* height of a line */
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

con el margen:

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  padding-top:1.2em; 
  shape-outside:inset(1.2em 0 0 0); 
}

p {
  line-height:1.2em; 
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

------------------------------------

Shape-outside, como lo describe Temani Afif, es definitivamente la solución más limpia y flexible, y la recomiendo. Pero como te dijeron que era imposible, te mostraré una solución más antigua. Puede preceder al tramo flotante con otro flotante de ancho cero y la altura por la que desea moverlo hacia abajo, construido mediante un ::before pseudo elelemento. En este caso usaremos la altura de una línea de texto. Luego, el intervalo flotante solo necesita configurarse para borrar el flotador construido.

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  clear: right;
}

p::before {
  float: right;
  content: '0C';
}

body {
  width:375px;
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; and saw a costume very unlike</p>

1

¡Qué bien! También podemos controlar el número de líneas fácilmente sin ninguna altura de línea codificada: jsfiddle.net/dyf9kvtw

Temani Afif

27/03/2021 a las 18:24

------------------------------------

Tengo miedoID, esto no es posible, al menos no de una manera que en todas las situaciones lo mueva hacia abajo una línea (o cualquier cantidad de líneas o píxeles).

Lo único que puedes hacer es mover el elemento span dentro de tu código HTML, es decir, insertarlo en un punto posterior dentro de la etiqueta p:

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
}

<p>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. <span class="note">29 July, 1814.</span>I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

1

Maldita sea, eso es lo que tenía miedo.

-diwhyyyyy

27 de marzo de 2021 a las 0:08