Carbon – Create images of your source code(github.com)
github.com
Carbon – Create images of your source code
https://github.com/dawnlabs/carbon
53 comments
Ugh, making accessible plain text into inaccessible images. As a blind person I really hate this.
It's actually accessible. take a look at this tweet and inspect the image. all the code is in the alt attribute. So they have thought of that. This will only be if you tweet it from their webapp though.
It would be cool if there was a way to copy paste the text easier.
It would be cool if there was a way to copy paste the text easier.
>It would be cool if there was a way to copy paste the text easier.
Like, just using text? Maybe even send it through a syntax highlighter first?
I can't be the only one that was irked at Amazon for spending years making their product promo pages or prominent buttons as hard-coded images instead of text. Horribly inaccessible, over the top, looks terrible on HiDPI devices, looks terrible on a non-Mac because it was clear that their designers were using OS X font rendering, so it looked totally inconsistent.
My favorite part is being on mobile and having to scroll left and right to see the image, or the image has been fit-to-scale is flatly impossibly too small to read.
I feel stodgy, but this entire effort is annoying. Just like the stupid GIFs on project READMEs that play too slow or too fast and have to be watched 50 times to grasp what's going on. Meanwhile asciinema exists and is superior in every way (seekable, pausable, text-selectable, etc).
Like, just using text? Maybe even send it through a syntax highlighter first?
I can't be the only one that was irked at Amazon for spending years making their product promo pages or prominent buttons as hard-coded images instead of text. Horribly inaccessible, over the top, looks terrible on HiDPI devices, looks terrible on a non-Mac because it was clear that their designers were using OS X font rendering, so it looked totally inconsistent.
My favorite part is being on mobile and having to scroll left and right to see the image, or the image has been fit-to-scale is flatly impossibly too small to read.
I feel stodgy, but this entire effort is annoying. Just like the stupid GIFs on project READMEs that play too slow or too fast and have to be watched 50 times to grasp what's going on. Meanwhile asciinema exists and is superior in every way (seekable, pausable, text-selectable, etc).
Unfortunately the web platform has failed to provide a sensible way to embed HTML content, so images and videos are how people actually share things. You can take an image and save it to your device and share it to any social media service without doing anything special. You just can't get that experience with asciinema or any other sort of rich format. It's a real bummer.
Hyperlinks work just fine though. Who saves an image of code? For what?
Too bad asciinema doesn't work on Windows/PowerShell.
The person with accessibility problems just told you that it is a potential accessibility issue. Perhaps we should ask them whether alt text will help, before telling them that it will.
tarboreus, what's your experience with alt text for this kind of thing?
In a related manner, I'd actually be curious to hear in general about other things we do/don't do that makes life more difficult for blind people on the web.
tarboreus, what's your experience with alt text for this kind of thing?
In a related manner, I'd actually be curious to hear in general about other things we do/don't do that makes life more difficult for blind people on the web.
This is the exact situation alt text is designed for. If you use alt text properly and it still isn't handicap accessible, it's not your fault full stop.
If accessibility is the exact situation alt text is designed for, and it works for the most part, who is to blame for it not being accessible if not the person putting inaccessible text in there? Merely providing something is not equivalent to providing a good solution.
By my understanding (as a sighted person who has relatively zero experience using such features) alt text is for short pieces of text that might aid in communication of an image to a blind person. I have even less understanding on whether or not dumping a chunk of code in there would be at all useful, and I expect very few sighted persons would know better. Hence my complaint, and hence my question.
By my understanding (as a sighted person who has relatively zero experience using such features) alt text is for short pieces of text that might aid in communication of an image to a blind person. I have even less understanding on whether or not dumping a chunk of code in there would be at all useful, and I expect very few sighted persons would know better. Hence my complaint, and hence my question.
Yes, "alt" attribute is for short descriptions. From the w3.org site:
"The alt text should be the most concise description possible of the image’s purpose. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods discussed in complex images."
The alternatives for long descriptions are the "longdesc" attribute, "figure" with "figcaption" tag or the "aria-describedby".
https://www.w3.org/WAI/tutorials/images/complex/
"The alt text should be the most concise description possible of the image’s purpose. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods discussed in complex images."
The alternatives for long descriptions are the "longdesc" attribute, "figure" with "figcaption" tag or the "aria-describedby".
https://www.w3.org/WAI/tutorials/images/complex/
True, but I kind of get where their headspace is here. It feels like a weird jaunt to rely on alt tags for what is ultimately just simulacrum of what exists in the alt tags considering that-for the sake of accessibility-going with plain text to begin with probably makes a lot more sense.
If it has alt text, we can't ask for much more. But typically pictures on Twitter don't have alt text. I've perhaps encountered an image with alt text once. But I'm glad that at least there will be alt text if they use it in the web app.
In short, if the image has alt text, it's fine. But this seems likely to be used in ways that mean uploads without alt text.
In short, if the image has alt text, it's fine. But this seems likely to be used in ways that mean uploads without alt text.
I'm not blind, and hate it for the same reason. I could see implementing a code snippet service (ala gist) with Twitter Cards API support. The card image would likewise be useless to folks with vision impairment, and useless to everyone for cut and paste. But the link would at least connect users to an accessible and copyable text version.
Do you dislike paintings of Oranges, the human body on exhibition or other such pieces if art?
Paintings, and Prints, tend to take real world subjects and artistically adapt their native format into a 2d perspective.
This transformation typically removes fidelity oringinally found in the subject. Eg, you can't (or shouldn't) eat a painting of an orange, nor could one typically feel the texture of an orange via a painting.
Alternatively there may be some benefits to the transformation. I'm not sure but in this case one may be able to display more content via the image on Twitter, then transmitted via the oringinal text format due to tweet length "string" hard limits vs image size limitations.
Paintings, and Prints, tend to take real world subjects and artistically adapt their native format into a 2d perspective.
This transformation typically removes fidelity oringinally found in the subject. Eg, you can't (or shouldn't) eat a painting of an orange, nor could one typically feel the texture of an orange via a painting.
Alternatively there may be some benefits to the transformation. I'm not sure but in this case one may be able to display more content via the image on Twitter, then transmitted via the oringinal text format due to tweet length "string" hard limits vs image size limitations.
But code is text, it's about keeping the original text accessible as an alt. Which Carbon actually does apparently.
The VSCode plugin "polacode" makes nice looking images of code using your current theme. It's really nice. https://github.com/octref/polacode
Yes! Did not know that plugin. Just tested it, seems to work really well. Thank you.
Did you feel there were not enough projects out there already named carbon?
Jesus, at least change the name. Carbon is [already a thing](https://github.com/graphite-project/carbon).
Jesus, at least change the name. Carbon is [already a thing](https://github.com/graphite-project/carbon).
To me Carbon makes sense, since it's like a 'carbon copy' of the code. Most project names are not unique words. And I for one have a hard time picking names for projects. Just curious, but what would you think would be a better name for this project?
Anything, as long as it has < 100 google results.
At least, plonk the project name into the github search, and see if there are existing projects using exactly that name. I found at least EIGHT other projects with more then 100 stars already named "carbon". At least one of them is VERY widely used (carbon, which is the time-series backend for graphite).
Basically, you're actively making life harder for users when you decide to name-collide with existing active projects.
At least, plonk the project name into the github search, and see if there are existing projects using exactly that name. I found at least EIGHT other projects with more then 100 stars already named "carbon". At least one of them is VERY widely used (carbon, which is the time-series backend for graphite).
Basically, you're actively making life harder for users when you decide to name-collide with existing active projects.
It would be interesting if Google providing away to search for unlikely phrases. Maybe their data structures would allow some sort of direct enumeration based on inverse tf-idf.
Are there any twitter-clones that allow you to post markdown?
Can't help but weep for the excess bandwidth of sharing code as a .png -.-
Can't help but weep for the excess bandwidth of sharing code as a .png -.-
You will be losing the audience though
Please show me source code as plain text. My fonts and colour preferences are better than yours.
Just so you know, your project has a pretty big name collision with a PHP library (called Carbon)[1]. It extends PHP's DateTime API.
I know that there probably aren't a huge amount of PHP devs around here, but one of, if not the most, popular PHP libraries in production.
It's not a huge deal I guess, not being in the same space, but I just thought you should know.
I know that there probably aren't a huge amount of PHP devs around here, but one of, if not the most, popular PHP libraries in production.
It's not a huge deal I guess, not being in the same space, but I just thought you should know.
The quality of the text rendering could really be improved by using subpixel render https://en.wikipedia.org/wiki/Subpixel_rendering. Most desktop apps do this. Your browser does it. Your terminal probably does it. VSCode does it. Even the canvas tag in browsers supports this.
Basically, every place you're likely to read code is going to look better than the images generated with this.
Basically, every place you're likely to read code is going to look better than the images generated with this.
Subpixel rendering requires knowing the pixel orientation (are sub pixels left to right or top to bottom) and the order they are in (rgb vs bgr) and finally assume that the display screen is in real full color mode, and not some limit color space like YUV420.
Which is why it's insane that Windows 8.1 broke the cleartype tuner and it's still broken in 10 to this day.
See Noel's comment (at the bottom) of https://social.technet.microsoft.com/Forums/en-US/768bd013-c...
See Noel's comment (at the bottom) of https://social.technet.microsoft.com/Forums/en-US/768bd013-c...
Yes, there's something horribly persistently wrong there; all Metro apps render conspicuously ugly fonts for me now.
Didn’t they invent sub pixels?
Really? This honestly has to be one of the most useless things I've seen implemented.
Legitimately what is the point?
Legitimately what is the point?
So basically this adds some skeumorphic mac buttons ??? and a drop shadow?
Skeuomorphic is more than a tired cliche buzzword for pretend designers that want to voice their disagreement. It actually is a style for ornamental designs that mimic real-world things.
Three flat-colored circles in a row on a flat surface do not look like realistic items at all, they are actually the opposite, a stylized representation of a real life object.
Three flat-colored circles in a row on a flat surface do not look like realistic items at all, they are actually the opposite, a stylized representation of a real life object.
in this context, it's being used more in the "spirit" than in the traditional direct physical resemblance.
In this context, the "spirit" is indicating that simulating a "mac window", which serves no major purpose in elucidating source code, which is analogous (but not strictly identical, of course) to simulating physical buttons in another context.
In this context, the "spirit" is indicating that simulating a "mac window", which serves no major purpose in elucidating source code, which is analogous (but not strictly identical, of course) to simulating physical buttons in another context.
So it’s the same, except it’s something else completely.
Yes, the Mac buttons really seem unnecessary and a subtle advert and bias towards Macs.
How does this project have 13k stars?!
13,000 people clicked on the star button.
Nice work - Just yesterday I tried typing out 5 lines of Ruby code in a Facebook comment in a group I belong to, and the if...end block had all the leading spaces trimmed out, which made it look weird and negated the point I was trying to make.
Something like Carbon would have made the illustration a lot better, and only added a few seconds to the process.
Something like Carbon would have made the illustration a lot better, and only added a few seconds to the process.
I did make something similar before, but I guess mine is more inferior in many ways.
https://altbdoor.github.io/code-screen/
https://altbdoor.github.io/code-screen/
It's quite annoying that the source code editor doesn't display the edit cursor - makes editing text exceedingly difficult.
Any chance you could add display of that cursor back in?
Any chance you could add display of that cursor back in?
This would be good to use for Medium posts, since the built in code formatting is so bad, especially, especially on the mobile app, since it won’t rotate to landscape.
It would be nice if you could select text in the SVG images.
Just like TermToSVG ? https://github.com/nbedos/termtosvg
just...take a screenshot of your editor
Some editors also have option to copy / paste with rich text formatting. This way code can be copied to mail client with all the colors/bold/italics/sizes etc.
Why not just take a screenshot, i dont get it.
I similarly don’t get the enormous popularity of Carbon but it offers two things that a screenshot doesn’t:
• It frames the code properly; this is an aesthetic choice, and certainly subjective, but many people seem to prefer it. At the very least, it provides consistent, even margins around the code which are fiddly to achieve with a screenshot.
• If you paste a normal PNG screenshot on Twitter, it gets converted to JPEG and downsampled, creating ugly block artefacts around the text and changing the colours. You can avoid this by making at least one pixel of the PNG partially transparent. Carbon does this automatically (but you can of course do it manually with a screenshot).
• It frames the code properly; this is an aesthetic choice, and certainly subjective, but many people seem to prefer it. At the very least, it provides consistent, even margins around the code which are fiddly to achieve with a screenshot.
• If you paste a normal PNG screenshot on Twitter, it gets converted to JPEG and downsampled, creating ugly block artefacts around the text and changing the colours. You can avoid this by making at least one pixel of the PNG partially transparent. Carbon does this automatically (but you can of course do it manually with a screenshot).
what a perfect compliment to yesterday's post about PaintIDE.