Capturing text with canvas

Our readers, and some of our journalists, often share screenshots of articles on social media to bypass character counts; but they don't always cite their source or link back to the original article. Providing an image shareable in one click from text selection would benefit both our users, for the ease of sharing; and us, as we can ensure we include sources automatically in the image.

Example of a tweet that will indicate context only when expanded.
Example of a tweet without any other reference to the FT than the background colour.

Cite'n'Snap in a nutshell

Platforms like Medium allow their users to share snippets of selected text to social media. When copying text from our website, our readers are presented with the following text when they want to paste it:

High quality global journalism requires investment. Please share this article with others using the link below, do not cut & paste the article. See our T&Cs and Copyright Policy for more detail. Email to buy additional rights.

If we helped them create an image from the text then want to share, we could include this message, as well as the original link and author for the article they're quoting. To create this image, we used an HTML5 canvas, that we can style similarly to the website and from which we can generate a JPG or PNG.

A proof of concept for Cite'n'Snap is available on GitHub.

Ideal scenario: Twitter integration

In an ideal scenario, we would generate an image and share it in one click. However when it comes to the sharing stage, and particularly on Twitter, we are faced with several restrictions:

  • The 'tweet' intent endpoint of the Twitter API, does not support images, only text. In this case, the image would need to be a self-hosted link.
  • A Twitter card is not an option as the content is unique per page, and cached; the shared quote would change over time.
  • The image could be uploaded publicly (private images don't render in tweets) to Twitter and shared in a new tweet, but this would render most FT content public and possibly create too much noise.


As the experiment progressed, it became apparent that the obstacles to a one-click text sharing wouldn't lie with the image generation, but with the 3rd-party platforms.

Going forward, we can look at adding metadata to the images generated (date, author, source, etc.) and also generate alternative text to the image (although, on Twitter, this feature needs to be manually enabled by users) to improve accessibility.