Day 86: the initial-letter property

The initial-letter property specifies size and sink for initial letters.

@supports (-webkit-initial-letter: 1) or (initial-letter: 1) {
  p::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

The property takes two arguments. The first one defines the size of the initial letter in terms of how many lines it occupies. The optional second argument defines the number of lines the initial letter should sink. If it’s omitted, it equals the initial letter size.

  p::first-letter {
    initial-letter: 2;
  }

The first letter in a paragraph spans 2 lines starting at the first line and ending at the second line."

1 as the second argument indicates a raised initial.

  p::first-letter {
    initial-letter: 2 1;
  }

The first letter in a paragraph spans 2 lines starting at the first line and going up ending one line above the first line."

Values greater than 1 indicate a sunken initial letter. 

  p::first-letter {
    initial-letter: 2 5;
  }

The first letter in a paragraph spans 2 lines starting at the fourth line and ending at the fifth line."

Note: This property is currently only supported in Safari with a prefix, but it’s coming to Chromium browsers soon.

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

The initial-letter property specifies size and sink for initial letters.

@supports (-webkit-initial-letter: 1) or (initial-letter: 1) {
  p::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

The property takes two arguments. The first one defines the size of the initial letter in terms of how many lines it occupies. The optional second argument defines the number of lines the initial letter should sink. If it's omitted, it equals the initial letter size.

  p::first-letter {
    initial-letter: 2;
  }
The first letter in a paragraph spans 2 lines starting at the first line and ending at the second line."

1 as the second argument indicates a raised initial.

  p::first-letter {
    initial-letter: 2 1;
  }
The first letter in a paragraph spans 2 lines starting at the first line and going up ending one line above the first line."

Values greater than 1 indicate a sunken initial letter. 

  p::first-letter {
    initial-letter: 2 5;
  }
The first letter in a paragraph spans 2 lines starting at the fourth line and ending at the fifth line."

Note: This property is currently only supported in Safari with a prefix, but it's coming to Chromium browsers soon.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2023-01-23T00:00:00+00:00) Day 86: the initial-letter property. Retrieved from https://www.scien.cx/2023/01/23/day-86-the-initial-letter-property-2/

MLA
" » Day 86: the initial-letter property." Manuel Matuzović | Sciencx - Monday January 23, 2023, https://www.scien.cx/2023/01/23/day-86-the-initial-letter-property-2/
HARVARD
Manuel Matuzović | Sciencx Monday January 23, 2023 » Day 86: the initial-letter property., viewed ,<https://www.scien.cx/2023/01/23/day-86-the-initial-letter-property-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 86: the initial-letter property. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/23/day-86-the-initial-letter-property-2/
CHICAGO
" » Day 86: the initial-letter property." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/23/day-86-the-initial-letter-property-2/
IEEE
" » Day 86: the initial-letter property." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/23/day-86-the-initial-letter-property-2/. [Accessed: ]
rf:citation
» Day 86: the initial-letter property | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/23/day-86-the-initial-letter-property-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts