Comments (2)
It'll probably require me to use ubuntu
, because GHA is already running my build job on ubuntu-latest
. I could add a step to install the dependencies:
apt-get install \
build-essential \
libcairo2-dev \
libpango1.0-dev \
libjpeg-dev
I'll also need to hook into Eleventy to run the generation script. I can do this by adding a transform
, but there may be a better way to get collections.post
at build time.
The format of the og:image
should, probably, be:
1200*630
px, as recommended by Facebook/Meta docs1200*600
px, as used by GitHub and Twitter- Twitter wants its own special
twitter:image
. however, it will also fall back toog:image
, so we can safely ignore the bird website here.
- Twitter wants its own special
Depending on how much time this adds to builds, I could also prevent it from building when running serve
locally - and just running when it builds for production.
from website.
Maths
There's an element of maths to this; knowing when to truncate the font/insert a line break will require a calculation.
- We know the canvas width and height; these are constants.
- Use of whitespace is important, so there will be some area around the edges of the canvas where text cannot be drawn. This leaves us with a drawable region, which will be represented as integers (sub-pixels cannot exist).
- Since we are using a monospaced font, the glyphs will be exactly
n
pixels in height, and some ratio of that in width. There is no kerning to consider. - We will have to floor the number of drawable glyphs, as we cannot have fractions of a drawn character.
const drawableRegionX = canvasWidth - (edgeGap * 2);
const drawableRegionY = canvasHeight - (edgeGap * 2);
let numDrawableGlyphsInX = Math.floor(drawableRegionX / (fontSizeInPx * fontAspectRatio));
let numDrawableGlyphsInY = Math.floor(drawableRegionY / (fontSizeInPx * lineHeight));
The number of characters we can draw in Y is also influenced by the line height. This is a constant. For the purposes of this utility I will implement this in the same way as CSS, that is, a multiplier.
Our font size directly influences the amount of characters we can draw in a single line. If our text data is greater than numDrawableGlyphsInX
, we must split the string after numDrawableGlyphsInX
characters and begin drawing characters on another line.
However, splitting the string arbitrarily may split between a word, which is less than ideal. We will need to split the string at each space character into an array of words, count the number of words that can be drawn onto a line, and store both the number of lines and words that can be drawn per those lines into an object. Using this object, we can then loop through the word array and draw to the canvas.
from website.
Related Issues (12)
- Add minification HOT 2
- Edge case: when long words are passed into this function, they won't be wrapped
- Better truncation
- Check for post in config will break when pagination is added
- Sticky Nav should be a macro
- Update Font
- CSS Prefixing
- Be more specific in the licencing
- Investigate microformats2
- Add word counts to articles HOT 1
- prefers-color-scheme: dark
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from website.