I'm trying to build some search engine on my nwjs application and for several reasons, I can't use APIs like Mark.js because it causes dom changes wrapping some HTML tag around the word I want to find. That is why I want to use text selection to represent the highlight but I don't know-how.
Sounds like you want this:
https://github.com/nwutils/find-in-nw
It will also add dom wrappers, but removes them when done.
The only other way I can think of doing what you want would be:
Detect the x,y coordinates of text on the page
Good luck. Text reflows based on layout and browser width. If the text is not wrapped in an element I'm not sure how to get it's coords or size (bounding box/rect)
Create an absolute positioned element above it with a mix-blend-mode: darken
This would work for dark text on a background lighter than your highlight. So like white text on a black background with a yellow highlight. But if it's white text on a black background you'd need mix-blend-mode: lighten. Also, good luck determining the background color and text as those can be stored on basically anywhere in the DOM.
You're better off just using that library, or finding a different way approach or define your problem space.
Related
Is it possible to highlight text in an HTML document using without wrapping it with <span> or any other tag for that matter?
For example, in the HTML code <p>The quick fox</p> I would like to highlight quick but without adding a DOM element around it. Adding a DOM element to a parent element is fine.
Thanks!
No, it is not possible.
You can't tell the browser to render a piece of text differently without inherently changing the DOM, regardless of whether you do it statically or dynamically (with Javascript, for example, as a post processing step).
It is possible if you use an absolutely positioned element with a transparent repeating background image or a transparent background color (using rgba or hsla) and position it over the selected area.
Another way to do it would be to have an absolutely positioned canvas element without a background that takes up the whole browser viewport and draw a transparent rectangle over the selection.
It's not possible.
If you just want no tags in the original source code, it might be possible by adding tags later using Javascript magic. You could do something like
<p highlight="quick">The quick fox</p>
and write a JQuery/Prototype/plain JS function to highlight it on the fly, but what for and why? If you elaborate a bit, someone may come up with an idea.
The only way to do this than I can imagine would be to use the <canvas> element, and render absolutely everything by hand.
I am trying to mimic this look of the text split, I found the codepen.io for it but it uses SCSS and I am looking for it to be CSS only if possible. If someone could help me translate the code or make it so that is CSS, that would be great. Thanks for the help in advance.
While I am not going to write out all of the code for you I will suggest a method of doing it:
I suggest you make two div boxes, one for the filled in or solid text and one for the outlined text.
Then you set the color, font-family (Google Fonts is a good resource), font-size, and font-weight, to suit your needs for the first div.
On the second div again set the font-family, font-size, and font-weight to the same values, except set the color to transparent and add a colored border to the text. This will simulate the sort of outlined effect in the codepen.
Oh, and to make the two divs appear on the same line look at this answer.
While this will not automatically split the text between the two texts, it is a simple way to get a similar effect to what you want.
I essentially need to have a user online click drag with the mouse or fingers on a picture of the human body to highlight the selected area red. Basically they're selecting areas of the body that hurt.
Then I need to store this information, and use it as needed.
Looking online I just seem to find how to highlight an area on hover like JQuery's maphighlight feature, which isn't what I want.
I'm very new to coding but am learning as I go along.
There are more pseudo-classes than hover. In this case, active or visited.
You could simply change the selected image section to a highlighted version of the same image.
Or add a border CSS property on :visited
To store information use either a made up data-[whatever] attribute,
or use a regular JavaScript variable. Since you'll need JavaScript to use the given variable anyways.
There are fancier solutions.
MAP is great for selecting shapes within an image, but doesn't have a way to highlight that selection.
Let me explain. I am not looking for a particular attribute of a particular DOM element. I started thinking that if I checked the background-color of the body element, I would find the background color of a page.
But for example for this site: performance bikes the background color of body is black, and it's "obvious" that the main background color of the site is white.
So, I am parsing the site with PhantomJS. What do you think would be a good strategy to be able to find the most "visible" background-color. I don't know how to say that, but for a human it is kind of obvious which color is the background. How to find it programatically?
EDIT: the bikes site is just an example. I am thinking on how I would do this for "any" page.
The background color of the Performance bikes site is transparent. However, because of some weird reason, they decided to make the whole main div to be absolute position, therefore, the body tag is 1px high and thus showing the default white color. One idea I have is, you can check if the body's height is less than some percentage of the window. If it is too small, then it probably is white, or transparent for some special browsers.
Alternatives including taking a screenshot of the page and determine the background color from it.
You can use javascript and check which of the layers is on top, also the width and height of that div, then just grab its background-color property.
What about something like this?
Not perfect, but should return you the element with the biggest area and make sure that it is visible. Won't account for it being below other elements, but it's a start...
var element={
width:0,
height:0,
color:'',
jQEl:{}
}
$('*:visible').each(function(){
var $this = $(this);
var area = element.width*element.height;
var thisArea = $this.width()*$this.height();
if(thisArea>area){
element.width = $this.width();
element.height= $this.height();
element.color=$this.css('background-color');
element.jQEl=$this;
}
});
console.log(element)
I'd take a screenshot, then make a histogram of the image to find the most common colour.
Refinements:
First go through and replace all text content with "& nbsp;"
Give extra weight to the pixels closest to the edge of the screen.
(To automate entirely within PhantomJS, you might be able to use something like http://html2canvas.hertzen.com/ to use a canvas, and never need to make an external image file.)
Another nice solution is to use browser plug-ins. I use Eye Dropper for chrome.
https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
Or you can use colorPicker for Firefox. To get it, in your firefox browser, goto:
Tools -> Add-ons -> top right search bar look for "colorPicker"
It's 10 times faster to find the color of a background on a site this way than searching through the CSS code.
Have a look at this video. In MS Word, one can drag any element anywhere. Based on that, the remaining content (only text, in this video example) reflows and wraps to fit. For example, when two images are side by side and one is dragged away or towards the other, the text in between shrinks or expands accordingly.
Is it anyhow possible to mimic such behavior in HTML, with Javascript? The biggest difficulty I find is the fact that elements own their content in HTML. So, a span owns its text, a div owns its text. But in the video, we can see that the text element in between the images hasn't exactly any content of its own, it gets whatever fits into it while transferring text from left to right. That is why, its content changes with change in orientation. Also, its text is not continuous. It contains bits and pieces of multiple sentences.
Are such manipulations possible with HTML and Javascript? If so, any heads-up will be nice...
Have a look at css exculsions:
http://adobe.github.com/web-platform/samples/css-exclusions/
it might help you acheive what you want. note that it is an experimental feature.