prism-react-renderer icon indicating copy to clipboard operation
prism-react-renderer copied to clipboard

Set line-height?

Open karlhorky opened this issue 6 years ago • 0 comments

Hey there! Would this project be open to instituting a fixed line-height (maybe configurable?) to make rendering across different fonts / browsers more consistent? Not sure how out of date the information is, but I've been reading some articles that line-height: normal is not the same across browsers. I would also find this useful to be able to position elements relative to each line more consistently.

Prism has made the decision to use line-height: 1.5 for all themes (Ref: PrismJS/prism#279). 1.5 seems a bit excessive, especially with the more minimal Menlo font-family, which is the default used by the default code-surfer configuration. Prism uses Consolas as the default when visiting the website on macOS, which both has a higher default line-height (with line-height: normal) and looks better like this.

Below is a comparison of the following:

  • yellow Header: the default Menlo with line-height: normal (which resolves to 1.2 in Chrome macOS)
  • orange Header: Prism's website, using Consolas and line-height: 1.5

Kapture 2019-05-20 at 12 20 37

For a further reference, HTML Boilerplate currently uses 1.4.

I am not actually all into this topic, so I may miss out on downsides or complexities involved in this.

cc @pomber

karlhorky avatar May 20 '19 10:05 karlhorky