Height of header content in editing view

What I’m trying to do

I am trying to modify CSS in order to to make the space between headers in editing view match those in reading view.


The problem

I have already configured everything regarding margins/paddings, they are equal in both views. But now I’m facing the fact that the height of the header content is different in editing view and in reading view. The header content in editing view is always higher.


# I'm talking about this type of elements (HyperMD-header)
# Editing view
<div class="cm-active HyperMD-header HyperMD-header-1 cm-line">
    <div class="cm-fold-indicator" contenteditable="false">
        ​<div class="collapse-indicator collapse-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle">
                <path d="M3 8L12 17L21 8"></path>
    <img class="cm-widgetBuffer" aria-hidden="true">
    <img class="cm-widgetBuffer" aria-hidden="true">
    <span contenteditable="false"></span>
    <img class="cm-widgetBuffer" aria-hidden="true">
    <span class="cm-header cm-header-1">Header 1</span>
# CSS (editing view) computed
font-size: 54.06px;
line-height: 64.872px #(the actual value is 1.2);
box-sizing: border-box;
caret-color: rgb(190, 190, 190);
clear: left;
color: rgb(190, 190, 190);
color-scheme: dark;
display: block;
font-family: Rubik, "??", Rubik, "??", Rubik, "Glow Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", sans-serif, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
font-style: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 700;
height: 108.875px;
letter-spacing: -0.8109px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: 700px;
overflow-wrap: anywhere;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 40px;
position: relative;
tab-size: 4;
text-rendering: optimizelegibility;
text-shadow: rgb(255, 0, 255) 0px 0px 27.03px;
text-wrap: wrap;
white-space-collapse: break-spaces;
width: 578px;
word-break: break-word;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;


Reading view

In reading view it’s simple:

  • font-size: X px
  • line-height: Y
  • content height: (X * Y) px

So the content height in reading view is (54.06 * 1.2) = 64.872‬ px


Editing view

But in editing view it doesn’t work like that. The content height is always a few pixels bigger than XY.



You can see in CSS above that computed line-height in editing view is 64.872, so it completely matches the content height in reading view, but somehow in editing view the content height is not 64.872, but 68.875. I can’t understand where these 4 px came from?

I just know that it is not always 4 px. If i decrease font-size to 10px it would be 2 extra pixels. If I descrese font-size to 1px, it would be 0.68 extra pixel. Only if descrease font-size to 0, there would be 0 extra-pixles.

Please help me to get rid of them so that the content height in headers in editing view would match the content height in headers in reading view.

After sitting for 6 hours to solve this problem, I finally found a solution. Installing Rubik font completely cures it.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.