I'm trying to split words into syllables on a website that helps kids learn to read. This turns out to be hard.
JavaScript Hyphenation libraries are large. Chrome browser can already auto-hyphenate using the hyphens: auto; CSS3 tag. I'd like to say to my line of text in the browser "Hi there! Please tell me all possible ways you would consider splitting these words, thanks!"
Which means I would need to somehow "read" the results of hyphenated words packed into very narrow divs. AFAIK you can't grab the text - hyphenation is only a display thing. Is there any way to figure out where the words were hyphenated?
https://jsfiddle.net/8v5xxuh1/
Short answer: no, there is no easy way to piggyback on the browser's hyphen generator.
Related
I would like to know if there is a way to integrate the LaTeX word spacing algorithm in a website? I'm not talking about equations.
To better illustrate what I mean, look at thr picture. Above is a normal justify and below is a valuable word spacing with LaTeX.
justify vs. LaTeX
Any ideas?
Yes, there is, using JavaScript: https://github.com/bramstein/typeset
Whether you want to use it in production is a different question.
I need to write my own code editor in browser. I found CodeMirror but I don't understand how to do this. I need simple code.
Can I use textarea or something else? (for example content editable). How to underline, colorize, auto complete the code?
Please, give me some advice. I will be very grateful.
I've read a book from O'Reilly, Douglas Crockford, about JS so I've some basics.
Check the html behind a code editor example page. Use WebKit's (Safari/Chrome) "Inspect Element".
As you can see there is a large div over a textarea that holds individual strings, so the user just gets the "illusion" he is typing in a textarea. The textarea is still there but it is not what you really are seeing.
If you want syntactical coloring you will need lexicographic analysis of the string, which is usually done by a lexer that outputs tokens. These tokens are caught by a process that collects them in individual div's that have f.i. the same text color. Then that div overlays the textarea.
If you want to go deeper in the code you will also need semantic parsing and a lot of coffee to program all of that.
Good luck, do you know you're taking on something big? And why would you reinvent this, it's already been done superbly by others.
You might want to take a look at tinyMCE if uou haven't already.
I want to know how to make a text area in a browser into a programmers text editor.
For anyone that uses textmate -- I basically want it web-based.
for anyone that uses notepad++ -- same idea as above.
I know how to make a text area
using html.
what I dont know is how to tag the text areas.
for instance. in notepad++ and textmade, I can insert the <> tags and it will highlight the text blue.
How can I achieve this, live, in a browser.
I already know how to parse it after the text has been posted.
I want it to be parsed while the user is typing it.
EditArea is pretty good.
In addition to EditArea there's CodeMirror and Mozilla's Bespin
EDIT: I misunderstood the question a little. Jump to ORIGINAL ANSWER if you are curious.
EDIT2: My answer is how to provide SYNTAX HIGHLIGHTING (what is specified in the question itself). Highlighting individual characters unrelated to the syntax requires trivial javascript. This is also distinct from 'auto format' which is commonly interpreted to mean 'adjust my indent levels so it all looks good'.
This is a difficult task, but not as impossible as it seems. Once again, TextMate comes to our rescue but in a different fashion.
In TextMate, open the bundle editor and look at the language definition for HTML. Those are regexes that process the document and assign a 'scope' to each piece.
'Simply' parse that language definition format into the various components, and then use the regexes themselves like TextMate does to assign a scope/color. Piece of cake, right? :)
I would personally start with the most lightweight open source rich text editor you can find, then hack it into that. Or ya know, whatever floats your boat.
I hope that gave you some good ideas.
ORIGINAL ANSWER:
For Firefox, you can install the plugin 'It's All Text' from here:
https://addons.mozilla.org/en-US/firefox/addon/4125/
It works for me with 3.6.12. Set the path in preferences to TextMate (or whatever), and optionally set a hotkey or adjust the other settings to your liking. Be default, when your cursor is over a Textarea, a small button saying "Edit" will appear and open the contents of the Textarea in your editor. Saving will put the data back into the Textarea.
I hope this helps.
JSMinNpp plugin just for javascript auto-formatting
http://sourceforge.net/projects/jsminnpp/
I am aware that Javascript WYSIWYG editors use the inbuilt editor mode of the browser to function, but that comes up with various problems and issues.
Can an editor be built from scratch in JS, something like what Buzzword people have done with flash/flex? I came across this blog post recently and I am just wondering if this can be built (atleast to a moderate extent) using Javascript?
It depends what you mean by "from scratch". Google Docs provides a pretty good text editor in JS. Is that what you mean ?
Of course you can do it and it is not very difficult.
But before reinventing the wheel please take a look at all the existing ones.
Many of them are really very well written and open source.
Almost anything can be done with JavaScript. You have the basic building tools right there - you can intercept all mouse events and nearly all keyboard events. You can use a GIF animation for simulating the caret. The trickier part might be measuring the size of text so that you can position your caret where you need to. I'm not exactly sure how you could do that. But if you figure that out, the rest is doable. Although it will really require tons of wheel-reinventing code.
Reminds me of a little experiment I did sometime back... I basically tried to create a primitive editor by simply listening to keypresses on a DIV and to insert them into the DIV as a new node. So imagine, each character would be wrapped in a tag! It actually worked. But, once it reaches a couple of paragraphs, node insertion and deletion becomes rather slow. You will type a character, and it would only appear after a slight delay, and this simply unacceptable, and eventually I just gave up. Anyway it was just a random thing I wanted to try out..
Coming back to your question, I wonder if this can be replicated in JS alone as frankly the flash has superior raw processing power compared to JS. Even if it's technically feasible, I doubt whether it will be fast enough to actually work well. My two cents!
Atwood's Law:
Any application that can be written in JavaScript, will eventually be
written in JavaScript.
I'm currently developing a website and my client wants the text of various articles to overflow into two columns. Kind of like in a newspaper? So it would look like:
Today in Wales, someone actually Nobody was harmed in
did something interesting. the incident, although one
Authorities are baffled by this elderly victim is receiving
development and have arrested the counselling.
perpetrator.
Is there a way I can do this with just CSS alone? I'd prefer not to have to use multiple divs. I'm open to using JavaScript too, but I'm really bad at that, so help would be appreciated. I was thinking maybe JavaScript could count how many <p>'s there are in the content div, and then move the second half of them to be floated right based on that?
The good news is that there is a CSS-only solution. If it was implemented, it would look like this:
div.multi {
column-count: 3
column-gap: 10px;
column-rule: 1px solid black;
}
I'd probably handle it in your backend, whatever that happens to be. An example in PHP might look like:
$content = "Today in Wales, someone actually did something...";
// Find the literal halfway point, should be close to the textual halfway point
$pos = int(strlen($content) / 2);
// Find the end of the nearest word
while ($content[$pos] != " ") { $pos++; }
// Split into columns based on the word ending.
$column1 = substr($content, 0, $pos);
$column2 = substr($content, $pos+1);
It should probably be possible to do something similar in JavaScript with InnerHTML, but personally I'd avoid that whole situation because more and more people are using plugins like NoScript that disables JavaScript till it's explicitly allowed for x site, and above anything else, div's and CSS were designed to degrade nicely. A JavaScript solution would degrade horribly in this case.
Here's a JQuery plugin which does columns automatically, and can even vary number of columns based on screen size.
I haven't used this myself, but check it out.
If you are using Mootools, you can check out MooColumns.
First off, i don't think just css can do that, but i would love to be proven wrong.
Second, just counting paragraphs won't help you at all, you need at least all the heights and calculate the middle of the text height based on that, but you'd have to account for window resizing etc. I don't think there is a reasonably simple off the shelf solution. Unfortunately i'm pessimistic about finding a perfect solution to this problem, But it is an interesting one.
This is difficult to achieve in HTML/CSS/JS for a reason (although I'm sure it's possible).
Newspapers use multiple columns to reduce the line width make text more readable. This is fine on paper because when you finish one column you flip your eye up to the beginning of the next.
On the web we use scrolling to allow text to continue past the bounds of the screen therefore don't need columns.
This is supported in a Mozilla only CSS extension: -moz-column-count. See : https://developer.mozilla.org/en/CSS3_Columns