Develop Reference

CSS - double spaced text but single space text selection

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:

Textarea that automatically adjusts its own font-size according to content & its length

This has been asked, but as it seems not for Javascript.
I would like to create a TextArea that has two sets of font sizes, one for when it contains less than 3 lines and one for when it contains more than that.
The only problem is that not only will the number of lines in the Textarea affect the chosen font-size, it will also be the amount of content, as when someone just enters a straight line of text without even a single newline, the Textarea will break the lines (using another wrap where horizontal scrolling becomes available is not a solution, unfortunately).
I created a detailled jsFiddle: http://jsfiddle.net/kF9LY
How can i measure the .value content of the Textarea in a fashion that will give me a clear calculation of the lines used, either by newlines or by content exceeding the width of a single line (and thus being displayed in the second) ?

the number of lines as you are describing cannot be measured as far as i know.
you may be able to detect on a key event whether the textarea's scrollHeight has become greater than its height however, meaning that a scrollbar has appeared, and you can then adjust the font size as needed.

It looks like you can find the number of lines from one of the answers in the question, How to get number of rows in <textarea >?.

Input box that expands to display content to the left

After a while thinking about this, I think I could use more brain power.
Imagine the following UI (courtesy of StackOverflow):
Note that the red lines are 'guides'. Imagine that they are <div/> boundaries.
What I want is that when a lot of text is added to the input box, enough to overflow, the input box should 'pop out' and overlay/autosize to the left, like the image below:
This is somewhat similar to how Stackoverflow's works, except that it resizes according to content. Also, similarly to stackoverflow, it need to retract when the input box looses focus.
Usually, I'd come to SO prepared with some code, but this time, it's a bit difficult.
What exactly should I use to 'fix' the input box to the right?
How do I find the internal/content width of the input box?
Note that I'm using a monospaced font, so this might be easier...

Well, I've found the answer....or uhm...created the solution.
It can be found here.
In short, it is mainly a lot of events and a 'fake' input box with absolute positioning.

How to create an editable textbox in HTML that looks and function like a printed text box with lines?

I'm trying to create a editable textbox with HTML/CSS/Javascript that looks and functions like a printed textbox with lines appearing every row.
It must look like this because the form may be printed on paper for people to write in.
I see three approaches to this method:
Table row with 'border-bottom' on each row and using javascript to determine when the text-overflows and move the cursor to the input box on the next row when it does.
This method is probably not very accurate.
Drawing absolute-positioned lines beneath the div/textarea that contains the text.
Using CSS3 repeating gradients to draw the lines behind the div/textarea. Like so: http://net.tutsplus.com/tutorials/html-css-techniques/lets-create-paper-with-css/
. This method is only compatible with modern browsers though.
Which method is the best and why?

Here’s one option. You need a div to draw each line, that could be done beforehand or with JavaScript.
In short, set an explicit line height on your textarea, then absolutely position a container element behind it. Inside that container put a set of elements with a height equal to the line height of the textarea, a one-pixel bottom border, and a negative-one-pixel bottom margin.
It’s most similar to your #2 but a little simpler.

The CSS3 method is best I think. As a fallback for browser that don't support it, you could put a background image of a line there, repeat it both horizontally and vertically, and use CSS to set the font size and line height so the typing aligns with the background image lines.

Well, the CSS3 method would at least let you use relative sizing like ems so people who've resized their fonts will still be ok. If it's not available in older browsers, I don't think that's hugely important, as it's an enhancement to make things easier if people print, rather than something that is essential to people interacting with the textarea.
Absolutely positioned lines might get un-aligned if the user resizes their browser/fonts/etc, although I haven't tested this to confirm. The Javascript seems like overkill for what is just a decorative effect unless the page is printed. And I'm not sure if you can even put tables inside a text-area, although again I haven't tested that.

hide lines of text not fully visible with javascript & css

I think this might be impossible, but is there some way using JQuery to prevent lines of text not fully visible from showing up on the screen when a user scrolls until the entire line is visible? That is, we want to prevent something like this from showing up:
Thanks!

I agree with #rahmanisback, don´t mess with the user's browsing experience.
However, what would perhaps be a nice "inbetween" solution, is using a transparency gradient so that the bottom pixels fade out. But that would apply also to "whole" lines, so perhaps that´s not a good solution for your problem.

I don't know if there is something out there to do that. But I think it will cause confusion more that it would make any visual enhancement ever. A user will not be happy when scrolling down and finds lines just "popup" suddenly, in opposite to normally easing out as a result of scrolling action.
After all, when we speak about a scrollable HTML element with scrollbars visible, a user is aware text might be partially shown and that is normal and needs to be scrolled down to read the remaining. I really would not recommend that.
But for a technical answer, I think you would need to fix the CSS line-height property of that scrolling element, say make it 8px or whatever fits your layout. Then, capture the scroll event and devide the jQuery scrollTop() by that CSS line-height, then check the results: if it have a fraction then that means there is a "partially visible" line. Don't forget aout margin and padding that can cause mistakes when calculating.

I believe I have had this problem also, in that you have a div with a specific height and overflow hidden.
Thinking about it i would resize the div based on the line-height of the text in the div.
Change the height of div so that it equals a multiple of the line height of the containing text....
ie 3 lines of text with line-height = 16 change the div height from 50 to 48px.
( i posted this at the same time as rahmanisback' answer )

Hypothetically you could measure the height of text area, measure the height of the line, find scroll position do some math and then have some way of hiding text that is not fully exposed yet (eg Using a white div of x height depending on your math). However, it seems like a lot of trouble to go to for something that is usually a non-issue. You might also be able to do something with the overflow property, but you might have some issues with that I'm not sure.
I thought of an alternate method that would be easier to implement. Capture scroll events and then change it to the closest multiple of line height.