#43

Clutter-free edit mode is a step towards a pseudo-WYSIWYG experience by making modifications to the Edit mode. I personally love WYSIWYG, and have implemented many of the code here.

I thought it might be useful to compile it all into 1 CSS sheet. Note that the CSS sheet is NOT a theme; you can copy/paste from the sheet into the theme you are using.
Enjoy.

WYSIWYG.css (5.6 KB)

12 Likes
A Typora-like editing mode (edit and preview at the same time)
#44

is there any way to make the preview fonts thinner, like in the editor?

#45

@Kuncy: I am not a CSS expert at all. I do remember that someone asked the same question and Piotr answered it, I think. You’ll have to search on the forum.

#46

@Kuncy, @Klaas
Was me.

Reply from Piotr
Font is thinner in editor mode than in preview mode. How do I change that?

1 Like
#47

I am really happy with the developments made in getting an almost perfect WYSIWYG experience via custom CSS alone. It has been more of a joy to write in edit mode now than it ever has, I actually found myself opening preview mode less.

Perhaps my (hopefully unreasonable) concern with too close of a perfect experience would prevent us from getting excited when the devs actually implement the real deal. I’m almost 100% happy with my new edit mode, yet I wonder what cool features would the devs add to their version of WYSIWYG that isn’t already accomplishable with custom CSS (aside from other obvious features such as transclusions). Of course, I’m aware that CSS can only go so far, and maybe that is for the best, but I’m just concerned that the actual WYSIWYG would provide us a dopamine rush that is way milder than if we haven’t been toying with clutter free edit mode :wink: Just my thoughts. Hopefully yall—and especially the devs—would prove me wrong.

Btw, not saying that we should stop developing clutter free edit mode either :wink:

1 Like
#48

@3mbry0: whilst we have come a long way towards imitating WYSIWYG, it is not the real thing by a considerable margin.

When a lot of that clutter is hidden it can be hassle to edit it. In real WYSIWYG that is mostly a smooth, seamless experience. And if you hit a bump you can revert to the raw markdown source to edit it. If you have ever used Typora you’ll know what I mean.

So, I am definitely looking forward to the real thing, and hope Licat can stick to his unofficial promise to have it out by the end of this year latest.

2 Likes
#49

Is there a way to have 1<sup>st</sup> rendered as “1st” (without the quotation marks, of course) in Edit mode via CSS? Looking at you @Piotr :laughing:

#50

Nope, for codemirror st is like any other text, you can’t apply any special style to it

#51

I loved it!

#52

@Piotr: OK, thanks.

#53

Thanks, Piotr, that’s so cool!

I find a bug with your quote code. That is, simultaneous use of “>” and “no.” can cause cursor positioning error and display problems, as shown below. Unfortunately, I don’t know how to fix it😓. It would be great if you could fix the bug. Thank you.

#54

Remove this line padding-left: 8.5px !important;

2 Likes
#55

It works. Many thanks!!

#56

I assume this hasn’t been posted here yet, but this was @Piotr’s code for making text in editor mode thicker to make the font look more like in preview mode (posted in this thread: Font is thinner in editor mode than in preview mode. How do I change that?)

.cm-s-obsidian .CodeMirror-line * {
    -webkit-font-smoothing: auto;
}

It’s tiny, but it was really one of the game changers for me lol, and lead me to find other clutter-free CSS hacks. All credit goes to @Piotr (unless this hack is way too simple to be “owned” by someone).

The code for the reverse (make preview text thinner) is also found in the same linked thread (as mentioned here before).

2 Likes
#57

@3mbry0

I felt the same. I had some WYSIWYG hacks, but I was not quite happy, till this one. Another important one for me is the blockquote rendering as in Preview mode.

2 Likes
#58

Is there a way to have &frac12; rendered as “½” (without the quotation marks, of course) in Edit mode via CSS?

#59

I don’t think this is ideal solution which you want, but copying and pasting “½” from preview to editor is worked.

#60

@jokysatria: thanks, but that is not what I am after, as you indicated. A lot is possible in rendering in Edit mode. For example, my blockquotes in Edit mode are almost identical to the Preview mode version. Or, a dash (-) that is rendered as a bullet point in Preview can also be rendered as a bullet point in Edit - I have that. There are more examples.

Of course, not everything is possible, like @Piotr pointed out above for a specific issue, but a lot IS possible.

I use &frac12; (or other number combinations) regularly, and rendering it in Edit mode would be another small step towards WYSIWYG.

#61

@Klaas - It’s not exactly what you’re after, but I use Alt Codes often to do things like this. For example, pressing ALT+0189 gives the ½ character.

1 Like
#62

@Erisred: thanks. On macOS one needs to do a bit more acrobatics to work with Unicode. There is the Character Viewer but that also involves a few clicks.
Easiest is just to type some characters and it gets rendered. Or text expansion. Thanks for jogging my memory.