Three styling suggestions

[jonkri]

Thanks for a great library! :muscle:

Without knowing anything about why the CSS code has been written the way it is, I have three CSS-related suggestions. :slightly_smiling_face:

1. Use font stacking to fall back to sans-serif when Arial is not available (something like font-family: Arial, sans-serif;). Perhaps Bootstrap's font stack could be an idea?
2. Respect the default font size (and avoid setting a relatively/unconventionally small font size). Perhaps we can simply use 100%/1em as a starting point and use relative font sizing.
3. Don't set the list-style-type property square. Discs are more conventionally for unordered lists.

[Perangelot]

Thanks for your suggestion! I fear this repo is not maintained anymore. Do you happen to have a .css file flying around you could post here?

[jonkri]

Thanks for your suggestion! I fear this repo is not maintained anymore. Do you happen to have a .css file flying around you could post here?

Sorry, I don't. (I don't use this package anymore.)

[sgpthomas]

What do you use instead?

[mclearc]

@Perangelot It isn't hard to make your own. You can just modify the default style like so...

  ;; Org HTML Styling
  (defconst cpm-org-msg-style
    (let* ((font-family '(font-family . "font-family: \"Helvetica\", \"Arial\", sans-serif"))
	       (font-size '(font-size . "12pt"))
	       (font `(,font-family ,font-size))
	       (line-height '(line-height . "1.5"))
	       (bold '(font-weight . "bold"))
	       (theme-color "#0071c5")
	       (color `(color . ,theme-color))
	       (table `(,@font (margin-top . "0px")))
	       (ftl-number `(,@font ,color ,bold (text-align . "left")))
	       (inline-modes '(asl c c++ conf cpp csv diff ditaa emacs-lisp
			                   fundamental ini json makefile man org plantuml
			                   python sh xml))
	       (inline-src `((color . ,(face-foreground 'default))
		                 (background-color . ,(face-background 'default))))
	       (code-src
	        (mapcar (lambda (mode)
		              `(code ,(intern (concat "src src-" (symbol-name mode)))
			                 ,inline-src))
		            inline-modes))
	       (base-quote '((padding-left . "5px") (margin-left . "10px")
		                 (margin-top . "10px") (margin-bottom . "0")
		                 (font-style . "italic") (background . "#f9f9f9")))
	       (quote-palette '("#324e72" "#6a3a4c" "#7a4900" "#ff34ff"
			                "#ff4a46" "#008941" "#006fa6" "#a30059"
			                "#ffdbe5" "#000000" "#0000a6" "#63ffac"))
	       (quotes
	        (mapcar (lambda (x)
		              (let ((c (nth x quote-palette)))
		                `(blockquote ,(intern (format "quote%d" (1+ x)))
				                     (,@base-quote
				                      (color . ,c)
				                      (border-left . ,(concat "3px solid "
						                                      (org-msg-lighten c)))))))
		            (number-sequence 0 (1- (length quote-palette))))))
      `((del nil (,@font (color . "grey") (border-left . "none")
	                     (text-decoration . "line-through") (margin-bottom . "0px")
	                     (margin-top . "10px") (line-height . "11pt")))
        (a nil (,color))
        (a reply-header ((color . "black") (text-decoration . "none")))
        (div reply-header ((padding . "3.0pt 0in 0in 0in")
		                   (border-top . "solid #e1e1e1 1.0pt")
		                   (margin-bottom . "20px")))
        (span underline ((text-decoration . "underline")))
        (li nil (,@font ,line-height (margin-bottom . "0px")
	                    (margin-top . "2px")))
        (nil org-ul ((list-style-type . "disc")))
        (nil org-ol (,@font ,line-height (margin-bottom . "0px")
		                    (margin-top . "0px") (margin-left . "30px")
		                    (padding-top . "0px") (padding-left . "5px")))
        (nil signature (,@font (margin-bottom . "20px")))
        (blockquote quote0 ,(append base-quote '((border-left . "3px solid #ccc"))))
        ,@quotes
        (code nil (,font-size (font-family . "monospace") (background . "#f9f9f9")))
        ,@code-src
        (nil linenr ((padding-right . "1em")
		             (color . "black")
		             (background-color . "#aaaaaa")))
        (pre nil ((line-height . "12pt")
	              ,@inline-src
	              (margin . "0px")
	              (font-size . "9pt")
	              (font-family . "monospace")))
        (div org-src-container ((margin-top . "10px")))
        (nil figure-number ,ftl-number)
        (nil table-number)
        (caption nil ((text-align . "left")
		              (background . ,theme-color)
		              (color . "white")
		              ,bold))
        (nil t-above ((caption-side . "top")))
        (nil t-bottom ((caption-side . "bottom")))
        (nil listing-number ,ftl-number)
        (nil figure ,ftl-number)
        (nil org-src-name ,ftl-number)

        (table nil (,@table ,line-height (border-collapse . "collapse")))
        (th nil ((border . "1px solid white")
	             (background-color . ,theme-color)
	             (color . "white")
	             (padding-left . "10px") (padding-right . "10px")))
        (td nil (,@table (padding-left . "10px") (padding-right . "10px")
		                 (background-color . "#f9f9f9") (border . "1px solid white")))
        (td org-left ((text-align . "left")))
        (td org-right ((text-align . "right")))
        (td org-center ((text-align . "center")))

        (div outline-text-4 ((margin-left . "15px")))
        (div outline-4 ((margin-left . "10px")))
        (h4 nil ((margin-bottom . "0px") (font-size . "12pt")
                 (text-decoration . "underline") ,font-family))
        (h3 nil ((margin-bottom . "0px") ,color (font-size . "12pt")
	             ,font-family))
        (h2 nil ((margin-top . "20px") (margin-bottom . "20px")
                 ,color (font-size . "13pt") ,font-family))
        (h1 nil ((margin-top . "20px")
	             (margin-bottom . "20px") ,color (font-size . "16pt")
	             ,font-family))
        (p nil ((text-decoration . "none") (margin-bottom . "0px")
	            (margin-top . "10px") (line-height . "1.25") (padding-bottom . "5px") ,font-size
	            ,font-family))
        (div nil (,@font (line-height . "1.25"))))))
  (setq org-msg-enforce-css cpm-org-msg-style)

[jonkri]

What do you use instead?

I never found a satisfying solution for e-mail in Emacs, I'm afraid, so I'm back to a regular e-mail client.