Hi, long-time Drafts user, first time forum poster…
I see a LOT of information about customizing the look-and-feel of the editor and a giant gallery of templates. What I don’t see is any information about how to edit the look-and-feel of the post-processed HTML. Maybe that’s because it’s obvious to everyone, and involves CSS files or something, but… I don’t know how to do it, and would appreciate pointers to documentation, resources, or help to educate me.
Specifically, whenever I use the “Copy To Rich Text” action to copy/paste my writing into an email (or other document), the base font is rendered at 14pt, the title is 29pt, and H1’s render at 22pt. I feel like I’m reading a Giant Print edition of a book with 5x reading glasses on. It’s just weird.
I’d like by base font to be 12pt, my titles 16pt, and my H1’s 14pt.
Oh, and everything ends up in Verdana font, even though my email client has Helvetica set as its default. Is that something that is set in the processor as well, and can I change it?
The HTML that is being generated by processed Markdown for example is just HTML. Therefore the styling is all contained within that HTML. CSS is indeed what you want to look at, and searching for a beginner’s CSS tutorial in your favourite search engine or on a platform like YouTube will get you started. Note, you will need to understand HTML to make CSS work for you because the CSS is effectively saying make this type/component of HTML display like this, and that type/component of HTML display like that. You can set the fonts, colours, layout, and all that lovely stuff.
W3C Schools has HTML and CSS at the top of its home page and their pages usually rank highly when you are searching for learning about HTML and CSS.
Do make sure when you refer to actions that you link to the action. There can be actions with duplicate names … but I am assuming that “Copy to Rich Text” actually refers to the “Copy as Rich Text” action that is included in the default Markdown action group by AgileTortoise.
To apply your CSS, you can either modify the action (I would copy the action to a new action group and modify it there - you will need to be a Pro subscriber to create your own custom actions), or, since all HTML is also valid Markdown, you could embed the style directly in your draft.
Normally you include your styling at the top, but for simple cases you can certainly get away with it being added at the bottom of the draft. You also have to make sure you format it so that the Markdown processor does not interpret double newlines as paragraphs, and indents as pre-formatted text - hence why the formatting below is poor. But, if we start with a simple Markdown formatted draft and added an HTML style block with some CSS styling to the bottom of a draft:
# This is a level 1 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque nec ipsum ultrices ultricies et a tellus. Quisque molestie leo purus, vitae imperdiet orci. Pellentesque mauris turpis, eleifend at lobortis eget, lacinia vitae lectus. Praesent nec elit nunc, nec molestie nisl. Suspendisse facilisis mi vitae nisi sollicitudin ut imperdiet elit rhoncus.
## This is a level 2 heading
Etiam interdum cursus purus, ut pharetra enim adipiscing faucibus. Nulla malesuada aliquam sollicitudin. Integer imperdiet accumsan iaculis. Quisque fermentum, lorem condimentum convallis auctor, erat sapien egestas sem, et rutrum diam nunc eu mauris.
## This is a level 2 heading
Etiam quis urna et velit euismod mollis. Morbi congue orci eu purus facilisis id hendrerit dui malesuada. Nulla nisi nisl, scelerisque eu euismod faucibus, scelerisque et lectus. Maecenas consectetur tristique justo ut venenatis. Nulla facilisi.
<style>
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: dimgray;
}
h1
{
font-size: 16pt;
color: steelblue;
}
h2
{
font-size: 14pt;
color: cadetblue;
}
</style>
This then gets processed to the following HTML:
This is a level 1 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque nec ipsum ultrices ultricies et a tellus. Quisque molestie leo purus, vitae imperdiet orci. Pellentesque mauris turpis, eleifend at lobortis eget, lacinia vitae lectus. Praesent nec elit nunc, nec molestie nisl. Suspendisse facilisis mi vitae nisi sollicitudin ut imperdiet elit rhoncus.
This is a level 2 heading
Etiam interdum cursus purus, ut pharetra enim adipiscing faucibus. Nulla malesuada aliquam sollicitudin. Integer imperdiet accumsan iaculis. Quisque fermentum, lorem condimentum convallis auctor, erat sapien egestas sem, et rutrum diam nunc eu mauris.
This is a level 2 heading
Etiam quis urna et velit euismod mollis. Morbi congue orci eu purus facilisis id hendrerit dui malesuada. Nulla nisi nisl, scelerisque eu euismod faucibus, scelerisque et lectus. Maecenas consectetur tristique justo ut venenatis. Nulla facilisi.
Now you don’t have to add this every time if you create your own action. You could hard code it into the action, or you could do like I did in the "TAD-Copy As Rich Text” and keep it in a tag definition in the action to make it a little easier to maintain.
One additional point to note is that you mention email as one of the places you are copying to. There have been several discussions in the past on challenges with how apps interpret and transform rich text. I’ve included a couple of links below so you know what sorts of challenges people have bumped into in the past. They cannot always be worked around as e-mail clients can be rather opinionated on the formatting front.
In the CSS I used above, I set the base size as 12 pt for the body text. I set the H1 as 16 pt and the H2 as 14 pt.
In HTML parlance, a title is part of the page data and is not part of the page content so it does not have a font size.
In Drafts, the title is the first line of the draft. When converted from Markdown to HTML it would be converted as body text … unless you prefix it with some octothorps or underline it, in which case it is going to become the heading level specified by your Markdown syntax, and converted accordingly when transformed into HTML. So the title is simply a range within the draft, not a particular type of content.
That being said, you could use HTML syntax on that first line and specify a class for the heading or content that you could then style differently … but I don’t want to add confusion. Best to start out with the very basics on the CSS side first.
Notes:
There is also the option for a custom version of the action to apply HTML to the title and process it in much the same way you could move the style block into the action.
Drafts has provision for external files, and the CSS could be held outside of an action entirely.
You set this via CSS not the processor. The processor is processing a string of text. There are some settings you can specify, but none of them are changing the base font.
In the example I used above I set the font-family for the body text. This is then inherited by the other elements contained in the body. The font-family is just an ordered list of fonts to try. It is good practice to include more than one. I would suggest just taking what I had above and swapping the order to put Helvetica first:
font-family: Helvetica, Arial, sans-serif;
I think that covers all of your points, but Ido follow up if you get stuck.
“Thank you” seems so insufficient for all of that help you provided. I am really grateful. That was so clear, and the pointers to the extra resources was very helpful.
And yes, you were right, the action I was referring to was “Copy as Rich Text” from Agile Tortise. I am also a Pro subscriber, and can modify / edit Actions.
I’m going to dive into CSS and let you know how I make out. This is exciting.
You might find this example action a good starting place, as well. It is not for putting rich text in the clipboard, but shows building basic HTML with adjustable font sizes for a preview:
Hi @sylumer, I learned a LOT from the W3 Schools site you recommended. Very helpful. I’m running into a new problem, and I’m not sure what I’m doing wrong. To try to simplify things, here’s what I did:
I took the example you wrote above and placed it into a new Draft note,
I changed the font-family to Calibri, and it renders exactly as I want
I dowloaded the Thought Asylum actions (and action groups), made a Duplicate of TAD - Copy as Rich Text, and changed the font-family to Calibri (with Aptos, and Arial as backups)
I removed the CSS styling from your sample note
When I use the TAD - Copy as Rich Text (duplicate) action on your sample note (with the CSS removed), and then paste the result into TextEdit, it is using Helvetica Neue.
When I paste it into MacOS Mail, it is also Helvetica Neue.
I changed margin, padding, background-color, line-spacing, and those seem to survive the copy/paste, but I can’t figure out how to get the font-family to preserve on the paste.
OK, to be fair, I tried a lot of different things, including writing a whole CSS stylesheet (initially in a script in the Preview Action, and then as an Action Tag referencing an external CSS stylesheet as you suggested). When I use this in Preview actions seem to work properly, including code and block quote stylings. However, whenever I try to use these things in a Clipboard action, I lose the font-family styling. What is weird is that the code style seems to survive (where I change to a monospace font and a light cyan background color), but I lose the overall font-family and I lose the blockquote margin.
I simplified it down to the steps above to demonstrate my problem as clearly as I can.
Is there something about the clipboard action that I’m missing?
It is a little hard to be specific as to the cause without a copy of your action, however, I followed your instructions through to step 5. I don’t use Apple Mail, and I don’t know what changes you actually made in step 7 so I can’t reproduce them.
# This is a level 1 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque nec ipsum ultrices ultricies et a tellus. Quisque molestie leo purus, vitae imperdiet orci. Pellentesque mauris turpis, eleifend at lobortis eget, lacinia vitae lectus. Praesent nec elit nunc, nec molestie nisl. Suspendisse facilisis mi vitae nisi sollicitudin ut imperdiet elit rhoncus.
## This is a level 2 heading
Etiam interdum cursus purus, ut pharetra enim adipiscing faucibus. Nulla malesuada aliquam sollicitudin. Integer imperdiet accumsan iaculis. Quisque fermentum, lorem condimentum convallis auctor, erat sapien egestas sem, et rutrum diam nunc eu mauris.
## This is a level 2 heading
Etiam quis urna et velit euismod mollis. Morbi congue orci eu purus facilisis id hendrerit dui malesuada. Nulla nisi nisl, scelerisque eu euismod faucibus, scelerisque et lectus. Maecenas consectetur tristique justo ut venenatis. Nulla facilisi.
I don’t have Calibri on my Mac, so it defaulted to Arial when I pasted to TextEdit - which is what I would expect. No sign of Helvetica Neue for me.
Maybe start with a comparison of your CSS to the starting CSS, or using the action I used and checking the results. But, based on the changes I could replicate from your instructions, it worked for me on my Mac.
OK, there’s definitely something wrong on my side.
I downloaded your new Action that you just created for me, ran it on my draft, and pasted the text into TextEdit, and it came out Helvetica Neue. Same with MacOS Mail.
I noticed the default font in TextEdit was Helvetiva Neue so I change it to Tahoma. Quit & re-launched Text Edit, switched to Drafts, re-ran your latest action, pasted, and it came out Helvetiva Neue. Somewhere, somehow, not matter what the default fonts in my apps are set to, the clipboard seems to be changing them to Helvetica.
I am using Alfred (and have the clipboard history turned on), so I turned that off and tried again; same result. Helvetica keeps showing up.
The “Preview” actions all show Calibri fine; it’s the clipboard action that seems to be giving me the problem.
By the way, I should just “take the win” and be happy it is outputting in Helvetica, like I originally asked. But… that fact that it isn’t honoring my other font choices means something is wrong, and that bugs me, so I’m trying different fonts until I can chase down whatever it is I’m missing.
The mystery deepens. I changed the font-family in my CSS to “Avenir Next” and when I use the TAD - Copy as Rich Text action, and then paste into TextEdit (and MacOS Mail), the rendered MarkDown shows up as Avenir Next. It seems to be an issue specifically with certain fonts on my system. Sometimes I am my own worst enemy…
Is there any commonality in the font files and behaviours? e.g. file type. You can view your font files in Finder if you open Font Book, right click on a font, and select to view in Finder.
It seems to be an issue specifically with certain fonts on my system. Sometimes I am my own worst enemy…