Text Spacing Editor

A browser extension that allows you to set custom values for the following text spacing properties: Line height, letter spacing, word spacing, and paragraph spacing. You can use it also as a way of testing the WCAG success criterion 1.4.12 - Text Spacing.

Note: Get the Text Spacing Editor for Opera from Chrome Web Store. Opera is no longer moderating their extensions but allows you to install Chrome extensions.

Features

• Ability to adjust text spacing properties on web pages
• Multiple ways to adjust properties - a preset, a slider, and increase/decrease buttons (with the long-press event)
• Full keyboard support and screen reader support
• Support for light mode, dark mode, high contrast mode, and reduced motion mode
• Instructions on how to use the extension

---

This is a Plasmo extension project bootstrapped with plasmo init.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: build/chrome-mv3-dev.

You can start editing the popup by modifying popup.tsx. It should auto-update as you make changes. To add an options page, simply add a options.tsx file to the root of the project, with a react component default exported. Likewise to add a content page, add a content.ts file to the root of the project, importing some module and do some logic, then reload the extension on your browser.

For further guidance, visit our Documentation

Testing with Android

You can use web-ext to test your build for Android.

Assuming you have your Android device configured with adb and ready to use:

cd build/target-mvX-ENV # navigate to build target folder

adb devices # copy device name

web-ext run -t firefox-android  --android-device=DEVICE_NAME #use device name from adb

Making production build

Run the following:

npm run build:all
# or
yarn build:all

This should create a production bundle for Chrome, Firefox, Safari, Edge and Opera in a build/ folder. You can then publish zip archives

Submit to the webstores

Build with plasmo, packed with pack.sh script and distributed to web stores manualy.

Contribution

If you encounter issues, have suggestions, or want to add a new feature, please create a new issue. We are happy to help you.

Translations

We welcome your help with localization! If you want to contribute with a translation of texts, here is what to do:

1. First, ensure the locale you want to add is supported by web stores. Check the list of supported locales. If you do not see your locale in the list, and you cannot choose the closest possible locale, it is not possible to localize the extension to your wanted language as the web stores do not support it.
2. Follow one of these two steps:
   1. If you have experience with GitHub and know how to create a pull request, fork this repository, create a new branch, and add the new locale file within a new folder like so: /locales/[LOCALE]/messages.json, where [LOCALE] is the code of the locale you are about to add. For instance, if you want to add an Indonesian locale, you would create a /locales/id/messages.json file.
   2. If you are not comfortable with GitHub or pull requests, create a new text document on your computer and name it messages.json or messages.txt.
3. Copy the contents of the English (en) locale messages.json file and paste it to your new file.
4. Translate all values of message and description keys. Only translate the actual texts inside, such as Text Spacing Editor or Line height. Do not translate the keys themselves, for instance, extensionName, message, description, placeholders, property, or content. Also, some texts contain HTML tags inside, such as <ul id='wcag-conformance-values'><li><em>Line height</em> - in that case, only translate the texts inside the HTML tags.
5. Follow one of these two steps:
   1. If you forked the repository, commit and push your changes and create a pull request. Make sure the base repository is actum/text-spacing-editor and the base branch is main.
   2. If you created a new file on your computer, add a new feature request:
      1. Add a title (e.g. "Add Indonesian locale") and a description with any additional information you want to mention there.
      2. Attach your file to the description (or use the "Paste, drop, or click to add files" button to upload the file).

Check the other locales to see how they are implemented.

We will review your request, contact you if necessary, and implement the changes. Thank you! If you are not sure if you did something right, don't worry. We will review your issue and help you with everything 🙂. You can always contact us at [email protected].