How to fix this Header level snippet (colapse arrows are misplaced in reading mode)

[cerros]

Hi everybody. I am trying to use the following snippet to add header levels marks to all headers.

/* --- Editor Section --- */
.cm-header-1:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H1 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-2:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H2 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-3:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H3 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-4:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H4 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-5:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H5 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-6:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H6 '; 
  font-size: 12px;
  color: var(--text-faint)
}

/* to remove some clutters */

.cm-inline-code ~ .cm-header-2::before, 
.cm-inline-code ~ .cm-header-3::before,
.cm-inline-code ~ .cm-header-4::before,
.cm-inline-code ~ .cm-header-5::before, 
.cm-inline-code ~ .cm-header-6::before
{
  content: '' !important; 
  font-size: 12px;
  color: var(--text-faint)
}


/* --- Preview Section / Reading mode--- */
h1::before
{
  content: 'H1 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h2::before
{
  content: 'H2 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h3::before
{
  content: 'H3 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h4::before
{
  content: 'H4 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h5::before
{
  content: 'H5 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h6::before
{
  content: 'H6 '; 
  font-size: 12px;
  color: var(--text-faint)
}

This is how it looks:

However, when I change to reading mode, the arrows to collapse the header get displaced. As you can see from the following picture

The arrow is not at the level of the header. As oppose as when I am not using the snippet:

I am using a fresh new vault of obsidian v1.6.1
Any help would be really appreciated. Thanks.

[cerros]

I tried the following snippet (a different implementation):

.HyperMD-header:not(.cm-active) .cm-header.cm-header-1::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-2::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-3::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-4::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-5::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-6::before,
.markdown-reading-view h1::before,
.markdown-reading-view h2::before,
.markdown-reading-view h3::before,
.markdown-reading-view h4::before,
.markdown-reading-view h5::before,
.markdown-reading-view h6::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-ui-smaller);
    vertical-align: text-bottom;
    margin-right: 0.5rem;
    color: var(--text-accent);
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-1::before,
.markdown-reading-view h1::before {
    content: 'h1';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-2::before,
.markdown-reading-view h2::before {
    content: 'h2';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-3::before,
.markdown-reading-view h3::before {
    content: 'h3';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-4::before,
.markdown-reading-view h4::before {
    content: 'h4';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-5::before,
.markdown-reading-view h5::before {
    content: 'h5';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-6::before,
.markdown-reading-view h6::before {
    content: 'h6';
}

However it keeps happening:

The collapse arrow is still misplaced in reading mode.
I am using a fresh new vault 1.6.2
Thanks

[ariehen]

Give this version a try via FireIsGood on Discord. If you have line numbers enabled in the editor (Source and Live Preview), you may need to increase the --indicator-offset value a bit more so the heading indicators and line numbers aren’t overlapping.

:is(h1, h2, h3, h4, h5, h6),
.HyperMD-header {
    position: relative;
    &::before {
        --indicator-offset: 20px;
        --indicator-alignment: center;
        content: var(--indicator);
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: var(--indicator-alignment);
        color: var(--text-faint);
        font-size: var(--font-text-size);
        translate: calc(-100% - var(--indicator-offset)) 0;
    }
}
:is(.HyperMD-header-1, h1) {
    --indicator: "h1 ";
}
:is(.HyperMD-header-2, h2) {
    --indicator: "h2 ";
}
:is(.HyperMD-header-3, h3) {
    --indicator: "h3 ";
}
:is(.HyperMD-header-4, h4) {
    --indicator: "h4 ";
}
:is(.HyperMD-header-5, h5) {
    --indicator: "h5 ";
}
:is(.HyperMD-header-6, h6) {
    --indicator: "h6 ";
}

[cerros]

Thank you so much. It worked.
The only small detail I noticed is that the alignment of the level indicator changes between reading and editing mode:

I tried fixing it playing with the top and bottom values, but increasing the top (or bottom) value fixes it for editing mode but affects the reading mode and vice versa

weird

[ariehen]

Yeah, I don’t use the snippet myself. I was just passing it along.

You may need to separate the editor and Reading view parts if you want to adjust things exactly for both viewing modes.

[cerros]

Yes, I was thinking the same. I will investigate to see if I can find how to adjust it separately for editing and reading mode.
Thanks mate.

[ariehen]

Breaking apart the first section should be fine. Then adjust accordingly.

:is(h1, h2, h3, h4, h5, h6) {
    position: relative;
    &::before {
        --indicator-offset: 20px;
        --indicator-alignment: center;
        content: var(--indicator);
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: var(--indicator-alignment);
        color: var(--text-faint);
        font-size: var(--font-text-size);
        translate: calc(-100% - var(--indicator-offset)) 0;
    }
}

.HyperMD-header {
    position: relative;
    &::before {
        --indicator-offset: 20px;
        --indicator-alignment: center;
        content: var(--indicator);
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: var(--indicator-alignment);
        color: var(--text-faint);
        font-size: var(--font-text-size);
        translate: calc(-100% - var(--indicator-offset)) 0;
    }
}

:is(.HyperMD-header-1, h1) {
    --indicator: "h1 ";
}
:is(.HyperMD-header-2, h2) {
    --indicator: "h2 ";
}
:is(.HyperMD-header-3, h3) {
    --indicator: "h3 ";
}
:is(.HyperMD-header-4, h4) {
    --indicator: "h4 ";
}
:is(.HyperMD-header-5, h5) {
    --indicator: "h5 ";
}
:is(.HyperMD-header-6, h6) {
    --indicator: "h6 ";
}

[cerros]

Thank you. It worked
This the configuration I used to match the headers in both editing and reading mode, in case someone may need it:

/*reading*/
:is(h1, h2, h3, h4, h5, h6) {
  position: relative;
  &::before {
      --indicator-offset: 20px;
      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      font-size: var(--font-text-size);
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

/*editing*/
.HyperMD-header {
  position: relative;
  &::before {
      --indicator-offset: 15px;
      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 16px;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      font-size: var(--font-text-size);
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

:is(.HyperMD-header-1, h1) {
  --indicator: "h1 ";
}
:is(.HyperMD-header-2, h2) {
  --indicator: "h2 ";
}
:is(.HyperMD-header-3, h3) {
  --indicator: "h3 ";
}
:is(.HyperMD-header-4, h4) {
  --indicator: "h4 ";
}
:is(.HyperMD-header-5, h5) {
  --indicator: "h5 ";
}
:is(.HyperMD-header-6, h6) {
  --indicator: "h6 ";
}

Thanks for all the help.