├── .eslintrc
├── .githooks
├── pre-commit
└── pre-push
├── tests
└── tests.test.ts
├── .github
├── dependabot.yaml
└── workflows
│ └── ci.yml
├── tsconfig.build.json
├── jest.config.json
├── .vscode
├── launch.json
└── tasks.json
├── README.md
├── LICENSE
├── webpack.config.ts
├── demo.html
├── dist
└── fit-html-text.min.js
├── package.json
├── .gitignore
├── src
└── lib.ts
├── tsconfig.json
└── eslint.config.mjs
/.eslintrc:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.githooks/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | npm run lint
--------------------------------------------------------------------------------
/tests/tests.test.ts:
--------------------------------------------------------------------------------
1 | describe("text", () => {
2 | it("ok", () => {
3 | // TODO
4 | });
5 | });
6 |
--------------------------------------------------------------------------------
/.github/dependabot.yaml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: github-actions
4 | directory: "/"
5 | schedule:
6 | interval: "weekly"
--------------------------------------------------------------------------------
/.githooks/pre-push:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | npm run build:webpack
4 | if ! git diff --exit-code dist; then
5 | git add dist && git commit --no-verify -m "generate dist files"
6 | fi
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": [
4 | "src/**/*"
5 | ],
6 | "exclude": [
7 | "**/*.spec.ts",
8 | "**/*.test.ts"
9 | ]
10 | }
--------------------------------------------------------------------------------
/jest.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionsToTreatAsEsm": [
3 | ".ts"
4 | ],
5 | "transform": {
6 | "^.+\\.[jt]sx?$": [
7 | "ts-jest",
8 | {
9 | "useESM": true
10 | }
11 | ]
12 | },
13 | "moduleNameMapper": {
14 | "^(\\.\\.?\\/.+)\\.jsx?$": "$1"
15 | }
16 | }
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "type": "node-terminal",
6 | "name": "test",
7 | "request": "launch",
8 | "command": "npm test"
9 | },
10 | {
11 | "type": "node",
12 | "name": "test:inspect-brk",
13 | "request": "attach",
14 | "port": 9230
15 | }
16 | ]
17 | }
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "2.0.0",
3 | "tasks": [
4 | {
5 | "type": "npm",
6 | "script": "build",
7 | "label": "Build",
8 | "group": {
9 | "kind": "build",
10 | "isDefault": true
11 | }
12 | },
13 | {
14 | "type": "npm",
15 | "script": "test",
16 | "label": "Test",
17 | "group": {
18 | "kind": "test",
19 | "isDefault": true
20 | }
21 | }
22 | ]
23 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | fit-html-text
2 | ==========
3 |
4 | [](https://github.com/magiclen/fit-html-text/actions/workflows/ci.yml)
5 |
6 | Fit text into its surrounding container.
7 |
8 | ## Usage
9 |
10 | ```typescript
11 | import { fitText } from "fit-html-text";
12 |
13 | const element = document.getElementById("myElement");
14 |
15 | fitText(element, {
16 | fontMinSize: 8,
17 | fontMaxSize: 72,
18 | containerMaxWidth: 300,
19 | containerMaxHeight: 300,
20 | multipleLines: false,
21 | });
22 | ```
23 |
24 | ## Usage for Browsers
25 |
26 | [Source](demo.html)
27 |
28 | [Demo Page](https://rawcdn.githack.com/magiclen/fit-html-text/master/demo.html)
29 |
30 | ## License
31 |
32 | [MIT](LICENSE)
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | tests:
7 | strategy:
8 | fail-fast: false
9 | matrix:
10 | os:
11 | - ubuntu-latest
12 | - macos-latest
13 | - windows-latest
14 | node-version:
15 | - 20.x
16 | - 22.x
17 | name: Use ${{ matrix.node-version }} on ${{ matrix.os }}
18 | runs-on: ${{ matrix.os }}
19 | steps:
20 | - uses: actions/checkout@v4
21 | - uses: actions/setup-node@v4
22 | with:
23 | node-version: ${{ matrix.node-version }}
24 | - uses: pnpm/action-setup@v4
25 | with:
26 | version: latest
27 | - run: pnpm install
28 | - run: npm run build --if-present
29 | - run: npm test
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 magiclen.org (Ron Li)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/webpack.config.ts:
--------------------------------------------------------------------------------
1 | import TerserPlugin from "terser-webpack-plugin";
2 | import type { Configuration } from "webpack";
3 |
4 | const config: Configuration = {
5 | entry: "./src/lib.ts",
6 | output: {
7 | clean: true,
8 | filename: "fit-html-text.min.js",
9 | library: "FitHtmlText",
10 | libraryTarget: "umd",
11 | },
12 | plugins: [],
13 | module: {
14 | rules: [
15 | {
16 | test: /\.ts$/iu,
17 | use: [
18 | {
19 | loader: "babel-loader",
20 | options: { presets: ["@babel/preset-env", "@babel/preset-typescript"] },
21 | },
22 | ],
23 | },
24 | {
25 | test: /\.js$/iu,
26 | use: [
27 | {
28 | loader: "babel-loader",
29 | options: { presets: ["@babel/preset-env"] },
30 | },
31 | ],
32 | },
33 | ],
34 | },
35 | resolve: { extensionAlias: { ".js": [".ts", ".js"] } },
36 | optimization: {
37 | minimizer: [
38 | new TerserPlugin({
39 | extractComments: false,
40 | terserOptions: { format: { comments: false } },
41 | }),
42 | ],
43 | },
44 | };
45 |
46 | export default config;
47 |
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | fit-html-text
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |