Develop

[seatrout]

The sidenotes.css snippet does not work if the editor line length is not constrained (Options -> Editor -> readable line length). If you're working with that toggle off for any reason (for me, it's usually to accommodate a wide table) sidenotes will not show up properly. With the help of @ceciliamay I found this problem and she suggested an elegant fix: the modified code below automatically switches the sidebox position depending on whether the line length is set to "readable" so that it works in both states.

/* Sidenote in line with the main text */
aside {
    float: right;
    border: 1px solid lightgrey;
    padding: 8px;
    padding-top: 0px;
    position: relative;
    left: 10px;
    top: 5px;
    width: 300px; /*PB changed from 155px */
    box-shadow: 5px 10px 10px 2px rgba(119, 119, 119, 0.3);
    color: var(--text-accent);
    font-size: 14px;
    border-radius: 4px;
  }
  /* to put the sidenote in the right gutter, add this rule to the code above */
  /* margin-right: -20em;
  /*-Comments/Asides- source: ITS theme
  Syntax to be used in the note: <s class="aside-…">text</s>
  and replace … with show or hide or in */

  /*Show Aside when line width is set to "readable" */
    .markdown-source-view.is-readable-line-width .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 */
  }

 .aside-show {
       /* For use when the line length is not shortened in the editor settings */
      text-decoration: unset;
      text-align: justify;
      font-weight: unset;
      float: right;
      position: relative;
      margin-right: 0em; /*ACB changed this so that the box is visible*/
      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 */
  }

  /*Hide Aside and hover to reveal it; version for readable line length*/
.is-readable-line-width.aside-hide {
      text-decoration: unset;
      text-align: justify;
      color: transparent;
      font-weight: unset;
      float: right;
      position: relative;
      margin: .5em;
      margin-right: -1.8em;
      width: 1.5em;
      height: 1.5em;
      clear: right;
      overflow: hidden;
      background-color: var(--background-primary-alt);
      color: transparent;
  }

  .is-readable-line-width.aside-hide{
/* Again, this is a variant for when the text fills all available space*/
      text-decoration: unset;
      text-align: justify;
      color: transparent;
      font-weight: unset;
      float: right;
      position: relative;
      margin: .5em;
      margin-right: 0em; /*ACB hack — see above */
      width: 1.5em;
      height: 1.5em;
      clear: right;
      overflow: hidden;
      background-color: var(--background-primary-alt);
      color: transparent;
  }
  .aside-hide:before {
      display: block;
      border-bottom: 2px solid var(--background-modifier-border);
      content: "🗨 ";
      color: red; /*ACB changed this for visibility in a light theme*/
      text-shadow: 0 0 0 var(--interactive-accent);
      font-size: 20px; /*ACB change for visibility*/
      padding-top: .1em;
      padding-left: .3em;
  }
  .aside-hide:hover {
      white-space: normal;
      text-overflow: unset;
      color: unset;
      width: 300px; /* PB changed from 400 */
      height: unset;
      background-color: var(--background-primary-alt);
      padding: 1em;
      padding-top: .5em;
      z-index: 3;
      /*box-shadow: .5em .5em var(--outer-bar);*/
      border-right: 2px solid var(--interactive-accent);
      font-size: 14.5px; /* PB added this */
      border-radius: 4px; /* PB added this */
  }

  /*Aside Inside the Note*/
  .aside-in {
      text-decoration: none !important;
      text-align: justify;
      font-weight: unset;
      float: right;
      position: relative;
      margin-bottom: .2em;
      clear: right;
      width: 18em;
      background-color: var(--background-primary-alt);
      padding: 1em;
      box-shadow: .3em .3em var(--interactive-accent);
      z-index: 3;
      font-size: 14.5px; /* PB added this */
      border-radius: 4px; /* PB added this */
  }

  .aside-in .internal-embed.is-loaded:not(.image-embed),
  .aside-in .markdown-embed {
      width:100%;
  }
  /*Shrink Scrollbar*/
  .aside > ::-webkit-scrollbar {
      width: 5px;
  }

[DutchPete]

@seatrout : I only use the Aside-hide version, so that's the only one I tested. It does not work for me in that the text is shown as strikethrough in Preview.

Using the original version, the marker showing the call-out emoji is pushed all the way to the edge of the screen when readable line length is toggled off. For me personally that is good enough because hovering over it still shows the pop-up correctly.

I don't use readable line length toggled off, but others may, so making your suggested adjustment seems like a good idea, though, like I said, at my end it results in strikethrough.

[seatrout]

OK. This is mystifying. It was working for me last night and now it isn't. Let me see ...

[seatrout]

Have you got smart typography enabled? Curly quotes break css. I just fixed mine by turning them off.

[seatrout]

I just edited the css code above — I had inadvertently swapped round the rules for readable line length on and off.

[DutchPete]

@seatrout like I said, I don't use readable line length. I don't mind if Dmitriy accepts your pull request.

[DutchPete]

@seatrout: many thanks for your contribution.

[ceciliamay]

Hey guys! I would like to add to this convo, if it's still not working. I apologize @seatrout for giving you the wrong class, it seems that I may have confused it with another. The class is supposed to be:

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

(the class i previously sent was .markdown-SOURCE-view (which is edit mode) while this other one is .markdown-PREVIEW-view) but upon further inspection (I am currently working on sidenotes for Primary) , this works just as well:

.is-readable-line-width .aside-show {
...
}

I hope this helps and I apologize! Let me know if this works!

[DutchPete]

Hi @ceciliamay, thanks for your input. I fully sympathize with you making a mistake in CSS, I have made many and I have made a fool of myself with it once or twice though luckily in a DM so not visible to every Tom, Dick and Harry.

That said, if I am not mistaken you show a gap between .markdown-preview-view and .is-readable-line-width, which @seatrout does not show, so I hope he will update his pull request.

[ceciliamay]

Aaa!! Didn't catch that again 😆 It's 3am here, so please forgive me 😆 I am trying my best. It should be no gap between .markdown-preview-view and .is-readable-line-width - thank you for spotting it! I will update my comment 😄

[seatrout]

Sure, but I'm cooking!

[seatrout]

OK. These changes have been made and checked. Neither works in live preview for me, but I hardly use it.

[DutchPete]

@seatrout: that's where we differ. I use Live Preview exclusively now, which is why it did not work for me.

Having said that, if you confirm that it does work in source mode/classic Edit, then they can be added to the snippet collection.

[seatrout]

I can confirm that it works in source mode/classic edit.

[DutchPete]

@seatrout 👍