kepano / obsidian-minimal

A distraction-free and highly customizable theme for Obsidian.
https://minimal.guide
MIT License
3.63k stars 184 forks source link

Italics and/or bold parts of headings are not rendered correctly #400

Open idea-list opened 2 years ago

idea-list commented 2 years ago

Is the bug present when using the default Obsidian theme?

No

Is the bug present when snippets and plugins are disabled?

Yes

Minimal theme version

5.3.2

Describe the bug

This is not a critical issue for me, just a heads up since I know you work on a new default theme for Obsidian 0.16 (that's probably somewhat based on Minimal's codebase) so you can avoid it there.

Minimal renders italics and/or bold text in headers differently and incorrectly in all modes due to clashes of CSS rules with different specificity. It can be reproduced in a brand new vault with only Minimal theme and a Minimal Theme Settings plugin installed.

Issues with Minimal theme only (these are reproducible no matter if Minimal Theme Settings is installed or not):

Additional issue with Minimal Theme Settings' Colorful headings (but it seems to have a similar cause):

Actual (Source, Live Preview, Reading modes):

actual

Expected (Source, Live Preview, Reading modes):

expected

Workaround

Currently I fixed this issue in my vault using the following CSS snippet. Sorry that this not a PR but:

  1. I'm not sure it covers all cases. There seems to be more rules that apply font weights and/or colors.
  2. I don't think this is the optimal solution as there might be a better way to apply such rules in a consistent way, because this is not an issue with current (Obsidian 0.15.9) default theme. I don't know if it's an issue in 0.16.x.
/* Render italic parts in headings as italic */
.cm-em:is(.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6) {
  font-style: italic;
}

/* Increase font weight for bold parts of the headings */
.markdown-rendered h1 strong, .cm-s-obsidian .cm-header-1.cm-strong {
  font-weight: calc(var(--h1-weight) + var(--bold-weight) - var(--normal-weight));
}

.markdown-rendered h2 strong, .cm-s-obsidian .cm-header-2.cm-strong {
  font-weight: calc(var(--h2-weight) + var(--bold-weight) - var(--normal-weight));
}

.markdown-rendered h3 strong, .cm-s-obsidian .cm-header-3.cm-strong {
  font-weight: calc(var(--h3-weight) + var(--bold-weight) - var(--normal-weight));
}

.markdown-rendered h4 strong, .cm-s-obsidian .cm-header-4.cm-strong {
  font-weight: calc(var(--h4-weight) + var(--bold-weight) - var(--normal-weight));
}

.markdown-rendered h5 strong, .cm-s-obsidian .cm-header-5.cm-strong {
  font-weight: calc(var(--h5-weight) + var(--bold-weight) - var(--normal-weight));
}

.markdown-rendered h6 strong, .cm-s-obsidian .cm-header-6.cm-strong {
  font-weight: calc(var(--h6-weight) + var(--bold-weight) - var(--normal-weight));
}

/* Apply Colorful headings's colors to bold and italic parts of the headings */
.markdown-rendered h1 :where(strong, em) {
    color: var(--h1-color);
}

.markdown-rendered h2 :where(strong, em) {
    color: var(--h2-color);
}

.markdown-rendered h3 :where(strong, em) {
    color: var(--h3-color);
}

.markdown-rendered h4 :where(strong, em) {
    color: var(--h4-color);
}

.markdown-rendered h5 :where(strong, em) {
    color: var(--h5-color);
}

.markdown-rendered h6 :where(strong, em) {
    color: var(--h6-color);
}

Debug info

SYSTEM INFO:
    Obsidian version: v0.15.9
    Installer version: v0.15.9
    Operating system: Darwin Kernel Version 21.6.0: Wed Aug 10 14:25:27 PDT 2022; root:xnu-8020.141.5~2/RELEASE_X86_64 21.6.0
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: dark
    Community theme: Minimal
    Snippets enabled: 0
    Restricted mode: off
    Plugins installed: 1
    Plugins enabled: 1
        1: Minimal Theme Settings v5.3.2
manuelbua commented 1 year ago

It looks like this is now working as expected in 6.3.3, but inline code still doesn't inherit color and bold styling:

Source view: image

Live view: image

Reading view: image