Opening the following minimal html in a browser: <div class="highlight highlight-t

What about this workaround? <div class="highlight highlight-source-stylus notransl

Thanks for the quick reply! Another html: <div class="highlight

<pre><code> font smaller than <pre> font in a minimal html,about oxalorg/sakura

Comments (6)

roj1512 commented on May 18, 2024 2

What about this workaround?

pre
  code
    font-size inherit

from sakura.

oxalorg commented on May 18, 2024 1

I checked it on a couple of fonts, and typically monospace fonts tend to consume larger visual space for the same content as other fonts.

On my blog: https://oxal.org/blog/fizzbuzz-in-clojure/ setting code to the same size as the text looks weird and non-proportional.

Bootstrap also seems to be reducing the font size of pre and code tags.

So I feel like we should keep the small size of code and make it consistent by adding it to pre as well.

from sakura.

pietroppeter commented on May 18, 2024 1

You definitely have much more experience than me to judge on this (mine is not much more than the two examples above 😄) so go ahead with what you feel better for the project! And thanks for sakura which is very nice!

from sakura.

oxalorg commented on May 18, 2024 1

That's a great idea! Nice thinking :)

There was a different approach to solve this in #52 it seems. I've merged that in. But pre > code inherit seems more cleaner. Either works :)

Feel free to add a PR if you want to update it!

from sakura.

oxalorg commented on May 18, 2024

Yes, you are right. I had initially set font-size for code tags to be 10% smaller because I usually use a monospace font for code.

Monospace fonts are usually larger in size than serif/sans-serif. To compensate for that I must have originally reduced the size of the code tag.

We can either reduce the size of pre tag too or just get rid of this assumption. Any thoughts are welcome!

from sakura.

pietroppeter commented on May 18, 2024

Thanks for the quick reply!

Another html:

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link rel='stylesheet' href='https://unpkg.com/normalize.css/' type='text/css'>
  <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
</head>
<body>
  <p>Paragraph with <code>code</code> inline (default size)</p>
  <p>Paragraph with <code style="font-size: 1em;">code</code> inline (size <tt>1em</tt>)</p>
  <pre><code>This is code inside pre</pre></code>
  <pre>This is just pre</pre>
</body>
</html>

looks like this:

Looking at the above, my personal thought is that code is a bit small with respect to normal text (more evident from inline code element). Actually it seems that monospace font is smaller than normal even when at same nominal size. I would probably get rid of the assumption.

from sakura.

<pre><code> font smaller than <pre> font in a minimal html about sakura HOT 6 CLOSED

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent