gumball12 / text-vide Goto Github PK
View Code? Open in Web Editor NEWAn Open-Source JavaScript Implementation of Bionic Reading.
Home Page: https://www.npmjs.com/package/text-vide
License: MIT License
An Open-Source JavaScript Implementation of Bionic Reading.
Home Page: https://www.npmjs.com/package/text-vide
License: MIT License
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);
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!
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:
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 solutiongithub-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.
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'
+ ```
helpful links:
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.
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.
Do you think it would be a lot more efficient if we try to highlight the root words if deemed necessary?
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.
At this point, I cannot intervene in the code, as a change would be undone with the next update of the CMS.
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>
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.
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.
related: #38
some languages that do not separate words with spaces, such as Japanese or Chinese, are difficult to support.
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**
Can I embed this directly into HTML without a JS project setup?
test:
bionicReading('a', { highlightTag: '' });
expected:
<b>a</b>
result:
<>a</>
test:
bionicReading('a', { markdown: true, markdownStyle: '' });
expected:
**a**
result:
a
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.