fancy first letter

css

Big first letters

Emil Hvitfeldt true
05-09-2021

Drop caps are a fun way to add a little bit of flair to a paragraph.

Using the ::first-letter pseudo-element we can specifying the style of that is applied to the first letter of a paragraph.

You can go above and beyond and specify a custom font to be used in the drop-cap. The romantik font was used in this example.

All files found here.

Result

Rmd

---
output:
  xaringan::moon_reader:
    css: ["stylesheet.css"]
    lib_dir: libs
    seal: FALSE
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

# Sample Header

.drop-cap[
Duis vel viverra elit, eget hendrerit odio. Curabitur 
cursus elit nec diam vulputate, nec sollicitudin nunc 
ornare. Ut mi lectus, aliquet non ligula sed, 
lobortis vehicula erat. Morbi porttitor orci ut 
semper dapibus. Donec sodales tellus varius tortor 
varius, ornare commodo augue maximus. Vestibulum quis
bibendum mi, sit amet lobortis leo. Morbi vulputate 
orci arcu, ac lobortis sapien gravida eget. Nulla non
interdum orci, nec congue ligula.
]

stylesheet.css

@font-face {
    font-family: 'Romantik';
    src: url('Romantik.woff2') format('woff2'),
         url('Romantik.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.drop-cap::first-letter {
    font-family: 'Romantik';
    float: left;
    font-size: 65px;
    line-height: 70px;
    padding-top: 10px;
    padding-right: 8px;
    padding-left: 3px;
    margin-bottom: -15px;
}

Reuse

Text and figures are licensed under Creative Commons Attribution CC BY 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".

Citation

For attribution, please cite this work as

Hvitfeldt (2021, May 9). Xaringan Gallery: fancy first letter. Retrieved from https://xaringan.gallery/examples/fancy-first-letter/

BibTeX citation

@misc{hvitfeldt2021fancy,
  author = {Hvitfeldt, Emil},
  title = {Xaringan Gallery: fancy first letter},
  url = {https://xaringan.gallery/examples/fancy-first-letter/},
  year = {2021}
}