Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Avoid double style attributes on images when height/width is specified #8047

Closed
jdutant opened this issue Apr 28, 2022 · 2 comments
Closed
Labels

Comments

@jdutant
Copy link
Contributor

jdutant commented Apr 28, 2022

HTML writer: depending on unit width/height attributes on image elements are turned into style attributes. But these are not merged with the user's style attribute if there is one. The image tag ends up with two style attributes and the second one (width/height) is ignored.

Pandoc converts pixel height/width attributes on an image to html width/height attributes, but em (and other CSS lengths, I assume) to a style attribute:

pandoc
![](file.jpg){height=100px width=100px}
<p><img src="file.jpg" width="100" height="100" /></p>
pandoc
![](file.jpg){height=10em width=10em}    
<p><img src="file.jpg" style="width:10em;height:10em" /></p>

But the style attribute isn't merged with the user's own if there is one:

pandoc
![](file.jpg){height=10em width=10em style='border: 1px solid black;'}
<p><img src="file.jpg" style="border: 1px solid black;"
style="height:10em;width:10em" /></p>

At least some browsers ignore the second style attribute, so the width/height has no effect. Also, I believe two styles attributes isn't strictly valid html.

Desired behaviour. The style attributes should be merged (adding a ; separator if needed), which would make the behaviour uniform between px and em values.

@jdutant jdutant added the bug label Apr 28, 2022
@jdutant
Copy link
Contributor Author

jdutant commented Apr 28, 2022

The relevant bit of code in the writer is this. I'm not fluent in Haskell, but perhaps moving consolidateStyles up to the imgAttrsToHtml function would do the trick?

imgAttrsToHtml :: PandocMonad m
               => WriterOptions -> Attr -> StateT WriterState m [Attribute]
imgAttrsToHtml opts attr = do
  attrs <- attrsToHtml opts (ident,cls,kvs')
  dimattrs <- toAttrs (dimensionsToAttrList attr)
  return $ attrs ++ dimattrs
  where
    (ident,cls,kvs) = attr
    kvs' = filter isNotDim kvs
    isNotDim ("width", _)  = False
    isNotDim ("height", _) = False
    isNotDim _             = True

dimensionsToAttrList :: Attr -> [(Text, Text)]
dimensionsToAttrList attr = consolidateStyles $ go Width ++ go Height
  where
    consolidateStyles :: [(Text, Text)] -> [(Text, Text)]
    consolidateStyles xs =
      case partition isStyle xs of
           ([], _)    -> xs
           (ss, rest) -> ("style", T.intercalate ";" $ map snd ss) : rest
    isStyle ("style", _) = True
    isStyle _            = False
    go dir = case dimension dir attr of
               (Just (Pixel a)) -> [(tshow dir, tshow a)]
               (Just x)         -> [("style", tshow dir <> ":" <> tshow x)]
               Nothing          -> []

@jgm
Copy link
Owner

jgm commented Apr 28, 2022

You're right, I'll fix it.

@jgm jgm closed this as completed in c1105e6 Apr 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants