ytiurin / hyphen Goto Github PK
View Code? Open in Web Editor NEWText hyphenation in Javascript.
Home Page: https://ytiurin.github.io/hyphen/
License: ISC License
Text hyphenation in Javascript.
Home Page: https://ytiurin.github.io/hyphen/
License: ISC License
Since release 1.10.2 we are facing the following error:
Module not found: Error: Can't resolve '../patterns/en-us.cjs.js' in '/data/node_modules/hyphen/en-us.cjs'
It looks like the patterns/en-us.cjs
file is exported to NPM but is not present in the patterns folder:
https://www.npmjs.com/package/hyphen?activeTab=code
The code in which we are using hyphen
is as follows:
const { hyphenate } = await import(`hyphen/${language}`);
const hyphenatedText: string = await hyphenate(text, { hyphenChar: '­', minWordLength: 10 })
.then(result => {
return result;
})
.catch(() => {
return text;
});
Maybe the way we dynamically import hyphen
is causing an issue?
Hello,
Can I merge hyphen.js
and many Javascript patterns files into one?
Thank you!
Gustavo
abortion -> 2io>20 o2n>02 r1ti>010 1tio>100 > -> 0 0 0 0 1 2 0 0 0 -> abor1t2ion -> abor-tion
The word "abortion" however has 3 syllables "a-bor-tion".
Before I added id
to many classes as div
, span
and p
, but it accepted to hyphenate only the first text.
I changed to class and it gave an error.
<!-- Hyphen, by Eugene Tiurin -->
<script type="text/javascript">
function provideHyphenation(hyphenate, class) {
var el = document.getElementByClassName(".deutsch");
el.innerHTML = hyphenate(el.innerHTML);
}
provideHyphenation(createHyphenator(hyphenationPatternsDe), 'de');
</script>
As you are an expert in Javascript, why did it give my error of function provideHyphenation(hyphenate, class)
?
I have document with russian words
i made hypenation in next way using library reactpdf:
const hyphenator = hyphen(pattern); const hyphenationCallback = (word) => { return hyphenator(word).split('\u00AD'); } // <Text hyphenationCallback={hyphenationCallback}></Text>
But what if i have also english words ? How make hyphenation in document where multilang words, for example englisn and russian ?
Tried as shown in the docs
import { hyphenate, hyphenateHTML, hyphenateHTMLSync, hyphenateSync } from "hyphen/en";
but I get errors
Uncaught Error Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/user/bigtext/node_modules/hyphen/en' is not supported resolving ES modules imported from /home/user/bigtext/src/lib/test.mjs Did you mean to import hyphen/en/index.js? at __node_internal_captureLargerStackTrace (internal/errors:490:5) at NodeError (internal/errors:399:5) at finalizeResolution (internal/modules/esm/resolve:224:17) at moduleResolve (internal/modules/esm/resolve:850:10) at defaultResolve (internal/modules/esm/resolve:1058:11) at nextResolve (internal/modules/esm/loader:163:28) at resolve (internal/modules/esm/loader:835:30) at getModuleJob (internal/modules/esm/loader:416:18) at <anonymous> (internal/modules/esm/module_job:76:40) at link (internal/modules/esm/module_job:75:36) --- await --- at processTicksAndRejections (internal/process/task_queues:95:5) --- await --- at runMainESM (internal/modules/run_main:53:21) at executeUserEntryPoint (internal/modules/run_main:79:5) at <anonymous> (internal/main/run_main_module:23:47)
It seems that if given a string containing HTML, the html tag name will not be hyphenated, but all of its property will.
For example hyphenateHTMLSync('<span class="user-input" style="text-transform: capitalize;">HTML tags are NOT hyphenated</span>',{hyphenChar: "[-]"})
will return <span class="user-in[-]put" style="text-trans[-]form: cap[-]i[-]tal[-]ize;">HTML tags are NOT hy[-]phen[-]at[-]ed</span>
leaving the class and other properties broken.
I think it shouldn't. I come to this discovery trying to take the entire innerHTML content of a <p>
, including some spans with classes, and hyphenate it.
This project used to contain a link to a JS Fiddle example. But I don't see it anymore. Can it come back? I don't remember how to install the system on a website and there's no (clear) instruction on how to do that.
I see in the latest release that the html
option is deprecated.
Please do not remove the html
option. HTML and text are different data types, and being able to specify the data types used can make for more robust and explicit code. I only use the hyphenate library with text.
Thank you.
In the docs it says that all exports are named like:
import {
hyphenate,
hyphenateHTML,
hyphenateHTMLSync,
hyphenateSync
} from "hyphen/en";
but that doesn't work for me. I have to do:
import Hyphen from "hyphen/en";
const {
hyphenate,
hyphenateHTML,
hyphenateHTMLSync,
hyphenateSync
} = Hyphen;
It looks like all the name exports are exported inside the default
export
Your implementation works great, but you forgot to return the word if the string suddenly ends.
For your JS Fiddle example I have set the same strings without the special chars in the end.
You will notice that the last word is removed from the html node.
https://jsfiddle.net/nicosierra/yL1mhbc4/
In the following JS Fiddle you can see that by applying the changes on this PR, you can fix this behaviour. https://jsfiddle.net/nicosierra/eutvdeq8/
Line 104 in b634adb
I think the variable state is not initialized and it is always undefined
There seems to be a problem with hyphen 1.6.2 when the input contains the word “constructor.” Here's a short example which reproduces the issue:
const hyphen = require('hyphen');
const patterns = require('hyphen/patterns/en-us');
const hyphenate = hyphen(patterns);
const result = hyphenate('Example of a constructor.');
console.log(result);
The expected output would be similar to:
Ex-am-ple of a cons-truc-tor.
but the actual output is:
Ex-am-ple of a function Object() { [native code] }.
Here's the unit test which would reproduce the issue:
const createHyphenator = require("../hyphen.js");
const patterns = require("../patterns/en-us.js");
let hyphenate;
beforeAll(() => {
hyphenate = createHyphenator(patterns, { hyphenChar: "-" });
});
describe("Constructor word hyphenation", () => {
test("Should hyphenate constructor word correctly", () => {
expect(hyphenate("constructor")).toBe("con-struc-tor");
});
});
Hi Yevhen. We are using your great library in our software and recently found a regression after we updated our version.
You can see the error here: https://ytiurin.github.io/hyphen/?path=/story/hyphen-languages--german
As there should always be one vocal in every syllable.
This is working in version 1.6.6
No longer working since version 1.7.0
I didn't look at the code specifically but I guess the error was introduced by this commit: 38ac577
I have a problem with the minified code in Firefox – SyntaxError: invalid range in character class
Minified code (compiled by CRA) has the code return { next: function() { for (var r, i = ""; r = e.charAt(t++);) { var o = /\s|[\!-\@\[-\`\{-\\xbf]/.test(r), a = o ? a === n.readWord ? n.returnWord : n.returnChar : n.readWord; switch (a) { case n.readWord: i += r; break; case n.returnWord: return t--, i; case n.returnChar: return r } } if ("" !== i) return i } }
where
var o = /\s|[\!-\@\[-\`\{-\\xbf]/.test(r),
is wrong expression because of \\xbbf
.
Why do we have to escape ¿
sign in
Line 100 in 2dbefca
Dear all,
the regular expression on line 103 of hyphen.js
103 var charIsSpaceOrSpecial = /\s|[\!-\@\[-\
{-\xbf]/.test(nextChar); `
does not really work with all NON-WORD characters. For instance, in the provided Fiddle, by playing a little with the width of the Italian version of the result pane, you will notice that it breaks the line after an open quote, as follows:
giudizî s’
hanno a riferire
which is clearly wrong, but unfortunately the open quote character is not captured by the regular expression provided.
FIX
Following the suggestion in https://mathiasbynens.be/notes/es6-unicode-regex ,
I replaced the above-mentioned line 103 with the following:
103 var regExp = /[^\p{L}]/u ;
104 var charIsSpaceOrSpecial = regExp.test(nextChar);
and everything seems to work correctly.
I did not verify thoroughly, though.
Trying to use this in a Vue 3 app.
But somehow I am only seeing a Promise.
My code can be found in this repo and specifically in this file.
You can see it running here:
https://codesandbox.io/s/loving-johnson-xxfkm7
There is an obvious problem when a word contains a repeated pattern (e.g. blablabla, nanana, papapa). The pattern is used only once here, but it should be used in every occurrence of the pattern.
I like the simplicity of your system, but it hyphenates classnames, too. I'd suggest to exclude all attributes, classnames, ids, etc.
Is there a way to set the minimum word length to hyphenate? I'm trying to make my app as accessible as possible and supporting large text mode. I have some very short words that are supposed to fit in small spaces. I was hoping to still hyphenate small words so there wouldn't be any awkward trailing characters.
The minWordLength
setting is limited by MIN_WORD_LENGTH_BOUNDRY
(https://github.com/ytiurin/hyphen/blob/master/src/create-hyphenator.js#L64-L67).
My use-case requires hyphenating all the words (I know what I am doing, performance is not important) but this limitation renders the library useless for my case.
Please remove MIN_WORD_LENGTH_BOUNDRY
.
Hi there,
thank you for your great library. We are planing to use it in our project.
Would it be possible to drop the usage of JavaScript template literals in the pattern files? Unfortunately Internet Explorer does currently not support them: https://caniuse.com/#feat=template-literals
Thank you.
The example says (and IS written in) German, but the language pattern collection used is for LOWER German = NL = The Netherlands = DUTCH. Yes, those languages are related, but so are English and Dutch. Or Russian and Croatian. Or Spanish and Italian. BUT: They are NOT identical.
cu, w0lf
I'm trying to get this working in a Wordpress Admin. It looks like exactly what I need but I'm getting this error when I try to run the script:
ReferenceError: hyphenationPatternsEnUS is not defined
I noticed that it looked like a previous fix was implemented for this but I seem to be having the same problem.
I've just installed hyphen locally and noticed that there is a file named hyphen-1.3.1.tgz within the directory of the node package. I guess it was added by accident.
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.