Skip to content

Bullet lists in edit mode not compatible with different fonts #32

@OscarAblinger

Description

@OscarAblinger

I'm using the Obsidianite theme but wanted to change the fonts. Sadly that introduced a visual bug with the bullets.
For one the bullet was halved. And the not-focused lines would also be moved a bit to the right, making vertical movements slightly more annoying.

I understand that you don't necessarily support different fonts, so feel free to close this issue again.
However, since I fixed it in a quick CSS snippet, I figured that it might be useful to some people:

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list-ul {
    text-indent: inherit !important;
    white-space: inherit !important;
    min-width: inherit !important;
    visibility: hidden;
}

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list-ul::after {
    left: 0 !important;
    visibility: visible;
}

All of the !important styles only overwrite some of the Obsidianite CSS, so if it was integrated into the theme, you would just remove the lines that originally change those properties.
Essentially, instead of adding a dot after the text and then moving it a fixed amount to the left, I just added the dot at the start of the line on top and just made the normal text invisible.
That way it should be compatible with any font.

For reference:
With out the fix:
grafik
With the fix:
grafik
It also works with the default fonts:
grafik

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions