La propiedad initial-letter de CSS facilitará todo el proceso.
Navegadores compatibles
¿Dónde puedes probar initial-letter? Está disponible en Safari y desde Chrome 110. En Safari, la propiedad necesita el prefijo -webkit-. Hay un problema 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 directo 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;
}
Pero es probable que debas alcanzar propiedades como "float" mientras calculamos el tamaño de 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 la letra inicial
La propiedad initial-letter te brinda un control más preciso sobre este diseño de limitación de caída. Se necesitan 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 ampliará mientras se mantiene 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 como el desplazamiento del lugar donde debe sentarse 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, "Aumentar", que equivale a un receptor de 1.
Mira esta demostración, en la que puedes cambiar los valores para ver cómo esto afecta el diseño del límite descendente.
Combínalo con ::first-line para 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 puedes asignarle un border. Observa que 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;
}
O recorta el fondo con 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!
Con initial-letter, puedes controlar mejor el diseño de los controles deslizantes. ¿Agregarías mayúsculas a tu tipografía? ¿Qué estilo podrías darle? Dinos si necesitas más ayuda.