Meta Post - Common CSS Hacks

[baxterqc]

Thanks, I tried it. It works for block references too, but still no luck with usual embeds

[Klaas]

@baxterqc : what do you mean by the “usual” embeds?
What are you looking for with those?

[baxterqc]

Basically, what i want is “Embtest” and “Embtest 2” to be on the same line.

[Klaas]

@baxterqc don’t use the cssclass front matter if you are using the snippet I pointed you to.

[Gnopps]

Do you know if there is a way to get this working in live preview mode as well?

[lizardmenfromspace]

@Gnopps what is this referring to?

[Gnopps]

Thanks for your answer! I tried to quote in my post, click the arrow in it and you’ll see. It is about Bullet Point Relationship Lines.

[lizardmenfromspace]

I do not, sorry, I wasn’t even the one who made it

[janpeeters]

(I made an edit to the code after posting, I think it’s better now, and added some background)

I’m a bit of a readability nerd. I added these two snippet to make text more readable. The negative word spacing is to prevent ‘rivers’, lines of white space between words on different lines, and the letter spacing is to better differentiate each character. These two adjustments are often made in book typography.
You can see (although minimal differences) that the ‘after’ image has a more even look then the ‘before’ image.
I use it with the default macOS font, ‘San Francisco’ and since every typeface has different kerning you will need to tweak it further for your own choice of typefaces. Go slowly on the values, take very small steps.

Before:

After:

/* Better word and character spacing */
body {
  word-spacing: -0.04rem;
  letter-spacing: 0.01rem;
}

This one makes type a lot sharper and clear on hires screens. This might not be complete for all platforms, I’m uncertain if WebKit and moz-osx account for all web renderers.

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[Klaas]

@janpeeters interesting, never thought about using letter-spacing that way.

I have been using Space Mono because of the wider spacing and because I find it a pleasant enough font for both Edit and Reading modes.

[janpeeters]

Yes, it’s really all about what you’re used to and what you find pleasant to look at. Space Mono is a great font for many purposes. My post was mainly to raise attention that you can optimize legibility for your texts by having a more detailed look at character and word spacing settings.

[Klaas]

@janpeeters

My post was mainly to raise attention that you can optimize legibility for your texts by having a more detailed look at character and word spacing settings.

Yep, that’s clear. I have seen fonts that are visually attractive though letter spacing is a bit too tight, others probably have the same experience. So, for those who would still like to use such a font your solution is great.

[Ziv]

From: Meta Post - Common CSS Hacks - #326 by Christian

@Christian

VIM Light + Dark mode line focus

I have used this method of “line-focus” for a very long time and very appreciate how it enhance my writing experience

However, it seems, at least for me, the line focus in edit mode doesn’t not survive in the new update live-preview anymore…

Does anyone know any ways to have the line focus back? (i.e. the current edit line will have different color)

Sorry if this is a silly question, I’m not very familiar with the css

[dorkloon]

hi, this is not working in live mode, how can I change it to work in live mode?

thx

[rbb]

also looking to get this in live preview mode!

[Christian]

Here’s a quick fix that works with Live Preview.
cc: @dorkloon and @Ziv

/* Modified by Christian (Chhrriissyy#6548). Original by MooddooM */
/* This version sets the line focus for both edit and insert mode. */
/* If you want to make it edit mode only, add the `.cm-fat-cursor` CSS class selector to both light & dark mode. /*

/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
    width: 0.5em;
    background: #d65d0e;
    opacity: 60% !important;
}


/* LIGHT MODE */
/*if you want the highlight to present in both normal and insert mode of vim*/
.theme-light /* .cm-fat-cursor */ .cm-active {
    background-color: rgba(0, 0, 0, 10%);
}

/* DARK MODE */
.theme-dark /* .cm-fat-cursor */ .cm-active {
    background-color: rgba(95, 95, 95, 30%);
}

Just a quick heads up: this doesn’t fix the cursor styling, just the line indicator.

[dorkloon]

thx bro, it works

[ctrauma]

I have been struggling with styling the cursor in edit mode since in my case it was a thin grey blinking line that is incredibly hard to see… I tried every solution I could find on the forums and nothing worked and I have just been living with it… Today I decided to not give up until I had a fix. The code below does exactly what I want, which is a highly visible, semi-transparent, blinking block. Just thought I would share it here since it was harder to get to work than I thought it was going to be.

.cm-cursor {
    border-color:  #F67400 !important;
    border-left-width: 0.6em  !important;
    opacity: 60% !important;
}

[togafra]

Hi @Moonbase59, thank you very much for creating this CSS snippet. Great work!
I noticed that, when I export the master document to PDF, each note is enclosed between lines. Do you know how to remove them?

Thanks in advance.

[togafra]

I did some experiments and I noticed that if you insert in the @media print {) portion, the lines of code from the “clean-embeds-all.css” file, you even get a quite nice pdf.

Other useful lines to avoid page breaks are:

/* Page breaks */
h1 {
page-break-before: always;
}
h2, h3, h4, h5, h6 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}