Placing text characters w/ javascript without using a div - javascript

I am going to be placing a lot of characters and words all over a web page using absolute positioning. I could put each character in it's own div, then set it's position. Is there any other way to place an individual word or character on a page without putting it in a div (to save memory). I figure not (which is fine), but if there is another way I'd like to explore it.

Try using html canvas. It will allow you to draw text to it at any position you want. https://developer.mozilla.org/en/Drawing_text_using_a_canvas

You can use tags like <b> and set their css to font-weight: normal;.
If you are going to be worry about the DOM tree size, you can go ahead with this way of implementation. But what is the use of implementing this? There are plenty of jQuery and JavaScript snippets available right?

You will need some type of html tag surrounding the text or else you will have no way to apply CSS.

This cannot be done in the manner you are imagining. Anonymous boxes cannot be manipulated and, generally speaking, do not carry traditional properties. You will have to use a wrapper tag.
you can read more here: http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level

Related

DOM manipulation in Angular directive after sub view rendering

I need a directive that will truncate long text in element and show a popover with full text in case truncation take place.
See http://plnkr.co/edit/90WP5ISQHG7FXRpetucm?p=preview
For text truncation I've used CSS and it works well.
But when I'm trying to access element content I see {{str.data}} rather then exact text from the data.
I guess that I need even't that is fired after rendering, but I can't fing any suitable.
So my question how can I run my DOM manipulation after sub view get rendered?
The only solution I've found so far is using timeout, but I think that there is better solution for it.
Do you mean just a simple rollover to show the remainder text? That's simple CSS.
.truncate-overflow:hover{ width:auto; overflow:visible; }
If not that, I would suggest storing the data into two separate pieces of data by limiting the string length. See how to do that: https://stackoverflow.com/a/7463674/1327678
I worked around this issue by performing my DOM manipulation inside mouseover instead of link method.
See http://plnkr.co/edit/90WP5ISQHG7FXRpetucm?p=preview for more details.
PS. Popover position is incorrect because plnkr overrides css manipulation and do not set top and left.

Splitting HTML Text Content into Groups while Preserving HTML Layout

I'm currently wondering about the ability to apply dynamic formatting to content in an HTML page without changing the flow rules. At face value, this might seem simple, since you can select a subset of the DOM and mass-apply. However, this would not work if you wanted to apply that formatting to a only one part of the text for a particular object.
For example, formatting:
<div>Let's start my format here <span> and here </span> and <br> here too. <br> But not here.</div>
If you wanted to exclude <br> But not here. from your formatting there is no clear way to do it for the case of an arbitrary layout, even if you did so manually. One approach is to break the div into span sections, then format them differently. Unfortunately, wrapping arbitrary HTML in inline elements causes some unfortunate side-effects (e.g., any <br> tag in a span will be treated as if it doesn't exist). Using a block element wrapper, like introduces similar issues by adding breaks that didn't exist. I cannot seem to find a way to declare a DOM group that can just plain act as if it were plain text within the parent object.
So then, I'm trying to figure out a good general workaround to introduce display-level formatting while preserving any layout formatting. This kind of formatting could include text formatting (e.g., highlighting, emphasis) or dynamic effects (e.g., hide/reveal). I can think of a few hypothetical solutions, but I am not sure what (if any) actually are possible in practice:
An existing inline layout element like span that doesn't kill your line breaks and other formatting requests.
The ability to make a custom element such as #1 using CSS. Maybe the run-in or inherit display tags might be useful for this purpose? (https://developer.mozilla.org/en-US/docs/Web/CSS/display) Neither of them seem like they solve this issue, however.
A way to prevent a span from clobbering formatting markup inside of it.
A grouping element that acts as a pass-through for layout formatting (i.e., is treated like untagged text for layout purposes) but allows display formatting.
One would think this would be a straightforward thing to do. After all, it's not hard to imagine wanting to split a div into two different sections that are text-formatted slightly differently, while retaining their layout formatting. However, I can't seem to find the right tool for this job.
After looking at this quite a while, the best that I came up with was to use span wrappers for the text nodes only, accompanied by clobbering the default CSS formats for spans. This had its drawbacks, but thankfully people often leave the basic span class alone.
However, considering it further, I think the best solution is actually to make a new type of span using webcomponents.js and then to make that span type always inherit the parent formatting. Particularly if that span type has a very arbitrary name (e.g., <span-(some guid)/>), that should be sufficient to prevent any chance of accidental conflict. I have also found that by wrapping only the text nodes, there is no chance of losing line breaks or other formatting, since those elements can never exist in a text node.
I am not necessarily saying this is the best answer, but it is the best one I've seen so far.

How to manually manage text wrapping in HTML

When working with designers, they often are very picky about word wrap in the completed HTML page. Assuming that I'm working on a fixed layout (not-responsive), and the designer does not like the way text is wrapping, I can:
Adjust padding-right
Add manual <br> to break a line
Add manual to avoid a break (typically for orphan control)
(In my case, I'm designing for a specific mobile device, so I know the screen size, and can control the fonts. Also, making the designers happy is non-negotiable.)
The issue that I keep running into is that the text or layout will be updated later, and relics of this specific word wrap concern, which no longer apply, introduce issues we then need to fix.
So I'm wondering if anyone can suggest a strategy that:
Allows completely arbitrary control of word wrap in individual
cases; but,
Doesn't make everything so hard to maintain going forward
I'm open to procedural, algorithmic (javascript), or CSS-oriented suggestions.
Here is the strategy I chose. Time will tell how maintainable it is.
Do not edit the text content
Fix wrapping by adding CSS classes that change the way the text flows, but do not use attributes like width or padding that are already being used to control layout
Specifically:
.tighten {
letter-spacing: -0.011em;
}
.loosen {
letter-spacing: 0.011em;
}
.hyphenate {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-after: 4;
-webkit-hyphenate-limit-before: 4;
}
It turns out that these imperceptible changes in spacing can make a huge difference in wrap. I actually have several variations of these classes, so I can try progressively more or less space to fix wrapping.
In severe cases, I use the hyphenate class (I'm only targeting iOS in this case).
In a future revision, when we change the text in a div, we can just remove the tighten, loosen, or hyphenate class from that div, and see if there are any wrap issues we need to correct. If there are, we go through the original trial-and-error of seeing which class gives the best look.
Use <pre> tag so you can insert preformated text.

Word Wrap in Raphael JS / SVG

How do you get words to wrap inside a box in RaphaelJS? Or in browser-based SVG in general?
I found this thread on it, but it doesn't make any sense. They say to use "widthToCharNum" but as far as I can tell, this thread is the only place those words have ever been used on the internet. They suggest using a "width" attribute, but this has no effect.
Text-wrapping is not built into Raphael or the SVG spec. Period. Coming from the HTML world, I found the absence of text wrapping pretty shocking.
However, you can do it yourself without too much difficulty. See this question for details and an example. Unfortunately, you have to burn some client-side cycles to make it work dynamically.
The svg.js library has a svg.textflow.js plugin. It's not ultra fast but it does the trick. It even stores overflowing text in a data attribute so you can use it to create continuously flowing columns. Here the text flow example page.
The tspan tag can give the illusion of word wrap, but there is no built in word wrap functionality.
The tspan tag is identical to the text tag but can be nested inside text tags and inside itself. Coupled with the 'dy' attribute this allows the illusion of word wrap in SVG 1.1. Note that 'dy' is relative to the last glyph (character) drawn. There is a tutorial on how to use tspan at http://tutorials.jenkov.com/svg/text-element.html.
The article at http://www.xml.com/pub/a/2002/09/11/quint.html might also be useful.
I know it's a little belated now, but you might be interested in my Raphael-paragraph project.
It's a small library that allows you to create auto-wrapped multiline text with maximum width and height constraints, line height and text style configuration. It's still quite beta-ish and requires a lot of optimization, but it should work for your purposes.
Usage examples and documentation are provided on the GitHub page.

Converting html to svg using javascript/jquery

Is there a way to convert an html snippet to svg?
for example:
<b>This is bolded</b>
I want to make an svg document with the html snippet above... is this possible?
I would suggest that you should edit your question to describe the actual use case and goal you are trying to achieve, as directly implementing what you seem to ask for is hard (see below). Some combination of SVG-in-XHTML or XHTML-in-SVG (for example, this) are far more likely to give you want you want.
We can only help you achieve your goals if you tell us your goals instead of asking us help you to solve a particular implementation you thought of to achieve them.
As I mentioned above, There is not an easy way to do what you suggest. In particular, HTML has automatic line wrapping, floating and general positioning concepts, as well as explicit z-indexing, that are not present in SVG.
The following madness would mostly work, however:
Create an iframe or div on your page and set the HTML to your snippet.
Loop through every element and convert wrap a margin:0;padding:0;border:0 span around every word in the text.
Loop through every element (including your created spans) and calculate the absolute position on the page. (jQuery has a method to do this, or you could use the combination of offsetLeft/offsetTop and offsetParent to walk up the positioned tree and calculate it yourself.)
Calculate the equivalent z-index for each element by walking up the tree and using the getComputedStyle() and creating a chain of the local z-index.
For each of these elements, create the equivalent element in SVG with absolute positioning.
Re-sort the SVG elements you created by the hierarchy of z-indices.
Check this html to SVG demo, (using HiQPDF, a commercial product). You can find there code samples for C# and VB.NET. You can convert an URL or a HTML code snippet as you requested.
There are JS libs, that convert html to canvas:
http://html2canvas.hertzen.com/
But until now, I did not found something similar for svg.

Categories