Spaces:
Sleeping
Sleeping
File size: 2,258 Bytes
2cae2a9 5f8adfe 2cae2a9 5f8adfe 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 deff001 2cae2a9 e9ae5da bfa4d57 e9ae5da 2cae2a9 deff001 2cae2a9 e9ae5da 2cae2a9 b82eb58 2cae2a9 bfdc3bb 2cae2a9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
export type TextOverlayStyle =
| "outline"
| "highlight"
// https://wiki.alpinelinux.org/wiki/Fonts
export type TextOverlayFont =
| "Noto"
| "Inconsolata"
export type TextOverlayFontWeight =
| 100
| 200
| 300
| 400
| 500
| 600
| 700
| 800
| 900
export type TextOverlayPosition =
| "start"
| "center"
| "end"
export function getCssStyle({
width,
height,
fontSize,
fontFamily,
fontWeight,
horizontalPosition,
verticalPosition,
px,
py,
}: {
width?: number | string
height?: number | string
fontSize: number
fontFamily: TextOverlayFont
fontWeight: TextOverlayFontWeight
horizontalPosition: TextOverlayPosition
verticalPosition: TextOverlayPosition
px: number
py: number
}) {
return `
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=${fontFamily}:wght@${fontWeight}&display=swap" rel="stylesheet">
<style>
body {
background: transparent !important;
width: ${width || "100vw"};
height: ${height || "100vh"};
overflow: hidden;
margin: 0;
padding-top: ${py}vh;
padding-right: ${px}vh;
padding-bottom: ${py}vh;
padding-left: ${px}vh;
display: flex;
flex-direction: column;
align-items: ${
horizontalPosition
};
justify-content: ${
verticalPosition
};
}
.content {
text-align: ${horizontalPosition};
}
p {
font-family: "${fontFamily}", sans-serif;
font-size: ${fontSize}vh;
font-weight: ${fontWeight};
border-radius: 2vh;
padding: 1vh;
/*
normally we should use those webkit features:
https://kinsta.com/blog/css-text-outline/
but puppeteer has some glitches (the black lines are not cut properly)
so we use text shadows instead
*/
text-shadow:
${0.16}vh ${0.16}vh ${0.13}vh #000,
-${0.16}vh ${0.16}vh ${0.13}vh #000,
-${0.16}vh -${0.16}vh 0 #000,
${0.16}vh -${0.16}vh 0 #000;
}
.outline {
color: white;
/* -webkit-text-stroke-width: ${0.3}vh; */
/* -webkit-text-stroke-color: black; */
}
.highlight {
background: white;
color: black;
}
</style>
`
} |