Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/transitive-bullshit/puppeteer-render-text

Robust text renderer using headless chrome.
https://github.com/transitive-bullshit/puppeteer-render-text

puppeteer puppeteer-screenshot render text text-to-image

Last synced: 2 months ago
JSON representation

Robust text renderer using headless chrome.

Host: GitHub
URL: https://github.com/transitive-bullshit/puppeteer-render-text
Owner: transitive-bullshit
License: mit
Created: 2018-06-30T15:39:59.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-11-16T19:09:11.000Z (about 1 year ago)
Last Synced: 2024-10-23T14:07:47.983Z (3 months ago)
Topics: puppeteer, puppeteer-screenshot, render, text, text-to-image
Language: JavaScript
Homepage:
Size: 188 KB
Stars: 65
Watchers: 4
Forks: 7
Open Issues: 1
Metadata Files:
- Readme: readme.md
- Funding: .github/funding.yml
- License: license

Awesome Lists containing this project

awesome-puppeteer - puppeteer-render-text - Robust text renderer using headless chrome. (Packages)
awesome-puppeteer-zh - puppeteer-render-text - 使用puppeteer 的强大文本渲染器. (包 / 贡献)

README

        # puppeteer-render-text

> Robust text renderer using headless chrome.

[![NPM](https://img.shields.io/npm/v/puppeteer-render-text.svg)](https://www.npmjs.com/package/chatgpt) [![Build Status](https://github.com/transitive-bullshit/puppeteer-render-text/actions/workflows/test.yml/badge.svg)](https://github.com/transitive-bullshit/puppeteer-render-text/actions/workflows/test.yml) [![MIT License](https://img.shields.io/badge/license-MIT-blue)](https://github.com/transitive-bullshit/puppeteer-render-text/blob/main/license) [![Prettier Code Formatting](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)



  



This module is also available as a [CLI](https://github.com/transitive-bullshit/puppeteer-render-text-cli).

## Why?

ImageMagick is the traditional unix tool to programatically [render text](http://www.imagemagick.org/Usage/text/), and while it works very well for simple use cases, trying to use it to render rich text or html is very difficult. [Pango](https://www.pango.org/) is another option that's been around for ages, but both suffer from archaic syntax and minimal rich text support.

[Puppeteer](https://github.com/GoogleChrome/puppeteer), on the other hand, allows for robust, headless chrome screenshots with best-in-class support for all modern html / text / font features.

**This module makes it easy to use headless chrome to render text + html to images.**

## Features

- built-in [fontfaceobserver](https://fontfaceobserver.com/)

- easily load [google fonts](https://fonts.google.com/)

- optional word-wrap

- main content is just **html**

- styling is done via [**css**](https://www.w3schools.com/jsref/dom_obj_style.asp)

- handles multiple fonts

- thoroughly tested

- includes a [CLI](https://github.com/transitive-bullshit/puppeteer-render-text-cli)

## Install

```bash

npm install puppeteer-render-text

```

## Usage

```js

import { renderText } from 'puppeteer-render-text'

// render text with built-in font and no word-wrap

await renderText({

  text: 'hello world',

  output: 'out0.png',

  style: {

    fontFamily: 'segue ui',

    fontSize: 64

  }

})

// render text with custom google font and word-wrap at 400px

await renderText({

  text: 'headless chrome is awesome',

  output: 'out1.png',

  loadGoogleFont: true,

  width: 400,

  style: {

    fontFamily: 'Roboto',

    fontSize: 32,

    padding: 16

  }

})

// render html with custom google font and custom word-wrap at 100px

await renderText({

  text: 'headless chrome is awesome',

  output: 'out1.png',

  loadGoogleFont: true,

  width: 100,

  style: {

    fontFamily: 'Roboto',

    overflowWrap: 'break-word'

  }

})

```

Note that all CSS styles are specified via the [JS CSS syntax](https://www.w3schools.com/jsref/dom_obj_style.asp), which uses camelCase instead of hyphens. This is, for instance, what [React](https://reactjs.org/docs/dom-elements.html#style) uses for its inline styles.

## API

### [renderText](https://github.com/transitive-bullshit/puppeteer-render-text/blob/84968b73d804d01638692d9196c7d49cbfcd6a61/index.js#L43-L167)

Renders the given text / html via puppeteer.

Asynchronously returns the generated html page as a string for debugging purposes.

If you want to load multiple google fonts, juse specify their font-families in `opts.style.fontFamily`

separated by commas as you normally would for CSS fonts.

Type: `function (opts): Promise`

- `opts` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Configuration options

  - `opts.text` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** HTML content to render

  - `opts.output` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Path of image file to output result

  - `opts.width` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Optional max width for word-wrap

  - `opts.height` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Optional max height to clip overflow

  - `opts.loadFontFamily` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optional font family to load with fontfaceobserver

  - `opts.loadGoogleFont` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to load and wait for `opts.style.fontFamily` as one or more google fonts (optional, default `false`)

  - `opts.style` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** JS [CSS styles](https://www.w3schools.com/jsref/dom_obj_style.asp) to apply to the text's container div (optional, default `{}`)

  - `opts.inject` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Optionally injects arbitrary string content into the head, style, or body elements. (optional, default `{}`)

    - `opts.inject.head` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optionally injected into the document 

    - `opts.inject.style` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optionally injected into a  tag within the document <head>

    - `opts.inject.body` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optionally injected into the document <body>

## Related

- [puppeteer-render-text-cli](https://github.com/transitive-bullshit/puppeteer-render-text-cli) - CLI for this module.

- [puppeteer](https://github.com/GoogleChrome/puppeteer) - Headless Chrome Node API.

- [awesome-puppeteer](https://github.com/transitive-bullshit/awesome-puppeteer) - Curated list of awesome puppeteer resources.

## License

MIT © [Travis Fischer](https://transitivebullsh.it)

If you found this project interesting, please consider [sponsoring me](https://github.com/sponsors/transitive-bullshit) or <a href="https://twitter.com/transitive_bs">following me on twitter <img src="https://storage.googleapis.com/saasify-assets/twitter-logo.svg" alt="twitter" height="24px" align="center"></a>