Unexpected CSS img styling

[kaihendry]

This is in a similar vein to https://github.com/gatsbyjs/gatsby-starter-blog/issues/16 & as frustratingly tweeted https://twitter.com/kaihendry/status/778166191860936704 I don't expect style to be set here.

What is the good reason RE https://twitter.com/kylemathews/status/778262611058053126 ?

I wasted a serious amount of time over this margin-bottom:1.66667rem. In hindsight the issue was staring at me from Chrome dev tools, but I really didn't expect typography.js to setup so much CSS. I also resent it's uglyfying my HTML's header and not a separate file too.

I really don't quite understand how a modern day dev is supposed to track cascading CSS rules and override & normalise things, since it seems like I can't assume sane defaults anymore.

[dardub]

Is there a way to turn off this margin and max-width: 100% in the config?

I could only see setting this globally for all images in blogs. On other sites it interferes when trying to use image as style elements.

img {
  max-width: none !important;
  margin-bottom: 0 !important;
}

But I think this could lead to flakey behavior.

[dardub]

Well !important isn't necessary if TypographyStyle is declared before other styles. I swear before the typography style was overriding my webpack loaded styles. But able to reproduce now.

[DamianPereira]

Is there any documentation on what typography.css styles apart from text elements? I've just checked and it seems to reset lots of element's margin/padding to 0 except for margin-bottom which is set to 1.45rem. Elements like form, address and so are styled. What's the reasoning for this? It seems arbitrary and breaks my layout.

I did not expect img styling at all, and I had to search for a while before I found where the margin-bottom was coming from (suspected font awesome CSS, or normalize, but not typography).

[lobobabysaurus]

I'm dealing with the same problem where I wanted consistent text styling but it made my images super small with a bunch of padding in the process. Is there any clean way to disable the way it overrides image css while still getting consistent text formatting benefits?

[alexanderzone]

This issue is coming up on Google so I wanted to post the solution:

When you intialize the Typography.js object you can provide overrideStyles

new Typography({
  overrideStyles: ({ rhythm }) => ({
    img: {
        marginBottom: 0
      }
  })
})

https://kyleamathews.github.io/typography.js/

[rykener]

The documentation doesn't mention this though, so how are we supposed to figure this out? @KyleAMathews

[don-esteban]

I'll hook on this post and refer to the solution of @aamistak. As I understand, Typography defines some default rules for tables. One is: td {text-align: left}. In Markdown we can specify cell alignments with colons (:). |---:| means right align. The Markdown-Plugin generates something like this <td align="right">100</td>.

This won't work due to Typographies inline style td {text-align: left}. Overriding won't help either. I should completely remove this style rule.

Is there a way I can do that? I would need something like this (pseudo code)

new Typography({
  overrideStyles: ({ rhythm }) => ({
    td: {
        textAlign: false|null // something to remove the complete rule.
      }
  })
})

[don-esteban]

Found this issue and a workaround. https://github.com/KyleAMathews/typography.js/issues/244#issuecomment-644596619

It's exactly I was talking about. This will result in a feature request to allow removing rules.