La propiedad initial-letter de CSS facilitará el proceso.
Navegadores compatibles
¿Dónde puedes probar initial-letter? Está disponible en Safari y a partir de Chrome 110. En Safari, la propiedad necesita el prefijo -webkit-. Hay un error abierto para que se implemente en Firefox.
Prueba la compatibilidad de initial-letter con lo siguiente:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Soluciones actuales
¿Cómo podrías definir el diseño de un límite total en CSS hoy?
El seudoelemento ::first-letter nos hace parte del camino.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Sin embargo, es probable que debas alcanzar propiedades como "float" mientras calculas un tamaño para la primera letra.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
La introducción de nuevas unidades de CSS, como lh, podría aliviar algunos de estos problemas. Sin embargo, también tienen compatibilidad limitada (por el momento, lh solo se admite en Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Presentamos las letras iniciales
La propiedad initial-letter te brinda un control más detallado sobre este estilo de limitación. Estas requieren dos valores separados por espacios:
p::first-letter {
initial-letter: 3.5 3;
}
- El primer argumento define el tamaño de la letra y cuántas líneas ocupará. La letra se escalará verticalmente manteniendo su relación de aspecto. No puedes usar un valor negativo, pero puedes usar valores decimales.
- El segundo argumento define el receptor de letras. Esto puede considerarse el desplazamiento de la letra. El segundo valor es opcional y no puede ser negativo. Si no está presente, supone el valor del tamaño de la letra mínimo al número entero más cercano. Esto equivale a usar la palabra clave “drop”. El receptor también acepta otro valor de palabra clave, “rise”, que equivale a un receptor de 1.
Echa un vistazo a esta demostración, en la que puedes cambiar los valores para ver cómo afecta el estilo de la limitación.
Si lo combinas con ::first-line, podrías obtener algo como esto.
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
O tal vez, asígnale un border. Observa cómo en el siguiente ejemplo se usa la palabra clave “drop”, que sería la predeterminada si se omite y equivale a 3:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
Puedes agregar un background o algunos box-shadow:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
También puedes recortar el fondo según el texto:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
Tienes muchas posibilidades.
¡Ya lo lograste! Obtén un control más preciso sobre el estilo del capote con initial-letter. ¿Agregarías mayúsculas a la tipografía? ¿Qué estilo le darías? Infórmanos al respecto.