We switched to a manual approval system for registration on this forum, as this makes it easier to keep bots out of the forum. We'll approve everybody who doesn't look like a bot!

Several questions from a new Zettlr user.

edited February 18 in General

Hi. It's my first day of using Zettlr on windows 10 and I have several questions about Zettlr settings.

  1. How I can customize fonts when printing? CTRL+P preview window uses different fonts compared to editor and I could find any settings connected to printing.
  2. How I can customize colors? I see the custom css option, but there are no examples. I tried to find a css file for the default color-schemes (Berlin, Frankfurt, Bielefield, Karl-Marx-Stadt) in Zettlr installation folder, but there aren't any. I there any complete css color-scheme available for zettlr? So I can use it as reference to import my favourite color-schemes from vscode.
  3. I found a bug. Frankfurt and Bielefield themes override custom css font settings.

Comments

  • Hey, glad to have you aboard!

    Concerning your questions:

    1. The print functionality is solely meant for previewing and quick'n'dirty editing tasks when you want to have it printed out instead of doing it on a screen. For customisable prints, try exporting it as ODT or DOCX, where you can change the appearance to your liking before printing!
    2. The CustomCSS feature is, I would admit, somewhat advanced, but to the contrary, there are both examples and full schemes (+ I'm currently working on yet another theme). Have a look at the Custom CSS documentation, and feel free to roam around in this forum, as in the customisation category there indeed are some custom themes!
    3. It depends, they don't overwrite them, they simply define them more specifically, because Frankfurt and Bielefeld both make use of different fonts (as opposed to Berlin and Karl-Marx-Stadt, which both use the default font). Try adding a !important after your custom font statement, this should in turn override these.

    I hope this helps!

    Cheerio

    1. That's a pity. I use printing option as a way to convert documents into PDFs for over a decade. As part of my job I have to deal with lots of different legacy software with poor export support, so I use PDFCreator program which is essentially virtual printer which simply saves anything into PDF. Simple, small, reliable. So I hoped that I could use Zettlr within the same workflow.
    2. I looked through the CSS Customization page, there are only simple examples. There is no full scheme to use as reference, only a list of possible options. Since Zettlr is based on CodeMirror I thought you also have a reference color-scheme css-file like they do.
    1. Sometimes it's pretty healthy to break with long-running workflows. After all, the Print-to-PDF was never really meant to create PDFs, it was just a form of abusing the printing function for something different. Fortunately, technology is far enough that we don't have to do this anymore, and therefore can use the printing preview exactly for this: Look at something to print it. PDFs can be generated easily with Pandoc, so I'd recommend it, especially if you've been using Print-to-PDF for over ten years!
    2. The examples are pretty good, but you are right: they don't especially cover the editor styling. Zettlr does indeed have a full css-file for this. Just have a look into the LESS files, there are several codemirror.less-files that contain everything styling this. To override this with custom CSS, you simply have to namespace the rules, e.g. with body #editor .CodeMirror
  • edited February 19

    HI, I'm also trying to change the look of headings but I'm lost. I just want to change the font size! Is there a local file for Zettlr that contains the current .css? Is the LESS file you linked to the .css? Can I copy/paste that into custom.css?

    You wrote something that might explain it but I don't know what it means: "To override this with custom CSS, you simply have to namespace the rules, e.g. with body #editor .CodeMirror". I don't know how to "namespace the rules".

    Even if changing the style requires tinkering with .css, it would be much easier for newbies to do this if they could easily look at the .css currently being used by Zettlr.

    1. I tried pandoc+latex. Latex is 965mb and pandoc is 175mb. So I had to install software 5 times bigger than Zettlr just to get a single function. It feels like installing Adobe Photoshop just to convert png to jpeg. Why you chose pandoc+latex combo for saving pdf? Are there any specific advantages? For example VSCode Markdown Preview Enhanced offers 3 or 4 different solutions to save PDF.

    2. Super, thank you, that solves the color-scheme problems. I think you can add link to those less files to the custom css document.

    1. The two main points for Zettlr relying on LaTeX and Pandoc are first that these softwares already do an incredibly good job at their tasks (converting documents, and creating PDF), so we don't have to re-invent the wheel, and second to foster integration within the Open Source software world. Many will already have either Pandoc or LaTeX installed, and Zettlr therefore serves as some kind of "frontend" for these things. Furthermore, you are obviously not dependant on Zettlr to use Pandoc or LaTeX. For instance, Pandoc comes in handy in a variety of ways for converting documents. Another way to pitch this would be: There are very many situations of doubt, of unclear meaning when converting documents back and forth, and it took the LaTeX/Pandoc-community years to perfect their software, and I doubt Zettlr could do anything like that in a shorter amount of time!
    2. That's a good idea!
  • edited February 19
    1. I understand you postion. But I think you are leaning towards linux and mac users where latex is more common. In windows world even in academia very few people use latex for documentation purposes. And in business nobody even heard Latex. And print to PDF either through the virtual printer or through Chrome is a standard way of saving documents from software that runs in browser.
      Comparing our different backgrounds made me think. Why we use Zettelkasten? Because it's more natural way to work with information, it's natural for our brains to make connections between different pieces of information. Dealing with workflows in different companies I came to the similar conclusion: the success rate of adapting new things, be it new software or new methotology, is dependant on how easy it will connect/integrate with already existing the workflow. The more output options the software has, the higher the chances are that it will be successfully adopted. It's especially important for cross-platform software, where workflows have significant differences. It's not a critical flaw in this situation, since Zettlr is not a business-oriented software. Still some windows users would not be so willing to switch from their usual way of working with pdfs.

    2. I used less to combine all less files into a single reference css. While playing which css I possibly discovered a bug: The inline code setting doesn't work.

      body .cm-fenced-code,
      body .cm-formatting-code-block {
        font-family: "Fira Code Retina", monospace;
      }
      

    To my understanding this block sets font for both inline code and code blocks. But in reality inline code still uses default Liberation Mono font.
    Just to be sure I replaced all Liberation Mono to Fira Code Retina in reference css and added !important to all of them but result is still the same.
    Here is screenshot.

  • Hendrik, I think my questions above got lost in the discussion (maybe I should have started a new discussion instead). I don't think I'm supposed to repost as a new thread, so I would appreciate it if you could respond when you have a chance!

  • In windows world even in academia very few people use latex for documentation purposes.

    This is precisely what Zettlr aims to alter. The editor is part of a bigger project to stop bad practices in Windows environments. Yes, even in academia most people are doing it this way, but "nudging" people towards what I've outlined will ultimately in the end reap more benefits for all users. Yes, it's a change in the beginning, BUT it makes people more independent, because they have to actually deal with it. This is why I try to maintain a balance between giving people what they know, that is: picking them up where they are, and then gradually leading them away from Word, Print-to-PDF, and possibly other bad practices. Yes, I believe that the way Linux and macOS do things is better than many things on Windows, so in part this is a deeply political stance that I take here :)

    Still some windows users would not be so willing to switch from their usual way of working with pdfs.

    Absolutely. But ultimately, it's a choice they have to make. And it's my responsibility to make the switch as palatable as possible! It doesn't work for all people, but if it works for a few, this is already good!

    But in reality inline code still uses default Liberation Mono font.

    This is also part of the namespacing Zettlr applies. The main ratio behind how the CSS works is the following: To prevent bleed-through of conflicting CSS directives, I try to namespace as finegrained as possible, which means that the fonts are, if I'm not mistaken, namespaced to body.win32 #editor .CodeMirror (why win32? Because Windows has super weird text anti-aliasing which makes most of the default fonts unusable there, which is the reason why on Linux and macOS Zettlr by default uses Lato, and on Windows, falls back to Segoe UI).

  • edited February 20

    1.Ok, I understand your political position. :) I will use VSCode to print markdown to PDF if needed.

    2.

    if I'm not mistaken, namespaced to body.win32 #editor .CodeMirror

    First.
    I did lessc theme-berlin\theme-main.less reference-theme.css to create a reference css file for me to play around. And in it I see only one directive with win32 in it.

    body.win32 {  
      font-family: 'Segoe UI', sans-serif;  
        }  
    

    All other font directives look like this:

    body #editor .CodeMirror.cm-stex-mode,
    body .quicklook .body .CodeMirror.cm-stex-mode,
    body .dialog .CodeMirror.cm-stex-mode,
    body #editor .CodeMirror.cm-css-mode,
    body .quicklook .body .CodeMirror.cm-css-mode,
    body .dialog .CodeMirror.cm-css-mode {
      font-family:  "Fira Code Retina", monospace !important ;
    }
    

    There are no directives with body.win32. I also looked through less files manually to double-check.

    Second.
    To my understanding Electron platfrom uses Chrome to render the GUI, correct? Chrome ignores windows native antialiasing settings, that's why Lato font on the docs.zettlr.com looks nice, while Lato inside windows applications looks awful. I think Electron applications also ignore windows font settings. That why discord and VSCode are much better at rendering text than anything native to windows.

  • To my understanding Electron platfrom uses Chrome to render the GUI, correct? Chrome ignores windows native antialiasing settings, that's why Lato font on the docs.zettlr.com looks nice, while Lato inside windows applications looks awful. I think Electron applications also ignore windows font settings. That why discord and VSCode are much better at rendering text than anything native to windows.

    Yup, Electron is pretty much a NodeJS server with a Chrome browser frontend. But then I don't understand why Lato on Chrome browsers look good while I always had difficulties viewing Lato on Windows devices using Zettlr o.O

  • edited February 20

    According to your fonts folder in Zettlr sources you have only Lato-Light and Lato-Heavy. No normal lato font.
    This is how Lato-Regular looks in VSCode in Win10. It's almost identical to the looks of docs.zettrlr.com page in Chrome based browser.

  • Yep, because I like the light version more, and this is what Windows is utterly ugly in displaying. Maybe I should consider adding the regular versions

  • Ok, back to the win32 topic, as I said earlier there are no body.win32 blocks in less files in Zettlr source code. Also body.win32 is not in the list on the Custom CSS page.

  • Have you tried to "inspect element" the ones you'd like to style and copy over the CSS rules? This works out of the box in almost all cases.

  • Great idea.
    The ugly font corresponds to class=cm-comment.
    So I added font definition to the block:

    body .cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
      background-color: var(--grey-0);
    }
    

    It works. Thx.

  • But I got another question. I have problems with list indentations. Editor displays random behavior for the TAB button when I try to make indents for the multilayer lists. So I have to put 4 spaces manually with a space button. Is there a way to stop markdown parsing inside editor, so I can work with it like with plain text?

  • What exactly do you mean?

  • Example. I have a sublist inside a list:

    I want to make indentations for the sublist:

    To achieve that I have to manually press space button. TAB button doesn't work, sublist elements don't move after you press TAB.

  • Ah, I think it's because the (built-in) command we use only works at the beginning of a list item, not the end. Haven't come around to change that behaviour, because normally I just indent before I write the text for the list item, so it has some low priority atm. Especially given the major refactoring I have to do on extremely little spare time.

  • Ok, when I have some workaround it's not a problem. Just for clarification: until major refactoring is finished you won't touch small editor errors? Because I got some strange ones, after I started to save pieces of code in Zettlr.

    Those are simple examples from powershell book I'm reading.

  • Well, what you are describing are errors related to syntax highlighting, not the file handling. Basically, what I won't touch until refactoring is done is the sidebar and corresponding errors concerning file operations, but the editor is something different!

    Besides, I did a major refactoring of the syntax highlighting for 1.6, so the new version from today should fix them!

Sign In or Register to comment.