Assuming I have a div with a fixed width and some auto wrapping text inside. Now I want to insert a span element at the end of the first line. Because the text isn’t written in a specific structure, the first line could contain five words as well as three or just one. So I would need to find the position on which the automatic line-break happens. Is that possible or do I need to insert a manual br or some marker?
It's painfully possible. The question is why are you trying to do this? There may be an easier way to accomplish what you need.
If you decide you still need to do this, what you would have to do is create a clone of this div that cannot be seen. You would set this cloned div's height to 1px or something like that. You can then fill this clone with identical text word by word. Once the div's scrollHeight jumps, you know that the first word wrap has occurred. You can then use this data to figure out where the original paragraph' first line has word wrapped.
You need add or some marker. Different browser calculate how many words should be placed in the first line. And if user change setting of browser, for instance increase font size, the first line will change number of words.
Related
I'm trying to have a block of text in a div fill a downward triangle shape. Is there any way to achieve this with either CSS or Javascript?
This is for a site in which users can dynamically insert text. I'm trying to avoid the alternative method, which is to have them insert text line by line with a limit on each line.
I don't know of any simple way to do what you are asking for. The best thing I can think of would be to use something like the CSS text wrapper, which can fit your text to any shape. I haven't used it myself so I don't know what problems you will run into.
Your question is very similar to this one.
I know of no CSS way, but you can do it with JavaScript. The idea is to find where each line of text breaks and wrap the remaining text in a new child div. You have to use text ranges to accomplish it.
See this demo: http://jsfiddle.net/gilly3/CmguZ/7/
You could wrap each line of your text with a <span> and use margins to recieve the wanted affect and if you want the shape to have a color use photoshop to create a triangle with the desired color and put it on the background.
you can try playing with CSS border slopes, but I don't think it fits your needs entirely, because it's a bit complicated and you have to wrap the text manually. there are some good examples of this method here, but it is for simple shapes basically, not for text containers.
I'm creating a page where there's a textbox that displays a text string from the database, and its length varies. Because of this, some strings happen to be long enough to run onto two lines, but that second line is short, and this doesn't look good:
Here the blue box shows the div that contains the content. It's got a fixed width (80% of the container), and text-align:center.
So my question is: how can I get the text to flow into lines where the line widths are closer to each other? I'm willing to do some math and dynamically adjust the width or font size, but I'm not sure how to do this reliably.
You need JavaScript to do this. CSS alone cannot fix this issue if you are using dynamic text.
Once you've detected that the height of the box goes beyond the limit of one line you can either shrink the font, expand the box or calculate the mid-point to add a break and have two balanced lines.
Here are various jQuery plugins that an do this for you. There are many if you look.
http://fittextjs.com/
https://github.com/jquery-textfill/jquery-textfill
personally I don't like use javascript to "simple things"
you use the following properties
overflow
white-space
http://jsfiddle.net/ALWqd/
I am using a javascript based calendar. I am supposed to introduce a line in it marking today's date. I was able to achieve it for cells that are expanded. But I cannot introduce a line when the cells are collapsed. The reason is that, during the collapsed case, the row is one full div as opposed to seven individual cells.
You can see in the above image there is an ash Line running indicating today's date. But not for the collapsed times. What is the best way to achieve a line in between them?
Is it required that those collapsed ones be only one div or can you make them into seven divs and get rid of the borders?
The idea being that making them separate divs then allows you to put in thicker borders (assuming that is how you are generating the line).
Alternatively you may be able to use a relatively positioned DIV for the marker line and do some calculations on where it needs to be and then have it floating over the rest of your content. This way it would not matter what layout the stuff underneath was. This does rely on there being a relatively easy way to calculate the desired position (I'm assuming its not always just before the last day).
i know <textarea name="textarea" disabled="disabled">dsds</textarea> can disable write in the textarea ,
but how to disable one line i want to disable in the textarea ?
not all line
thanks
That's not possible without JavaScript, even then:
You need to enable contentEditable
You need to write your own editor...
You need to figure out what happens if someone deletes or inserts a line and therefore moves the disable one around
You need to figure out what to do when someone hits enter in the line above the disabled one or backspace at the beginning of the line below the disabled one...
To sum it up, a textarea is the wrong approach here, better use multiple input's for whatever you want to do here, of course you will need to make it look like it's one textarea and you'll still need some JavaScript to make return work as expected (?), but then again you didn't specify what you want to do with this stuff.
Yes, use multiple input texts appear like a single text area, let's call it fake text area. That way disabling one would be easy.
Do not put any margin in between them and no border, all having same width.
Assign incremental ids to each one - like input-1,input-2 etc.
If you want to prefill some text into the fake textarea, calculate the maximum length that can be accomodated into a single input and fill line by line using javascript (jquery would be better).
When cursor is at the end of an input text and enter is pressed, take cursor to next text input. Define a function for every such possibility and call it.
On posting the form, append the input values together to get the actual value of the faked text area.
I guess there may be difficulties in faking a scrollbar for such a textarea but once implemented, should work fine. Any existing plugins like this?
Updates
- For handling cursor positions, refer these things. I did not try myself but may be useful - Jquery Caret position and How to get cursor position in textarea and you can apply the cursor position getting-setting logics. Somehow try to get the actual click position and force the cursor to stay there.
I am doing pagination in javascript. This is typographic pagination, not chopping up database results. For the most part it works, but I have run into a Heisenberg issue where I cannot quite measure text without affecting it.
I am not trying to measure text before it is rendered. I want the actual position it shows up at on screen, so I can paginate to where it is naturally wrapped. I am measuring the vertical position of characters, not the horizontal width of strings. The way I do this is similar to this answer in that I am applying a style to a block of text, then measuring the position of the newly created span. If the span does not reach the end of the page, I clear it and make a new span in a linear search.
The problem is that the anti-aliased sub-pixel text layout is different when the span is applied. In rare cases, this causes the text to wrap differently when I measure it. I have only seen this when wrapping at a hyphen, and I assume it would not happen when wrapping at white space.
As a concrete example, "prepared-he" is the string I am having trouble with. When I measure up to "prepare" it appears, as expected, to be within the current page. When I measure "prepared" the whole phrase wraps down to the next line, moving it to the next page, so it looks like the "d" is the character to break at. I break the text between "prepare" and "d-he" and that is wrong. Trying to evaluate individual characters opens a whole can of worms I would rather avoid. The wrapping changes because, with the new span, the line is 1 pixel wider.
A solution to my problem could either be a better way to measure text using javascript, or a way to wrap text in a new element without affecting layout.
I have tried setting margin-right:-1px for the class of the span being created to wrap the text. This had no noticeable effect.
I am doing this in a UIWebView on the iPhone. There are some measurement related calls that are available in normal WebKit that are not available here. For example, Range does not have getBoundingClientRect or support setting an offset other than 0 in setStart or setEnd.
Thank you
Edit:
I tried the suggestion from unomi of making the span dimensionless. It had no effect. The class I am giving the span has no rules and is just used for quick deletion.
I tried iterating backwards instead of forwards through the text. The wrapping errors showed up in different places but the overall problem remained.
The text is mostly paragraphs with some simple styling. I do not think the method I am using would work with tables or lists. Within the paragraphs, I apply the span to one character at a time.
I tried reducing the font size for the span. The wrapping rules seem to allow wrapping at a span even if it is within a word, so that replaces one set of errors with another.
This is a bit of a cop-out, but do you really want to chop up a paragraph?
Wouldn't it improve readability to simply break at the first <p> that wanders off viewport?
Ok, so just to be clear, it sounds like you are testing the position of a span which is moved character by character through a text? If that is correct, and the issue you have is with breaking up words, why don't you simply jump from white space to white space (optionally including hyphens) rather than from character to character?
Keep 1 previous location and break at it when the current one is off viewport.
I guess before too much else is done, are we sure that we can't make that span truly dimensionless?
span.marker {
border: 0px; padding: 0px; margin: 0px;
width:0px: overflow:hidden; height:0px;
}
I did not find an ideal solution. This is the solution I came up with.
I apply the measuring span to one character at a time. I found two cases where there were problems. Sometimes a word would end up being longer, and the word would wrap to the next line when being measured. Sometimes a word with a hyphen or similar character would split differently when being measured.
For the case of a whole word wrapping differently, I change the class of the measuring span to have a smaller font size. If the same character does not wrap to the next line when using a smaller font size, I ignore the measurement as invalid and continue searching.
For the case of a split word wrapping differently, I measure the same character with the previous character. If the span is not wrapped with two characters, then I assume the next character will wrap and break there.
These problems seem to arise because formatting changes the kerning between characters. When I am using a span to measure the position of a character, it is at a slightly different position because it starts on a pixel boundary and ignores the kerning to the previous character.
I did not try spanning the entire block of text instead of a single character. It would add some complexity and I suspect the same problems would crop up in a slightly different way.