Manipulating text in a TextBox in Adobe InDesign CS5 - javascript

How can I do some manipulations with the text in a TextBox on resize in Adobe InDesign CS5?
The main goal is too split the last word on every row to achieve something like a custom hyphenation.
Is it possible using JavaScript (or ExtendScript?) ?
Thanks.
UPDATE
I've tried to describe my problem in comments
I need an example on ExtendScript, which would find textbox dimensions and hyphenate the text according to dimension and after I'd like to create an event on textbox resize, which would do the same thing after every resize.

You'll probably be able to write a script to do what you want, but the functionality is already built into InDesign.
If I understand your problem correctly it's InDesign does not hyphenate Armenian properly? You can insert manual hyphenationsin the text using the text tool and pressing 'Ctrl'+'-' where you want the hyphen in the text. Unfortunately you'll have to do that everytime you resize the box, because the words will move around - which is probably the problem you're having.
You can set the language in InDesign in the Character tab (shortcut is 'Ctrl'+'t') and upload custom dictionaries/word lists with rules specific to your language including rules for spelling and hyphenation. Unfortunately I couldn't find Armenian in my short search, but perhaps you're more lucky.
Check out the link for more details:
http://help.adobe.com/en_US/indesign/cs/using/WSa285fff53dea4f8617383751001ea8cb3f-6f4da.html

Related

JavaScript textarea editor with custom formatting rules

i need to implement simple text editor with custom (probably dynamic) rules. For example, if user change text somehow i want to run regex (or callback method or something else) on this text and apply formatting for it. For ex all ip addresses in text should have red color, names from specified range - black, all words starting from "abc" - green.
So basically what i need is:
- simple text editor based on text area
- ability so add rules applying to text withing text area
I reviewed a lot of related resources and didn't found any simple solution yet. As for now I've started to implement my own editor with using of contenteditable attribute and JQuery.
I never wrote such functionality before, so could you please point me to the right direction? Maybe i can use already implemented tools or specific strategy?
Thanks a lot.
Maybe it would be useful for someone.
After a bit of investigation at first i tried to use jQuery Highlight Plugin, but it does not cover my all of needs so i used Codemirror editor, which i found very nice and customizable.
I wrote my custom mode and it's working perfectly.
As start point i used this article

Jquery/Javascript add emoticon to input

I am using Jquery, php and html5. Either an input field or a textarea is used and for both i always run into the same problem: inserting emoticons / smileys: they won't. They only seem to want to add straight up text, nothing else.
I've googled and googled even tried to code something which adds the value of the key pressed to a div (and therefor have the potential to not insert :-) but insert a smiley instead), but that doesn't seem to be ideal.
Do any of you know how to do this properly and would like to show me how?
Really at a loss here....I would be very grateful for any help.
First of all - font letter is graphic object and smile picture is graphic object ))
Most simple way - just using font with smiles instead of regular font.
Take a look for http://www.fontspace.com/category/emotions, for example.

Problems with custom divs within WYSIWYG, cross-browser

I am working on a WYSIWYG editor (customising someone else's code) and have encountered a few problems that I just can't seem to overcome.
So far I have been able to get most custom divs working, but I am having some trouble with a few things:
Problem 1: If the cursor is before a div element, I am able to press delete and begin to remove the contents of the div without removing the actual div itself. This is how the element should look within the WYSIWYG for example:
But after pressing delete when the cursor is before the element, I get the following:
How can I check if the next element is this custom div and cancel a delete key press?
Problem 2: I am also able to press backspace after an element, which causes any text after the element to appear inside it, like so:
How can I check if the previous element is my custom div and cancel a backspace key press?
Problem 3: When inside a section (where the 'put content here' text is), I am using a div with the attribute contenteditable="true". Every time I press 'enter' within this div, a new <div> tag is created, rather than a line break tag (<br>). How can I force a line break tag to be created instead of a div element?
I have looked far and wide on stackoverflow and have yet to find a proper solution to the problem that is cross-browser.
Disclaimer: I am a CKEditor core developer.
If you want to customise this there are three ways:
You can spend few months (or more) on learning about contenteditable, ranges, selection and all that stuff and trying to implement your custom handlers. You could of course spend only one week or month on that, but the result won't be great, believe me.
You can choose good, existing WYSIWYG editor.
You can lower your expectations regarding the expected behaviour ;).
Now, if you would decide to use CKEditor there's one new feature called Widgets which was introduced in recently released CKEditor 4.3 beta (4.3 stable is going to be released in max. 2-3 weeks). As far as I can see it may be very helpful in your case. Check out the Introduction to Widgets guide. In very short - it is possible to configure how enter key behaves in so called "nested editables" as well as to secure integrity of your custom markup.

Grabbing the sentence that a selected word appears in

Using Javascript, I need to allow a user to double click a word on a page and retrieve the sentence that it appears in. Not just any sentence, but that specific one. I've toyed with retrieving all sentences that that word appears in and somehow choosing the correct sentence, so maybe that's an option.
I've scoured the web looking for this beast, and I've thought a lot about it. Some have recommended using Rangy but I haven't been able to find the functionality I'm looking for, or even functionality that would help me get where I need to be.
Any ideas?
You could turn your page into one or multiple read-only textareas, use clever CSS styling to mask it, then use the onselect event as described here: Detect selected text in a text area with javascript
Depends of course, how your page looks like and where it's used.

Ebook in iOS using CSS multi-column (calculate range of text in different column)

My first question here. Correct me if I've done anything wrong.
I've found a source here demonstrate how to paginate html using CSS multi-column.
http://groups.google.com/group/leaves-developers/browse_thread/thread/27e4bf5ff3c53113/f137dc01b6d853b7
My question is:
How to calculate the range / location of text in different column (page)?
For example, when changing the font size,
the text in current page will jump to another page.
To solve this, the program should save the current text location,
and move to the correct page (column) after reformatting the web page.
It is also useful for implementing bookmark function.
I think it should be done by javascript, but I'm new to javascript.
Any suggestions and tips are welcomed.
This is a bit of a general question, and very hard to answer, so I'll just try to point you in a direction I might try.
I have no idea how the layout of your page might look or function, but one way you could theoretically do this is by checking the text node of your 'column' whenever you change the font-size (presuming this font size change is implimented by a button click). So, for instance, say you have a div w/ the id #column_1, whenever someone clicks the button ui element you could evaluate the first several characters of #column_1, then search your string to find that text, and load whatever no. of characters you have defined as a 'page' around that text and call your render method to 'turn' to that page. So the flow of your function might look something like this:
zoomControl.click(click event){ //do something when you click the zoom control
var text = findTextofCurrentPage() //get the first bit of text of your current 'page'
renderLargerTextSize() //re-render your 'page' w/ larger text (for user feedback purposes)
renderPageWith(text) //render/navigate to the 'new' page wherein your the text in the variable 'text' can be found
}
Obviously this is a super generic 'idea' of what functions/methods you might use to make this happen, but I think if you dug into JS and say something like JQuery this sort of thing could be done relatively easily.

Categories

Resources