Badges inside tables render poorly on mobile devices.

[wlandau]

Example

• badges/shields#1470
• ropensci/drake#203
• https://github.com/ropensci/drake/blob/218135274e47f213c9020c5d152e3258c8f760b9/README.md

Expectation

Result

What was attempted

| Release | Usage | Development |
|:--------|:------|:------------|
| [![JOSS](http://joss.theoj.org/papers/10.21105/joss.00550/status.svg)](https://doi.org/10.21105/joss.00550) | [![Licence](https://img.shields.io/badge/licence-GPL--3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0.en.html) | [![AppVeyor](https://ci.appveyor.com/api/projects/status/4ypc9xnmqt70j94e?svg=true)](https://ci.appveyor.com/project/ropensci/drake) |
| [![rOpenSci](https://badges.ropensci.org/156_status.svg)](https://github.com/ropensci/onboarding/issues/156) | [![minimal R version](https://img.shields.io/badge/R%3E%3D-3.2.0-blue.svg)](https://cran.r-project.org/) | [![Travis](https://travis-ci.org/ropensci/drake.svg?branch=master)](https://travis-ci.org/ropensci/drake) |
| [![CRAN](http://www.r-pkg.org/badges/version/drake)](http://cran.r-project.org/package=drake) | [![downloads](http://cranlogs.r-pkg.org/badges/drake)](http://cran.rstudio.com/package=drake) | [![Codecov](https://codecov.io/github/ropensci/drake/coverage.svg?branch=master)](https://codecov.io/github/ropensci/drake?branch=master) |
| [![Zenodo](https://zenodo.org/badge/82609103.svg)](https://zenodo.org/badge/latestdoi/82609103) | |

[Feder1co5oave]

This is caused by the CSS and the markdown converter used by github, which is not marked.

[wlandau]

In that case, where do you recommend I submit an issue?

[joshbruce]

@wlandau: Thanks. First let me say, I'm sorry hear that...having said that, I don't think the person in the issue you linked to in the badges library is correct regarding how Markdown renders tables as being the problem...that's equivalent to saying HTML sucks; because that's all Markdown and Marked do. I'm also not sure if GitHub uses the Marked library; so, most likely not us.

One test to run would be to actually write the HTML for the table instead of using Markdown. If the badges render the same (with the sketchy scaling) - then it's more likely to be something with the CSS (like @Feder1co5oave mentioned)...if it's the GitHub CSS, then the issue would be submitted to GitHub - not sure how to do that one (if you find out, let me know). While GitHub may suppress the <style> element - you should still be able to do inline styles on an element. Having said that, the badges are generated automatically, which brings us to...

Or it could be the badges...specifically, the style="max-width:100%" property, which should be relative to the table cell. (I have no idea why desktop and mobile versions would be different mind you.)

I tried to emulate a mobile device in my browser and could not duplicate; so, not sure what can be done to test here. Having said that, when I change the inline style to height=100px I get the following:

Which leads me to believe it's the first comment on the badges issue - proportional scaling.

So, don't use a table to build your grid (?? - not tested but, something like this per unit):

<div style="float: left">
  <h2 style="...">Release</h2>
  <p>[badge]<br>
  [badge]<br>
  [badge]</p>
</div>

Believe GitHub allows HTML in their README Markdown files.

This is semantically correct-ish - you're not actually displaying tabular data (results of a survey, for example). Should give you the side-by-side grid you're looking for, maybe - especially if you set a width on the div and style the header. In theory, using a screen reader, this would read like a sentence (instead of a user having to navigate a table with whatever input device they are using), which brings us to...

And, having said all that, those badges aren't accessibly correct - not sure you really want to use them given you seem to really care about design and your users having a good experience. To be accessible the text-based alternative should describe what the image represents - right now they all say the type of badge (CRAN) instead of what the badge says (CRAN 5.0.0) - and they don't spell out the acronym. (Maybe a different issue to post in that project??). They look neat, but they are not to my esoteric and pedantic level of "anal" when it comes to the web. :) (The badge on the Marked README has the same problem in fact.)

ps. If you think I'm incorrect in that last bit of drivel for some reason, let me know - that way I can stop thinking I know what I'm talking about when it comes to the accessible and semantic web. Seriously.

Closing. Will reopen under the following circumstances:

1. GitHub uses Marked to render its Markdown, AND
2. adjusting inline style of badges has no effect, AND
3. it can be demonstrated that Marked is not properly transforming the Markdown to an HTML table.

Otherwise, it's either the badges or the browser vendors, to be honest. The experiment there, would be to create a table with proportionally scaling images inside a table - outside of GitHub and NOT the badges. If there's a difference, it's the browser vendor - not the badge.

[joshbruce]

ps. Notice the cells in the mobile version are taller. This could be a combination of proportional scaling problem - images in the cell and the cells themselves.

[wlandau]

Thanks for all the advice, @joshbruce. Unfortunately, GitHub suppresses CSS. I have even tried <table>s, and all I saw was the source code.

Also, I should say that the README is about an R package, so I can safely assume that the intended audience already knows about CRAN, etc.

[joshbruce]

Fair on the CRAN. Having said that, the accessibility issues is not whether they know what it is - it's about whether the version number is read aloud to a person using a screen reader. In this case, it is supposed to be done by the alt attribute...which does not contain the version number.

Sorry about the styles thing. Wonder why the other inlines styles make it through - maybe that's a gateway to a solution for you. Not sure why the table isn't rendering for you though - that's weird. Maybe test locally (without GitHub)??

Again, doesn't sound like an issue with marked though.