Beheer uw initialen met CSS-beginletters

Jhey Tompkins

De CSS initial-letter maakt het allemaal veel eenvoudiger.

Browser-ondersteuning

Waar kun je initial-letter proberen? Het is beschikbaar in Safari en vanaf Chrome 110. In Safari heeft de eigenschap het voorvoegsel -webkit- nodig. Er is een openstaand probleem om dit in Firefox te implementeren.

Test voor initial-letter met:

@supports (initial-letter: 1 1) { /* Your supported styles */ }

Huidige oplossingen

Hoe zou je vandaag de dag een drop-cap in CSS kunnen stylen?

Het ::first-letter pseudo-element helpt ons een deel van de weg.

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
}

Maar dan moet u waarschijnlijk naar eigenschappen als "float" zoeken bij het berekenen van de grootte voor die eerste letter.

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
  float: left;
  line-height: 1;
  margin-right: 0.25rem;
}

De introductie van nieuwe CSS-eenheden zoals lh zou een deel van deze pijn kunnen verzachten. Maar deze hebben ook beperkte ondersteuning ( lh wordt momenteel alleen ondersteund in Chrome).

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 3lh;
  float: left;
  line-height: 1;
  margin-right: 0.1lh;
}

Introductie van de beginletter

De eigenschap initial-letter geeft u een fijnere controle over deze drop-cap-styling. Er zijn twee door spaties gescheiden waarden nodig:

p::first-letter {
  initial-letter: 3.5 3;
}

• Het eerste argument definieert de grootte van de letter en hoeveel regels deze zal beslaan. De letter wordt opgeschaald met behoud van de beeldverhouding. U kunt geen negatieve waarde gebruiken, maar u kunt wel decimale waarden gebruiken.
• Het tweede argument definieert de letter-sink. Dit kan worden gezien als de compensatie voor waar de letter zal komen te staan. De tweede waarde is optioneel en kan niet negatief zijn. Als deze niet aanwezig is, wordt de waarde voor de lettergrootte aangenomen, tot op het dichtstbijzijnde gehele getal. Dit komt overeen met het gebruik van het trefwoord ‘drop’. De sink accepteert ook een andere zoekwoordwaarde, ‘raise’, wat overeenkomt met een sink van 1.

Bekijk deze demo waarin u de waarden kunt wijzigen om te zien welke invloed dit heeft op de styling van de sierhoofdletters.

Combineer het met ::first-line en je zou zoiets als dit kunnen hebben

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;
}

Of geef het misschien een border . Merk op hoe het volgende voorbeeld het sleutelwoord “drop” gebruikt, dat de standaard zou zijn als het weggelaten werd en gelijk staat aan 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; }

Voeg misschien een background of wat box-shadow toe:

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;
}

Of knip de achtergrond van de tekst uit:

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;
}

Je hebt veel mogelijkheden!

En daar heb je het: fijnere controle over je drop-cap-styling met initial-letter ! Zou u sierhoofdletters toevoegen aan uw typografie? Hoe zou je ze kunnen stylen? Laat het ons weten!