wittjeff / text-spacing-editor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Commits GitHub issues Badge License Badge Chrome Badge Mozilla Badge Edge Badge Safari

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.

Text Spacing Editor available in the Chrome Web Store Get the Text Spacing Editor addon for Firefox Get Text Spacing Editor for Microsoft Edge Download Text Spacing Editor on the App Store

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.

About

License:GNU General Public License v3.0


Languages

Language:TypeScript 65.5%Language:CSS 29.1%Language:Shell 3.7%Language:JavaScript 1.6%