I wanted to more closely match the formatting of the demo on bionic-typings website, this is what i came up with. it also ignores punctuation. perhaps you can adapt this to your library. cheers

const bionicWordSplit = (word) => {
  const { length } = word;
  let splitPoint;
  switch(true) {
    case length<=4:
      splitPoint = length-1;
    break;
    default:
      splitPoint = length-2; 
    break;
  }
  const first = word.slice(0, splitPoint);
  const second = word.slice(splitPoint);

  return [first, second];
};

function splitParagraphs( str ) {
  return str.split("\n").map(paragraph=>paragraph.replace("\r",""));
}

function unrollToIntermediateStructure( text ) {
  const paragraphs = splitParagraphs(text);
  const exp = /(\w+)/g;
  return paragraphs.map(paragraph=>{
    return paragraph.split(exp).map(item=>{
      if(item.includes('!')||item===' '||item.includes('?')||item.includes('.')||item.includes(',')||item===""){
        return item;
      }
      return bionicWordSplit(item);  
    })
  });
}

function format( intermediateStructure, formatWordFn ) {
  return intermediateStructure.map(paragraphs=>paragraphs.map(item=>Array.isArray(item)?formatWordFn(item):item).join("")).join("\n");
}

function htmlFormatter([start,end]) {
  return `<strong>${start}</strong>${end}`;
}

function markdownFormatter([start,end]) {
  return `**${start}**${end}`;
}

const test = 'Welcome to bionic reading. This will teach you how to read and write in bionic style. I am not sure how this algorithm works. Walking, running, jumping, standing all can be achieved with supreme grace and wonderous accuracy.';

const intermediate = unrollToIntermediateStructure(test);
const htmlResult = format(intermediate,htmlFormatter);
const markdownResult = format(intermediate,markdownFormatter);

console.log(intermediate);
console.log(htmlResult);
console.log(markdownResult);

• Performing regular expression operations per word

helpful links:

• https://github.com/auryn31/bionic-reading-elm/blob/main/src/Main.elm#L129
• https://jsbin.com/wefupiq/edit?js,console

Hi gumball, I'm back home from my surgery and decided to push the bionic api a bit more and see what i could discover about how it handles edge cases. here is a screenshot

As you can see the roman numerals and numeric lists will require no special logic to support, and indeed your algorithm already will match the bionic api for this, so thats good.

But i identified two edge cases:

1. period delineated acronyms - like the S.W.A.T in the above screen. As you can see their api identifies it as an a single word and ignores the periods for purposes of word highlighting, but also periods in the highlighted section are highlighted as well. this might require a bit of tricky logic, i am not sure. maybe you can think of a better solution
2. hyphenated words - like github-api in above example. as you can see each segment of a hyphenated word grouping is highlighted seperately.

Also, noticed that backtick and possibly other punctuation characters need to be ignored like you've already done with periods and such, so perhaps we need to look deeper into that to add full support for all punctuation characters.

If i can think of any other odd edge cases, i will report back to this thread.

Hi. I'm new to coding. Is this possible to implement with a ChakraUI library for converting text to bionic reading?

Also, I'm not sure if this is the right place to ask.

The <b> tag is not recommended. However, the <strong> tag affects the screen reader, so it's not a good idea either. I think it can use the same tag as <span>.

Other projects have identified the use of arbitrary tags. It seems to be one of the ways to use it.

• [ ]

dom style

test:

bionicReading('a', { highlightTag: '' });

expected:

<b>a</b>

result:

<>a</>

markdown style

test:

bionicReading('a', { markdown: true, markdownStyle: '' });

expected:

**a**

result:

a

references:

• https://rapidapi.com/bionic-reading-bionic-reading-default/api/bionic-reading1/
• https://api.bionic-reading.com/convert/

references:

• https://api.bionic-reading.com/convert/
• https://rapidapi.com/bionic-reading-bionic-reading-default/api/bionic-reading1/

all test cases:
https://docs.google.com/spreadsheets/d/10WDbAPAY7Xl5DT36VuMheTPTTpqx9x0C5sDCnh4BGps/edit#gid=1839148703

• shareable based on url
• save last edits

Can I embed this directly into HTML without a JS project setup?

some languages that do not separate words with spaces, such as Japanese or Chinese, are difficult to support.

Expected behavior
It should be revised as follows:

Passing a string allows you to specify the Beginning and End of the highlighted word at once.

- ```ts
- textVide('text-vide', '**'); // '**tex**t-**vid**e'
- ```
+ ```ts
+ textVide('text-vide', { sep: '**' }); // '**tex**t-**vid**e'
+ ```

It can also set them up by passing a list of length 2.

- ```ts
- textVide('text-vide', ['<strong>', '</strong>']); // '<strong>tex</strong>t-<strong>vid</strong>e'
- ```
+ ```ts
+ textVide('text-vide', { sep: ['<strong>', '</strong>'] }); // '<strong>tex</strong>t-<strong>vid</strong>e'
+ ```

Is there any supported way to ignore element tags, like links? For example...

textVide('<a href="https://en.wikipedia.org/wiki/All_models_are_wrong" target="_blank">quote</a>)

outputs...

<a href="https://en.wikipedia.org/wiki/All_models_are_wrong" target="_blank"><b>qu</b>ote</a>

Currently, numbers are treated the same as letters, but they actually have the following rules:

• 1234567890 -> 1234567890
• 1234-567890 -> 1234-567890
• a1234567890 -> <b>a12345678</b>90
• 1234567890a -> <b>123456789</b>0a
• 1234a567890 -> <b>1234a5678</b>90
• 1234!567890 -> <b>1234!5678</b>90
• !1234567890 -> !1234567890
• 1234567890! -> 1234567890!

This isn't a bug, but I just want to inform y'all that the wonderful® folks at Bionic Reading® have decided to crack down on any open source projects that involves Bionic Reading®. It is advised to remove all mentioning of Bionic Reading® for now to avoid legal repercussions.

Context

test:

    a
    b
    c

expected(dom style):

    <b>a</b>
    <b>b</b>
    <b>c</b>

result(dom style):

<b>
</b> <b></b> <b></b> <b></b> <b>a</b>
 <b></b> <b></b> <b></b> <b>b</b>
 <b></b> <b></b> <b></b> <b>c</b>

expected(markdown style):

    **a**
    **b**
    **c**

result(markdown style):

**
** **** **** **** **a**
 **** **** **** **b**
 **** **** **** **c**

Hello @Gumball12 does this library require a license from https://bionic-reading.com?

I am confused because in the README it says:

An Open-Source JavaScript Implementation of Bionic Reading API.

Would be nice if TextVide had an option to ignore HTML tags in the source text.

I have a source text that is an HTML string, previously rendered from markdown. The only way I have been able to use TextVide is by using jquery to render the HTML, looping over each tag, and running TextVide on each individual text node. Very inelegant and probably inefficient.

Also as a bonus feature it would be good to be able to provide a blacklist of specific tags to exclude their content from TextVide, for example existing <b> or <strong> tags.

related: #38

Consider this;

const { bionicReading } = require("bionic-reading");

console.log(bionicReading("👆 hello there, this is some dummy text"));

When I run it, the emoji seems to break:

"<b>�</b>� <b>hel</b>lo <b>the</b>re, <b>thi</b>s <b>i</b>s <b>som</b>e <b>dum</b>my <b>tex</b>t"

Please fix this ASAP!

Is your feature request related to a problem? Please describe.
I noticed that HTML entities such as   are not ignored.

Describe the solution you'd like
I would be happy if HTML entities such as   were ignored, just as the HTML tags are ignored. It might be possible to filter for strings that start with a & and end with a ; without a space in between.

Describe alternatives you've considered
I can't think of an alternative.

Additional context

At this point, I cannot intervene in the code, as a change would be undone with the next update of the CMS.

Do you think it would be a lot more efficient if we try to highlight the root words if deemed necessary?