I notice that when the browser (firefox, safari) wraps text, the space where it breaks to wrap (the last space of a line) gets turned into a zero-width space, i.e, when you create a mouse selection across multiple lines in a paragraph, the space where it breaks does not visibly show. Is it possible to change this behavior so that the breaking space retains its width?
Thanks!
It's a guess but I would say no. This is a fundamental way in which the browser works.
Yes, this is possible using a font where the zero-width space character is designed having the width of a normal space. You may use Fontforge to create own fonts or to modify existing fonts. It is free and mighty, but takes some time to get used too.
Related
I'm having a weird issue with webpack for along time, the issue is the layout in Dev is slightly different than the build, while inspecting in Firefox i found that the difference is the white space, my question is what is white space as showing in the image below, and how to keep that white space after building ?
Whitespace is a set of characters which is used to show horizontal or vertical spaces between other characters. They are often used to separate tokens in HTML, CSS, JavaScript.
To keep it , You can use this code   and add a space in the HTML content.
Some aspects of HTML5 and especially Canvas seem to have remain in the pre-word-processor software era, in the 60's when only typewriters existed.
(This issue) For one, you can't make a word or a sentence bold, or underline it inside a text on the same pass, simply and efficiently.
Filltext just fills canvas with a single piece of text and a single style and that's it.
(BTW, a second one is the lack of text-justifying function on both sides for canvas, so I had to made such a function myself using JavaScript.
A third, is a bug that prevents changing multiple custom fonts on subsequent canvas operations unless you have pre-use them(!) after initiation (I discovered that workaround after a lot of struggle).
So I'm thinking of two workarounds:
Locate the set of words you want to change the style, calculate the start x,y position and the total length using 'measureText', do the first pass replacing them with spaces, then do a second pass and only write those words with a different style inside the empty space.
Embed 2 or more styles on the same custom font and same language, like they were different languages in Unicode.
Is there another workaround?
I'm asking in case I'm missing something, or someone out there has a decent idea.
I'm working on a project to generate an image that replicates user-entered text input in a <textarea>. The best approach I've found is to read the <textarea>'s value and draw it on a <canvas>, from which I can read a blob and save to a file.
Here is a very naive example, just to give an idea of what I'm trying to do:
https://codepen.io/troywarr/pen/wmbMVq
Note that when the text that you enter in the <textarea> exceeds the length of the first line, the text in the <textarea> wraps, but the text on the <canvas> does not. That's the crux of the code that I still need to write, but first I need to fully understand <textarea>'s line wrapping behavior so that I can recreate it with a JavaScript algorithm.
By playing around with a <textarea> in Google Chrome, I've determined some basic behavior when a word exceeds the line width (as set by the rendered width of the <textarea>):
Words that are preceded by a space will wrap, and the width of the preceding space is not factored into the rendered width of the previous line.
Words that are hyphenated with a figure dash (‒, U+2012), en dash (–, U+2013), or em dash (—, U+2014) will wrap after the last hyphen that fits on the current line. I'm still exploring if there are other characters that hyphenate.
Words that exceed the total line width will be broken mid-word, with subsequent characters overflowing to the next line(s).
However, experience tells me that there are likely to be some edge cases and cross-browser functional differences that I haven't considered. I searched for specifications that describe how exactly <textarea>s should wrap text, but I haven't found any. The closest I've gotten is the spec for the wrap attribute, but it doesn't offer much help.
Is this behavior just dictated by different rendering engines (i.e., not W3C-specified), or am I just missing the W3C specification? If the former, what behavior have I missed, and what do I need to be aware of in terms of cross-browser functional differences?
I have a piece of HTML which I am displaying inside a UIWebView using Webkit stylesheet attributes. I use Webkit to display the HTML in columns in order to simulate a book.
Only one column is visible at a time (one column represents one page). Now, I am trying to find the range of the visible HTML so that I can insert a span element right before the first visible word.
I managed to get the HTML element which contains the first visible word by using the JavaScript function, document.elementAtPoint(I might have the function name wrong), and changed its CSS class. but that just isn't accurate enough for me. I need it to be accurate up to the first visible word.
The idea is the create a column break at the first visible word when the fontsize is increased or decreased. I can using JavaScript to figure out in which column the element is, and programmatically scroll the user to that column, but first I need to get the element in there.
Can anyone help me?
The CSSOM View Module specification adds caretPositionFromPoint(x, y) to the Document interface, which returns a caret position for the specified x and y co-ordinates. WebKit supports caretRangeFromPoint, a close analogue from an earlier specification, which returns a Range.
It is possible that the word has been hyphenated and thus spans two columns, so rather than wrapping the first word in a span you may wish to consider the more naive approach of inserting the span directly at the cursor point. Here's an example:
var caretPos = document.caretRangeFromPoint(x, y);
if (caretPos)
caretPos.insertNode(document.createElement('span'));
Demo (WebKit only—click to insert spans): http://jsfiddle.net/Jordan/Aw9aV/
One final consideration: it is possible that WebKit will eventually stop supporting caretRangeFromPoint in lieu of caretPositionFromPoint; if so, you will need to adapt your code. Also note that the latter returns a CaretPosition which may not implement the insertNode method. The spec is still at WD, so be mindful that it is still in flux.
Ok, nog entirely sure what you are currently doing, but at the very least I should be able to give some useful tips, as I have some experience building page browsing systems in javascript.
First of all, in CSS3 you can define columns https://developer.mozilla.org/en/CSS3_Columns , which will automatically split up the content into different columns within a single element (where a single column has the full width of the uiwebview) and next add browsing controls which move the entire element containing the element (using css3 3d translations for smooth hardware accelerated motion and you know the width of the columns so you don't need to worry about what the first word on the page is). In which case you don't need to worry about splitting up the column breaks yourself. (Though, as I said, I am not sure to what extend you are already doing this).
Alternatively you may decide to wrap all your content in small inline-blocks (as older column implementations did) or even up to the point of single inline elements, each containing a single word. (Though this doesn't seem necessary anymore)
Lastly, work is being done on http://www.w3.org/TR/css3-regions/ which will make this even easier in the future, but for now it's only available in chrome and ie10
On the other hand, you might already be doing this or I might be missing the point, in which case I would need to see some code before I can give you a more specific answer. (I can think of various javascript tricks to work with letters within a text, but none seem necessary in your case)
I have a small <p> about 140px wide aligned next to a picture. In total there is space for four lines of text. The first two lines are reserved for the title and there are two lines of other info.
I want the title to be cut if it spans more than two lines else it will push the other info out of line with the bottom of the image.
The only solution I could think of was to create a div the height of two lines with an overflow to hidden. However, if the title is only one line it leaves a big gap.
The solution can be Jquery, plain javascript, CSS or even PHP (if its possible).
TIA
Set the title to have a max-height of two lines
Keep in mind that the property max-height is not supported in IE6. In addition, limiting the size of text boxes can cause accessibility issues, and is generally not recommended.
As this is more of a content issue than a display issue, it's probably best to deal with it on the back end - if it's dynamic text, limit your database field to an appropriate character count, or chop it with some php (or whatever server side situation you're set up in). It's tough to establish a character count with a non-monospaced font, but if you don't limit it on the content side, you run the risk of upsetting your less visually-inclined users who may be using older browsers that don't zoom all fancy like the latest releases of safari and chrome.