Very narrow text columns when viewed in Outlook/Office365

[nfleisher]

I'm encountering an odd issue when someone replies to a message of mine that I've created with org-msg: once a reply is initiated, the original message text gets compressed into a very narrow column when viewed in Outlook/Office365 on the web. A screenshot is included below.

I'm using the latest org-msg with mu4e 1.4.10. The org-msg configuration is the default one suggested in the README; mail-user-agent is set to mu4e. I've tried setting/unsetting mu4e's format=flowed support, but that doesn't seem to make a difference.

Any idea what could be causing this? Other clients (Gmail, mu4e, etc) are not afflicted by this viewing problem. But Outlook/Office365 is my workplace default for email, so I would love to understand how to fix this.

[jeremy-compostella]

Hi,

I never saw such an issue. The default CSS included in org-msg will limit the line length to 100 characters. Maybe this poorly interpreted and restored by Outlook leading to this weird behavior. I would suggest removing (max-width . "100ch") from org-msg-default-style and re-evaluate this variable and the org-msg-enforce-css variable.

Regards, Jeremy

[nfleisher]

It looks like creating a modified style with (max-width . "100ch") removed has indeed solved the problem. Many thanks!

[baracunatana]

@nfleisher I'm facing a similar issue. Would you mind sharing how you customized org-msg-default-style. Naively, I just removed (max-width . "100ch") from org-msg-default-style but it didn't work.

[nfleisher]

Sure, here is the customized style I've been using (which comments out max-width and has some other cosmetic changes from the default style shipped with org-msg). You can make org-msg use it by setting (setq org-msg-enforce-css nf-org-msg-style).

(defconst nf-org-msg-style
  (let* ((font-family '(font-family . "sans-serif"))
     (font-size '(font-size . "100%"))
     (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)))
  `((del nil (,@font (color . "grey") (border-left . "none")
          (text-decoration . "line-through") (margin-bottom . "0px")
          (margin-top . "10px") (line-height . "1.5")))
    (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 nil ((padding-left . "5px") (margin-left . "10px")
             (margin-top . "20px") (margin-bottom . "0")
             (border-left . "3px solid #ccc") (font-style . "italic")
             (background . "#f9f9f9")))
    (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 . "1.5")
          ,@inline-src
          (margin . "0px")
          (font-size . "80%")
          (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 . "110%")
         ,font-family))
    (h3 nil ((margin-bottom . "0px") (text-decoration . "underline")
         ,color (font-size . "125%")
         ,font-family))
    (h2 nil ((margin-top . "20px") (margin-bottom . "20px")
         (font-style . "italic") ,color (font-size . "125%")
         ,font-family))
    (h1 nil ((margin-top . "20px")
         (margin-bottom . "0px") ,color (font-size . "125%")
         ,font-family))
    (p nil ((text-decoration . "none") (margin-bottom . "0px")
        (margin-top . "15px") (line-height . "1.5") ,font-size
        ,font-family))
        ;; ,font-family (max-width . "100ch")))
    (div nil (,@font (line-height . "1.5"))))))