the sidenote.css hack does not work with this theme

[seatrout]

the sidenote.css hack does not work with this theme

[ceciliamay]

@ceciliamay It’s really cool that sidenotes are now included in the theme, but could it maybe be added on as a snippet, or be toggleable in the upcoming customization update? That way it would be easier to customize it, since I personally prefer the styling of the snippet @seatrout linked (I’m not a fan of having apple emojis in my notes, and I don’t want every sidenote to have a heading saying “Note”). It also unfortunatly broke all my previous sidenotes, since I used the styling <s class="aside-hide">…</s> which still works in the sense that it is rendered as a sidenote, but it is all striked through. This is something I can change in my notes of course, but maybe this could also be fixed?

Yep! I hear ya! The Sidenotes were built to be customization ready ;) ! Toggleable, Header-removable, header-customizable, no-styling sidenote etc.! All I need is some time to make the Customizations!!

I'll do an update for <s> element asides (thank you for the snippet guys), it seems that lots of people use that syntax so I'll update it soon.

(BTW, love the collaboration going on here, thank you so much for all your effort guys!! 💛)

[Signynt]

The hack works just fine for me, have you confirmed that it works with other themes, and no other snippets or plugins might be interfering?

[seatrout]

Thank you both for your help. I had been using the author's method ( <span class="aside-show"> {text of side note} </span> ) and that doesn't work still, though class= "aside-hide" does work, in a rather ugly way. Just using <aside> {sidenote text} </aside>, as in your example, @ceciliamay , does work the way it should. That is odd: I can't see why removing the comments from the css file should have that effect. But it does, so there.

[seatrout]

Thank you for such an elegant theme. The simplest way to fix up the sidenote.css is to write another class with the correct margin for aside-widetext-show. I'll do that and offer it as a pull request.

[seatrout]

Your method is simpler to use and better. Thank you. I had hoped something like that was possible, but I didn't know whether there was a way to discover which way the line width toggle was set. A little thought would have told me that there had to be a way — how else could the app "know" how to adjust the line length?

I'll change it in my copy and in due course send in a PR to the css snippets collection.

[ceciliamay]

The theme should now work with <s> tags! ✨ I won't make a new release, and instead add this to 0.2.7. Thanks for reporting this guys!!

[oxdc]

<aside class="aside-in"> {{ side_note_text }} </aside> still does not work, since margin-right has been set to margin-right: var(--aside-margin); by the selector .is-readable-line-width aside (Line:2873 and Line:4967). Also, consecutive sidenotes would overlap or misalign, for example,

<s class="aside-hide">1</s>
<aside class="aside-in">2</aside>
<aside class="aside-in">3</aside>

The following css snippet could fix this:

.aside-in {
   margin-right: 0 !important;
}

Before:

After:

It would be better by setting clear: right;:

[oxdc]

Another related issue, if one uses Slides in Core plugins, a sidenote box would appear at the bottom right corner, as the css rules are applied globally.

Note that aside is the container of navigators. May be we should add the selector :not(.controls) to aside; or even better, restrict the scope, e.g. .markdown-preview-view.

[ceciliamay]

Sidenotes will no longer be supported moving forward. Sidenotes support will now be replaced with callouts support. Thank you so much for filing this nonetheless 🙏

[ceciliamay]

Hey @seatrout ! Thank you for letting me know of this issue! I've tried out the snippet you sent. Just like Signynt, it works on my end! Here's how it looks right out of the box:

When I copied the snippet you've attached (the whole snippet, not the sections), I made sure to remove the codeblock symbols ``` and ```css, along with other notes from the author. I encourage you to double-check your snippet! Let me know if you still need help!!

If it still doesn't work or you are unsure, you can wait a bit and I will add the sidenotes feature in an update of the theme (it'll be out this week, at most by the weekends!) 😄

[Signynt]

@seatrout That's weird, for me the snippet works for every method (hide, show and in).
I've tried with both span and just using s (like this <s class="aside-show">{text of side note}</s>).

[seatrout]

OK. Time to remove all my other snippets and plugins and see what happens.

[seatrout]

Ah! Got it, I think. Do you have the readable line length switch turned on in editor settings?

I had turned that off, and also had the right sidebar showing, with a calendar in it.

When my settings were used, ie with the line length not constrained, and the right sidebar on, the only way to make the .aside-show class visible was to change the margin-right setting from -23em to -2em. When that was done the sidenotes worked as they should.

So I think there need be a note in the sidenotes.css to say that it won't work properly with the line length unconstrained in editor settings. (I haven't tested this with other themes, though).

 .aside-show {
      text-decoration: unset;
      text-align: justify;
      font-weight: unset;
      float: right;
      position: relative;
--> **margin-right: -23em;** <--
      margin-bottom: .2em;
      clear: right;
      width: 300px; /* PB changed from 400 */
      background-color: var(--background-primary-alt);
      padding: 0.2em 1em 1em 1em; /* PB changed from padding: 1em >> the 4 values */ 
      box-shadow: .3em .3em var(--interactive-accent);
      font-size: 14.5px; /* PB added this */
      border-radius: 4px; /* PB added this */
  }```

[seatrout]

Also, though I think I had checked this, smart (curly) quotes will of course destroy the <span class="aside-..."> construction

[ceciliamay]

Great work on this @seatrout ! Learned many things 😄 I'll definitely take this into (officially)) incorporating sidenotes for the theme!! You're absolutely right about this, the margin-right: -23em is only appropriate for those with readable line width turned on, because the negative right margins moves it outside of the writing space. I checked and having margin-right: 0em (don't remove it! the 0 is of value) actually fits perfect for those who have readable line width turned OFF, because then it's not moving outside the writing space. It is adjusting to the user's set writing space.

I also checked your other point on the curly quotes, and it definitely destroys the aside code construction.

Thank you so much for your efforts in this sidenotes mystery 🧐!!! ✨🎉

[ceciliamay]

that's certainly an option! there is also another way to implement it that will automatically make it show based on your set toggle for the readable line width!

if you use the classes:

.markdown-source-view.is-readable-line-width .aside-show {
...
}

the parameters inside will be for those with the readable line width turned ON while having just

.aside-show {
...
}

can now be used for those with readable line width turned OFF

[ceciliamay]

I've just added Aside/Sidenotes styling for the theme in Release v.0.2.7 !! ✨🎉

[Signynt]

@ceciliamay It’s really cool that sidenotes are now included in the theme, but could it maybe be added on as a snippet, or be toggleable in the upcoming customization update? That way it would be easier to customize it, since I personally prefer the styling of the snippet @seatrout linked (I’m not a fan of having apple emojis in my notes, and I don’t want every sidenote to have a heading saying “Note”).
It also unfortunatly broke all my previous sidenotes, since I used the styling <s class="aside-hide">…</s> which still works in the sense that it is rendered as a sidenote, but it is all striked through. This is something I can change in my notes of course, but maybe this could also be fixed?

[seatrout]

@Signynt are you sure you don't have the smart typography plugin turned on? That was making my <s> spans into strikethrough, because it rendered the class="aside-hide"> with curly quotes round the class name , which markdown does not recognise and so ignores. The plain <s> text</s> tag is interpreted as strikethrough, whereas <s> with a class is interpreted as shorthand for <span>.

[Signynt]

@seatrout Yeah, I checked and don't have that plugin installed. I've tried it in the Help vault and still get it striked through.
Is it working for you with just <s>?

[seatrout]

No it isn't: you're right. I hadn't noticed because I had left the old css snippet on, and that overrides the strikethrough. But when I turned it off in the updated them, I got the strikethrough. I wonder what the difference is. @ceciliamay will know.
For the moment the workaround is to turn on my css snippet.

[seatrout]

"updated theme" not "updated them"

[seatrout]

Ah. Fixed it. You need to open the obsidian.css file in an editor and insert at line 2862 text-decoration: unset; so that the whole section reads

aside,
.aside-show,
.aside-hide,
.aside-in {
    text-decoration: unset;
    font-size: inherit;
    padding:    var(--scale-2-8)
                var(--scale-2-10)
                var(--scale-2-8)
                var(--scale-2-10);
    margin: 0em 0em 1em var(--scale-2-8);
    border-radius: var(--scale-2-4);
    z-index: 0;
}

and your strikethrough will vanish!

[seatrout]

this means that the theme works as it should (though of course if you don't like the icons I can't help you :-) )
If you want to revert completely to my behaviour, just comment out the whole of @ceciliamay's aside class, from line 2848 down to line 2915

[Signynt]

Amazing, just another reason to look forward to the customization update!

[ceciliamay]

Thanks for reporting this in @oxdc — I'll try updating soonest when I get the time! I'll reopen this issue for reference. Thank you also for the suggesting a fix!!