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 le aplicarías 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 el siguiente ejemplo 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 mayúscula 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.