Remark plugin that generates accessible, cross-browser Drop Cap typography markup for the first letter of the first paragraph from your markdown.
Input Markdown:
# Hello World When in the course of human events. Things go wild.Output HTML:
<h1>Hello World</h1><p><spanaria-hidden="true"><spanclass="dropcap">W</span>hen </span><spanclass="invisible">When</span> in the course of human events. </p><p> Things go wild. </p>npm install --save remark-dropcapconstunified=require('unified')constdropcap=require('remark-dropcap')unified().use(dropcap,{// defaultsdropcapClass: 'dropcap',invisibleClass: 'invisible'})Example CSS classes to get you started:
.dropcap{color: red; float: left; font-size:5rem; line-height:3.5rem; margin:0; padding:0.5rem} /* hide visually from eyes, but not aurally from screen readers */ .invisible{clip:rect(1px,1px,1px,1px); height:1px; overflow: hidden; position: absolute; top: auto; white-space: nowrap; width:1px}npm test© 2019 Brev Patterson [email protected] (https://brev.name)