La propiedad initial-letter de CSS facilitará mucho las cosas.
Navegadores compatibles
¿Dónde puedes probar initial-letter? Está disponible en Safari y en Chrome 110. En Safari, la propiedad necesita el prefijo -webkit-. Hay un problema abierto para que se implemente en Firefox.
Prueba la compatibilidad con initial-letter con lo siguiente:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Soluciones actuales
¿Cómo podrías aplicar diseño a una letra inicial mayúscula en CSS hoy?
El pseudoelemento ::first-letter nos ayuda a resolver parte del problema.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Sin embargo, es probable que debas buscar propiedades como "float" mientras calculas un tamaño para esa 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 (lh actualmente solo es compatible con 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 initial-letter
La propiedad initial-letter te brinda un control más detallado sobre este diseño de mayúscula inicial. Toma 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á y mantendrá su relación de aspecto. No puedes usar un valor negativo, pero sí valores decimales.
- El segundo argumento define el sumidero de letras. Esto se puede considerar como el desplazamiento de la posición en la que se colocará la letra. El segundo valor es opcional y no puede ser negativo. Si no está presente, se supone que el valor del tamaño de la letra se redondea al número entero más cercano. Esto equivale a usar la palabra clave "drop". El sumidero también acepta otro valor de palabra clave, "raise", que equivale a un sumidero de 1.
Consulta esta demostración en la que puedes cambiar los valores para ver cómo afectan el diseño de la mayúscula inicial.
Combínalo con ::first-line y podrías tener algo como lo siguiente:
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, dale 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;
}
Tal vez agregues 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 bien recorta el fondo en 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.
Y ahí lo tienes, un control más preciso sobre el estilo de la letra inicial con initial-letter. ¿Agregarías letras iniciales mayúsculas a tu tipografía? ¿Cómo podrías diseñarlos? Dinos si necesitas más ayuda.