Weather.com is the only example I know of that is doing this, showing a dashed red line under misspelled text instead of squiggles. This is on Chrome in Windows 7
What I'd like to replicate
Any ideas on how this is done? Unfortunately going to inspector clears text from the field.
What most sites show
This turns out to not be a style, but rather an effect of a precisely sized text box/precisely tuned line height. The squiggle is 2px tall, but the bottom 1px was cut off, giving it the appearance of a dashed line, but in fact it is not.
This method can be used to replicate the effect shown IF you are using a font where the letters that extend below the baseline don't go so far down that they touch the spellcheck squiggle.
It seems possible to move the squiggle independently of the text, which could possibly present a way to do emulate this style with any font.
If I find a way to do this, I will update further.
This is a browser feature that can be achieved (at least in Webkit/Blink) on input fields and contentEditable elements with spellcheck="true". Not every browser will implement it the same way. For that, you would have to build the text markers yourself in conjunction with a dictionary service (like Google Docs does, as one example).
https://jsfiddle.net/bn7pfyf3/
(change the "true"s to "false"s and you won't see any highlights on focus)
In Webkit/Blink, this is a DocumentMarker type (which is used for Ctrl+F, highlights, typos in input fields, and more). They are not exposed in the DOM or CSS.
https://github.com/crosswalk-project/blink-crosswalk/blob/master/Source/core/dom/DocumentMarker.h
Related
I have added a HTMLDelegate to a QTreeView instance I'm tinkering with (see How to make item view render rich (html) text in Qt), so I can present its contents with rather simple rich text (HTML). The hits are presented as
<headerstyle>result type</headerstyle><br>
%d results of this type
where "headerstyle" is either a single tag (say ) or a combination of such tags.
That I'd like is to add underlining to the 1st line that spans the entire width of the QTreeView. Checking existing suggestions on here make it seem doubtful that this will be possible, but maybe I'm overlooking something?
I tried adding <span style="border-bottom: 1px solid"> but no borders are ever drawn. That may be a limitation in the HTMLDelegate, but it probably wouldn't work anyway. does work but only applies to the actual text, not the entire first line. I guess what I'd need is a right-aligning tab character...?
Current actual code: https://github.com/RJVB/audacious-plugins/blob/RJVB-MP-Qt/src/search-tool-qt/search-tool-qt.cc#L166
I am currently creating a word cloud using an in house developed library, it uses the svg element text to display the words, the problem I have encounter is that the area of some words sometimes overlaps other words as you can see if you inspect test1 in this jsfiddle, this becomes a problem if the words must be clickable.
I want to know if it is possible to reduce the area of the text to the minimum, just wrapping the word, a small padding is accepted.
I have already tried the solution posted in this answer but it didn't work.
I would prefer a css solution if it exists rather than messing with svg but if there is no other option that will do.
Edit: Ok, enough reputation to post images. What I currently have:
What I would like to have:
There are two problems; I currently have only a solution to one. Your text example is misleading. Try Text1g instead to see the descent (i.e. the amount of space below the baseline which the g needs). If you do this, then you'll see that the texts really overlap - you just don't notice because your test text doesn't contain a good set of test characters.
Apart from that, I see that the element is 67px high while the font-size is only 60px. I don't see where the additional 7 pixels are coming from. It's not padding and not margin :-/
Why do you need to know the minimum bounding box?
If it is because you are linking with the element, or applying click events to the words, then you should investigate the pointer-events attribute.
You possibly want something like:
<text ... pointer-events="fill">ejecutar</text>
You will only get events when the pointer is over the fill of the words. This might be a bit fiddly for clicking though because the holes in words will not be clickable.
You could ease that by putting an invisible <rect> of an appropriate size in front of the word with pointer-events="fill". The "fill" value will attract events for where the fill would be even if it is invisible. However that requires you know the bbox of the word, which we already established you don't have (?).
You could give the words an invisible fat stroke and use pointer-events="all". The invisible stroke will make the clickable area (invisbly) fatter and hence the inter-word holes smaller.
I am looking for an addon to install so that when you select a word in a webpage ( by clicking) it automatically highlights all the instances of that selected words in that text. There used to be this
highlightall addon but it no longer works for recent version of Firefox! It was ver handy as all you had to do is to select that word and all instances get highlighted
Such an addon would be very helpful when reading a code as you can simply select a variable name and it would select everywhere that variable has been used in the code so you could understand the program better.
Ok man I made the addon and released it at AMO. I called HiliteOnSelection I linkified it.
Use it tell me how it works tell me how you would like to change it etc. I appreciate feedback.
More than 50 bounty would have been nice too, a side effect was I learned a lot so it's cool.
If you press ctrl+f and then click highlight all it will do it.
If you want to copy it heres the code for highlihgt all:
function toggleHighlight(aHighlight) {
if (!this._dispatchFindEvent("highlightallchange"))
return;
let word = this._findField.value;
// Bug 429723. Don't attempt to highlight ""
if (aHighlight && !word)
return;
this.browser._lastSearchHighlight = aHighlight;
this.browser.finder.highlight(aHighlight, word);
}
here it is on mxr
if you need more help let me know
Well, my code is quite complex because it performs several advanced services, but if you're asking how to highlight a word of text, the easiest way is to add a style attribute around the word. For example:
This hot dog needs more mustard.
... would become...
This hot <span style="color:#FFFF60">dog</span> needs more mustard.
The above would highlight "dog" in the sentence. The above assumes white text on black background, where yellow is a good highlight color. If the text is black on white background, that #FFFF60 should probably be something like #40FFC0 or #40FF40 or #4040FF or whatever you find looks good.
When you want to remove the highlight, you can delete the <span> element. In my case I usually put the style="color:#FFFF60" in some other existing element, so I don't delete the element to remove the highlight, I delete the style attribute I added to the element.
By the way, the reason I change text color to highlight terms is because that does not change the size of the word, and therefore the text never reflows (and screws up formatting). You could probably change background color to highlight, but I never tried that.
To find all instances of a certain word, I don't know, but probably the TreeWalker is part of the solution.
Ok C Graphics man here's the code
Ok its real easy you don't even have to write another function. Here's the code to highlight any word in the current tab.
gBrowser.selectedTab.linkedBrowser.finder.highlight(true, 'YOUR_WORD_HERE')
if you want to unighlight then set the first argument to false.
You can do this in any tab just have to supply the browser element within the tab.
like this code here will highlight everything in the first tab:
gBrowser.tabContainer.childNodes[0].linkedBrowser.finder.highlight(true, 'YOUR_WORD_HERE');
Is there a simple css way to display text with every letter replaced with a filled square?
My idea was to find a font-family that has squares for all letters, but I didn't find anything like that existing. Google is no friend as it gives hits of posted issues with boxes that appear when fonts fail in some way.
Letters should be displayed as squares, not replaced with squares. Also, I need to be able to control the square fill color with the usual html/css.
I'm fine to use font-face, but am trying to avoid the learning curve for creating my own font.
Update: here is an example:
div.innerHTML = "some arbitrary text".
Should be displayed like this:
"■■■■ ■■■■■■■■■ ■■■■".
#NoobEditor is right although. Many online font editors available (e.g.: http://fontark.net/farkwp/ ), you can create such font family in few minutes and can embed with your app.
Get a square font, define it in your we page style, asign it to an object, a div must work, put your text there. Voila.
This question is a little specific and I am hoping someone here can shed some light on a potential solution for me.
All of the following points are important:
I am writing some HTML pages that are going to be read on a third party hand-held device.
In order to fit the requirements of this device each word must be in a separate span, this is for an upcoming feature of the device that I am not allowed to go into, but it has to be formatted like this.
This HTML is being converted from SVG, the SVG is created from Adobe Illustrator documents.
The only place I have any control of the creation of the HTML is in the conversion from SVG to HTML.
My problem is this, in SVG text is broken down into "text" nodes and tspan nodes. Look at this simple SVG, note how I am changing the Y coord on the first tspan.
<text><tspan y="50">Hello</tspan><tspan> World</tspan></text>
When this renders in a webkit based browser, like safari, the sentence "Hello World" is displayed with the word "World" right next to the word "Hello".
In my converted HTML example:
<div><span style="position:absolute;top:50px;">Hello</span><span> World</span></div>
"Hello" is displayed with a y offset of 50, however "World" is displayed in the top left corner origin of the page.
This is frustrating as I do not have the coords of where the "World" span should be placed in the SVG (as Illustrator does not need this coord to render it correctly). Also, there may be one or more tspans in the SVG with altered positions which will prevent me from applying the style to the div.
In short, does anyone know if there is an attribute I can set to place the second span directly after the first?
Thanks
You could style the div instead of the span
<div style="position:absolute;top=50px;"><span>Hello</span><span> World</span></div>
That would keep text-chunks together and positioned relative to each other, but you could still have a span for every single word
Have figured this out after trying a bunch of different things.
It is actually very straightforward, however I didn't realise spans could be nested so I am going to let myself off.
<div><span style="position:absolute;top:50px;"><span>Hello</span><span> World</span></span></div>
The trick is to wrap all the words that need to be grouped together in a span. Hopefully this helps anyone who is stuck on a similar issue.