{"id":20140415,"url":"https://github.com/gumball12/text-vide","last_synced_at":"2025-04-05T08:05:43.939Z","repository":{"id":37714370,"uuid":"494787903","full_name":"Gumball12/text-vide","owner":"Gumball12","description":"An Open-Source JavaScript Implementation of Bionic Reading.","archived":false,"fork":false,"pushed_at":"2024-01-22T02:14:42.000Z","size":784,"stargazers_count":248,"open_issues_count":0,"forks_count":14,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-05T12:33:52.851Z","etag":null,"topics":["bionic","bionic-reading","fixation-points","highlighted","readable","reading","text"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/text-vide","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gumball12.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-21T13:14:45.000Z","updated_at":"2024-09-26T22:07:06.000Z","dependencies_parsed_at":"2024-01-22T03:27:10.344Z","dependency_job_id":"68e94e8b-8377-46b8-bde6-4f829c0390ea","html_url":"https://github.com/Gumball12/text-vide","commit_stats":{"total_commits":103,"total_committers":1,"mean_commits":103.0,"dds":0.0,"last_synced_commit":"dfef9ed1c366b47e6795338f41452899aabb098b"},"previous_names":["gumball12/bionic-reading"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gumball12%2Ftext-vide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gumball12%2Ftext-vide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gumball12%2Ftext-vide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gumball12%2Ftext-vide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gumball12","download_url":"https://codeload.github.com/Gumball12/text-vide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bionic","bionic-reading","fixation-points","highlighted","readable","reading","text"],"created_at":"2024-11-13T21:51:35.870Z","updated_at":"2025-04-05T08:05:43.904Z","avatar_url":"https://github.com/Gumball12.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TextVide (vide; Latin for \"see\")\n\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/text-vide)](https://www.npmjs.com/package/text-vide) ![[npm downloads]((https://img.shields.io/bundlephobia/minzip/text-vide))](https://img.shields.io/npm/dm/text-vide) ![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/text-vide) ![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/Gumball12/text-vide?filename=packages%2Ftext-vide%2Fpackage.json) [![changelog](https://img.shields.io/badge/CHANGELOG-gray)](./CHANGELOG.md)\n\n[![ci](https://github.com/Gumball12/text-vide/actions/workflows/ci.yaml/badge.svg)](https://github.com/Gumball12/text-vide/actions/workflows/ci.yaml) [![codecov](https://codecov.io/gh/Gumball12/text-vide/branch/main/graph/badge.svg?token=MsLDgzri5B)](https://codecov.io/gh/Gumball12/text-vide)\n\n![logo](./docs/logo-extended.png)\n\n\u003e **Support all languages that separate words with spaces**\n\n\u003e [Try on Runkit](https://npm.runkit.com/text-vide) or [Online Sandbox](https://gumball12.github.io/text-vide/)\n\nThis module is an open source implementation that mimics the behavior of the [Bionic Reading API](https://bionic-reading.com/).\n\nIt does not require any additional licenses, except for MIT. ([#38](https://github.com/Gumball12/text-vide/issues/38))\n\n- _[How was this made?](./HOW.md)_\n- _[I don't think it's going to be more readable](./ABOUT_READABILITY.md)_\n- _[CONTRIBUTING.md](./CONTRIBUTING.md)_\n\n## 💫 Features\n\n| Feature                                                                 | State |\n| ----------------------------------------------------------------------- | ----- |\n| [Support all languages](https://github.com/Gumball12/text-vide/pull/16) | ✅    |\n| [Support ESM and CommonJS](#usage)                                      | ✅    |\n| [Custom `sep` Style](#options-sep)                                      | ✅    |\n| [Fixation-Points](#options-fixationpoint)                               | ✅    |\n| [Ignore HTML Tags](#options-ignorehtmltag)                              | ✅    |\n| [Ignore HTML Entity](#options-ignorehtmlentity)                         | ✅    |\n| [Saccade](https://github.com/Gumball12/text-vide/issues/21)             | ❌    |\n\n### Benchmark\n\n```\nSun Aug 07 2022 01:33:40 GM +0900\nlength of normal text: 590\nlength of text with html tags: 1579\n\nnormal#ignoreHtmlTags x 46,106 ops/sec ±4.22% (86 runs sampled)\nnormal#notIgnoreHtmlTags x 53,200 ops/sec ±0.93% (89 runs sampled)\nwithHtmlTags#ignoreHtmlTags x 3,213 ops/sec ±0.92% (87 runs sampled)\nwithHtmlTags#notIgnoreHtmlTags x 3,605 ops/sec ±1.59% (87 runs sampled)\n```\n\n[code](./apps/benchmark/index.js)\n\n## ⚙️ Install\n\n```bash\nnpm i text-vide\nyarn add text-vide\npnpm add text-vide\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/text-vide/dist/index.iife.js\"\u003e\u003c/script\u003e\n```\n\n## 📖 Usage\u003ca id=\"usage\"\u003e\u003c/a\u003e\n\n### Browser\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/text-vide/dist/index.iife.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const text =\n    'Bionic Reading is a new method facilitating the reading process by guiding the eyes through text with artificial fixation points. As a result, the reader is only focusing on the highlighted initial letters and lets the brain center complete the word. In a digital world dominated by shallow forms of reading, Bionic Reading aims to encourage a more in-depth reading and understanding of written content.';\n\n  const highlightedText = textVide.textVide(text);\n\n  console.log(highlightedText); // '\u003cb\u003eBion\u003c/b\u003eic \u003cb\u003eReadi\u003c/b\u003eng ... \u003cb\u003ewritt\u003c/b\u003een \u003cb\u003econte\u003c/b\u003ent.'\n\u003c/script\u003e\n```\n\n### ESM\n\n```ts\nimport { textVide } from 'text-vide';\n\nconst text =\n  'Bionic Reading is a new method facilitating the reading process by guiding the eyes through text with artificial fixation points. As a result, the reader is only focusing on the highlighted initial letters and lets the brain center complete the word. In a digital world dominated by shallow forms of reading, Bionic Reading aims to encourage a more in-depth reading and understanding of written content.';\n\nconst highlightedText = textVide(text);\n\nconsole.log(highlightedText); // '\u003cb\u003eBion\u003c/b\u003eic \u003cb\u003eReadi\u003c/b\u003eng ... \u003cb\u003ewritt\u003c/b\u003een \u003cb\u003econte\u003c/b\u003ent.'\n```\n\n### CommonJS\n\n```ts\nconst { textVide } = require('text-vide');\n\nconst text =\n  'Bionic Reading is a new method facilitating the reading process by guiding the eyes through text with artificial fixation points. As a result, the reader is only focusing on the highlighted initial letters and lets the brain center complete the word. In a digital world dominated by shallow forms of reading, Bionic Reading aims to encourage a more in-depth reading and understanding of written content.';\n\nconst highlightedText = textVide(text);\n\nconsole.log(highlightedText); // '\u003cb\u003eBion\u003c/b\u003eic \u003cb\u003eReadi\u003c/b\u003eng ... \u003cb\u003ewritt\u003c/b\u003een \u003cb\u003econte\u003c/b\u003ent.'\n```\n\n## 📚 API\n\n### `textVide(text: string, options?: Options)`\n\n```ts\ntextVide('text-vide');\ntextVide('text-vide', {\n  // ... Options\n});\n```\n\n### Options\n\n```ts\ntype Options = Partial\u003c{\n  sep: string | string[];\n  fixationPoint: number;\n  ignoreHtmlTag: boolean;\n  ignoreHtmlEntity: boolean;\n}\u003e;\n```\n\n#### `sep`\u003ca id=\"options-sep\"\u003e\u003c/a\u003e\n\n- Default: `['\u003cb\u003e', '\u003c/b\u003e']`\n\nPassing a string allows you to specify the Beginning and End of the highlighted word at once.\n\n```ts\ntextVide('text-vide', { sep: '**' }); // '**tex**t-**vid**e'\n```\n\nIt can also set them up by passing a list of length 2.\n\n```ts\ntextVide('text-vide', { sep: ['\u003cstrong\u003e', '\u003c/strong\u003e'] }); // '\u003cstrong\u003etex\u003c/strong\u003et-\u003cstrong\u003evid\u003c/strong\u003ee'\n```\n\n#### `fixationPoint`\u003ca id=\"options-fixationpoint\"\u003e\u003c/a\u003e\n\n- Default: `1`\n- Range: `[1, 5]`\n\n```ts\n// Default fixation-point: 1\ntextVide('text-vide'); // '\u003cb\u003etex\u003c/b\u003et-\u003cb\u003evid\u003c/b\u003ee'\n\n// Changed fixation-point: 5\ntextVide('text-vide', { fixationPoint: 5 }); // '\u003cb\u003et\u003c/b\u003eext-\u003cb\u003ev\u003c/b\u003eide'\n```\n\n#### `ignoreHtmlTag`\u003ca id=\"options-ignorehtmltag\"\u003e\u003c/a\u003e\n\n- Default: `true`\n\nIf this option is `true`, HTML tags are not highlighted.\n\n```ts\ntextVite('\u003cdiv\u003eabcd\u003c/div\u003eefg'); // '\u003cdiv\u003e\u003cb\u003eabc\u003c/b\u003ed\u003c/div\u003e\u003cb\u003eef\u003c/b\u003eg'\ntextVite('\u003cdiv\u003eabcd\u003c/div\u003eefg', { ignoreHtmlTag: false }); // '\u003c\u003cb\u003edi\u003c/b\u003ev\u003e\u003cb\u003eabc\u003c/b\u003ed\u003c/\u003cb\u003edi\u003c/b\u003ev\u003e\u003cb\u003eef\u003c/b\u003eg'\n```\n\n#### `ignoreHtmlEntity`\u003ca id=\"options-ignorehtmlentity\"\u003e\u003c/a\u003e\n\n- Default: `true`\n\nIf this option is `true`, HTML entities are not highlighted.\n\n```ts\ntextVide('\u0026nbsp;abcd\u0026gt;'); // '\u0026nbsp;\u003cb\u003eabc\u003c/b\u003ed\u0026gt;'\ntextVide('\u0026nbsp;abcd\u0026gt;', { ignoreHtmlEntity: false }); // \u0026\u003cb\u003enbs\u003c/b\u003ep;\u003cb\u003eabc\u003c/b\u003ed\u0026\u003cb\u003eg\u003c/b\u003et;\n```\n\n## License\n\n[MIT](./LICENSE) @Gumball12\n\nIt does not require any additional licenses, except for MIT. ([#38](https://github.com/Gumball12/text-vide/issues/38))\n\n## Why Monorepo?\n\nI acknowledge that the current monorepo structure might seem complex for the project's requirements. Here's why I chose this approach:\n\n- This project served as a learning experience for implementing monorepo architecture, as I was preparing to introduce it at my workplace\n- I intentionally used this small project as a practical exercise to understand monorepo concepts and best practices\n- While the current structure might be over-engineered, I plan to maintain it since:\n  - The project requirements are relatively stable\n  - Major changes or additions are unlikely\n- However, I'm open to simplifying the architecture if there's a compelling reason to do so\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgumball12%2Ftext-vide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgumball12%2Ftext-vide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgumball12%2Ftext-vide/lists"}