Double space can be achieved using CSS with line-height:2em, which also makes text selection doubles when you drag on it. Is there any way to have text selection not include extra padding that occurs from CSS line-height, just like how it would look like when you drag what I have wrote here?
I have the following options:
Divide paragraph into sentences, each with their own element, and push/pull words when overflow/underflow. (What I have implemented so far)
Make line-height 2em, disable default text selection, and draw text selection box with Javascript. It may still be complicated, but probably not as much as having to push/pull words on every text input.
There is this diabolically simple trick I am not aware of.
There is a simple trick: use Firefox.
Chrome:
Firefox:
Related
I'm trying to disable text ellipsis ('...' at the end of text) / overflow-wrap so as to be able to read the full text of the option element within the select element. At the moment the text is getting cut off even though there's plenty of white space left. The catch is that I have to do this using Greasemonkey (not written any code so far), just editing in browser console till I find the correct css option. Things I've tried so far:
changing an option/select width to "100%".
changing option/select line-height to "normal"
changing option/select padding to "0"
changing option/select font-size to something smaller.
setting option/select text-overflow to "clip"
setting option/select white-space to "normal"
var menu = document.querySelector('select');
var option = document.querySelector('select option[value="neteng-deployment-agg-pod1-dub-primary"]');
I'll also attach an image to help explain what I mean:
I am not sure but looks like IE problem.
First of all check the same page with Firefox and Google Chrome.
My gut feeling that this is quite browser default specific, and that it would require browser-specific css hacks to change this, can you confirm if this is the same behaviour in all browsers on your machine?
edit: with knowledge that is same in all browsers:
there's a good chance replacing the default select element with some fancy jquery versions that replace select elements with mirror versions using normal html markup may solve it
https://sitepoint.com/13-jquery-selectboxdrop-down-plugins
I have two simple textareas where in i want to highlight the javascript code being written.
As soon as the user types the function in the text area , the keywords etc have to be displayed in different color or so.
I tried to hack this script . But couldnt get what i wanted.
You could check Ace (demo) and CodeMirror (demo).
I suppose Textarea that can do syntax highlighting on the fly? and Online Code Editor questions will be useful for you as well.
I've always been interested in having textarea elements with added functionalities such as code highlighting, while still remaining as simple editable textareas. I've experimented a little bit here: http://www.dcc.uchile.cl/~jmunoz/
It's far from optimal and quite buggy, but still... It allows text highlighting using arbitrary rules. I used to have a working version which allowed to change the text color (And not just the background), but It had some issues.
Basically what I do is adding a div overlay with exactly the same content and font style as the text area but with transparent fonts. The text inside has span elements wrapping certain words and phrases which may have special backgrounds, borders, etc.
To allow for different font colors, I tried making the textarea text transparent while showing the overlay div text. The main issue there was that the cursor became transparent too.
I would say that using a div with editablecontent seems like a much better option.
I think that you can use a div or section tag with content editable attribute. Inside this div or section you can use an additional markup for higlight functions, vars and etc. But this attribute work only in new browsers that support html5 attribute content editable. Here is a demo
If you need a simple js highligter, may be this one https://github.com/cloudhead/hijs is usefull for your task
Because a text area cannot contain markup, you cant so highlighting per se. The approach I used for an inline spell checker was to overlay divs for words that were spelled incorrectly. This was possible because it was possible to get the x and y location of words inside the text.
However it may be preferable to overlay the textarea with a content editable div which would allow you to wrap content in spans etc and then apply styling.
I have a justified text node into which I want to insert an inline placeholder ( element if you like) whose only content is a "" that shouldn't have any width (and chrome inspector says as much too). I have noticed that when I insert this node inline into the text node, the whole line "jiggles" as if recalculating the layout, although this should not affect it.
I have also tested that if the text node I insert it into is left-aligned, this slight movement does not happen. Is this just inherent to the way the browser calculates text placement in a justified text element or could there be any workaround for this?
As I suspected, the issue, rather no issue, is due to the way "justify" works. First to confirm that "justify" text-align is causing this, check the jsffidle : http://jsfiddle.net/e7Ne2/29/
Both divs are same -> except that First div has text-align: justify and the other does not.
You will see that first div shows that behaviour but not second div.
This is because "justify" works this way (from wiki):
In justified text, the spaces between words, and, to a lesser extent, between glyphs or letters (kerning), are stretched or sometimes compressed in order to make the text align with both the left and right margins.
So, when we introduct a &zwb;, the text gets reorganized. This behaviour not consistent because not all characters are modified with &zwb;. So, when &zwb; alters the text, few letters "may be" stretched/compressed leading to the seemingly weird behaviour
The best I can find on it is that support for the zwj is not complete in all browsers. Your code is taking the inserted span tag and removing it with that .text() call, so it's unwrapping the zwj and causing display issues wherever it lands between letters.
I'm not sure what the end application is supposed to be, but using the jQuery .html() function would probably be better (you'll just need to check and make sure you're not writing inside of a tag), because the .text() function strips tags.
Reference:
http://api.jquery.com/text/
I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"
How could I write something like that using jQuery?
How to get row and column of cursor?
how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
How to make sure the DIV appears at the start of a word?
Thank you in advance!
Answer: http://jsfiddle.net/morrison/57BR3/
What it does:
Creates div positioned near hyperlink.
Looks like Google docs box.
Ability to change text and url.
Remove is implemented.
What it does not do:
Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.
You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.
How to determine on which row of textarea is the cursor with javascript?
I think it will involve fiddly calculations with font sizes, padding, borders, margins, and line breaks. I expect it'll be hard to get it right in the general case. You could take a look at the source code of the following, which displays an autocomplete dialog as you type in a textarea. It was posted on Ajaxian recently and does what you need to do: http://media.chikuyonok.ru/content-assist/