Jump to content

Markdown block text with site-identical styles renders with different anti-aliasing

Recommended Posts


I've created some custom page navigation links using a markdown block on a few pages on my site. In the mardown I've assigned css classes which tie back to classes I've defined in the Custom CSS pane. The styles I've defined are to make the text identical in appearance and behaviour to that of the site menu in the Wells template. Everything works perfectly, except that when viewing the live site the text created by the markdown block renders with different anti-aliasing to the text in the menu, which results in it appearing darker (to the trained eye) despite being the same colour value.

The issue seems to be related to styling defined within squarespace which I can't find using a DOM inspector. When I view the site in the editor (even with the full-browser view, i.e. menu hidden) the text is rendered identically in both places. However, as I said above, on the live site (i.e. not logged in) a different anti-aliasing is applied to the custom markdown text. This leads me to believe there's some styling defined by a parent (or script?) in the DOM which is only being passed on to my custom text when viewed from inside the site editor "container".

See the attached blown-up screenshot as a reference (squarespace defined menu on the left of the green line, with my custom text on the right), you may need to view at 100% to see how the edge pixel shading is different left to right.

Please send an invoice for the time you spend replying to squarespace support. They were no help providing information about their own product here and instead referred me to this forum so you'd do their job for them.

Thanks very much for any help

squarespace text colour rendering issue.png

Link to comment
  • Replies 0
  • Views 433
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.