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.
Related
Anchor boxes are important to YoloV3, especially when running on the custom dataset.
I knew that anchor boxes are calculated with bboxes height and width, through kmeans.
After I got the anchor boxes, they are supposed to be distributed into 3 scales. By default, the 3 scales are 1313, 2626, 52*52.
So, the question is how to decide which anchor belongs to which scale?
Currently, I'm sorting those anchors based on their summary, since the 13*13 scale should have a larger anchor.
Am I right here?
Following is an example:
Then, I sort them:
.
In the second image, the first 3 anchor boxes belongs to 13*13 scale.
I read lots of blogs and codes, but seems no one have explained that clearly, may because of it's too simple for them.
What is the best practice for making information normally displayed as the background color of a cell accessible (for screen readers and such)?
This is an example of my table (with names and numbers changed to protect the innocent):
The table contains temperatures. Yellow and red backgrounds indicate the results of screenings. My real table is very large and making it information-dense is a high priority, so I don't want to just put the results of the screening in the cell as text as it would make my columns much wider. Ideally, I would put an alt-text of some sort on the yellow and red cells with something like "positive test result" or "failed screening". Is there a way to do this in an HTML table?
I thought maybe title would be the right attribute here, but the internet says that is wrong.
Short answer
If the color brings a real information, like telling if it succeeded (green) or failed (red), the best is to write it plain text next to the value.
Alternatively, you can use an icon with proper markup.
Longer answer
The general rule as stated in WCAG is don't convey information only with colors, basicly meaning
you must add something else other than just colors to allow everyone to get the information.
You can add anything you like, i.e. text or icon. It's fine as long as there is another way than just color to get the information.
You may be tempted to write the information in plain text but make it visible only for screen reader users, as follows:
<td>123<span class="sr_only"> Success</span></td>
<td>-45<span class="sr_only">Failed</span></td>
Or alternatively, use aria-label with these additional warnings:
aria-label is guaranteed to be taken into account only if the element is interactive. By default a table cell isn't interactive.
The aria-label attribute entirely replaces the content of the cell. So you must write <td aria-label="123, success">123</td> and not <td aria-label="success">123</td> because in that later case the screen reader user won't get the value.
However, both are in fact bad ideas, and don't fully conform to the WCAG rule stated above.
For example, color blind people can see the screen and so don't need a screen reader, but may not be able to make the difference between red and green.
Thus the data wouldn't be accessible to them.
The fixed scale case
IF your colors express some scale, i.e. green is good, yellow is acceptable and red is bad, and if the color depends on fixed values, i.e. green above 60, yellow between 40 and 60 and red below 40, then in fact the color doesn't bring any new information.
It is just a visual indication so that you can quickly see what is good and what is bad. IF you remove the colors, you certainly lose some ease, but the information is still there in the value itself.
IN this case, it can quickly become uselessly noisy to add a text saying "good", "acceptable" or "bad" in each cell,
since as long as you remember the scale, the value itself tells you if it's good or bad.
OF course you will explain clearly and in plain text the meaning of the colors, probably above or below the table, and make the information visible for all users.
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
This is my code:
<table>...Some content...</table>
<table>...Another content...</table>
I want to put the second table on top of the first table. This is to be used as an email template (in some clients position and margin are not available).
Those are the only two options available (outside of transform, which definitely won't work if position isn't available) that will allow one element to invade another element's space. If you can't use position or margin, then you're out of luck, and you need to re-evaluate what you are trying to achieve and why. Any chance you could do this with images?
There are always ways...not always elegant, but when you have limited options, 'works' is often all you really need. IMO, creativity is as much about solving a problem with limited options as it is thinking 'outside the box'.
Most email clients allow you to set 'height', so simply wrap the first table (the background) in a div and give that div height:0px;. the table will overflow the div, but the next element won't respect it's space because it has 0 height, and will effectively be layered in front.
http://jsfiddle.net/L0d3tnzu/
If you want the size of the tables to match exactly, you'll probably have to explicitly set heights and widths, but the fiddle above illustrates the basic concept. Hope this helps!
EDIT:
Based on the additional info in the comment (the second table should only partly overlap the first table) here is an updated fiddle: https://jsfiddle.net/acq3ob6y/1/
EDIT #2:
Dang. Outlook switching to the Word/Office rendering engine for HTML/CSS might be the only way possible to get WORSE than the IE version. Sigh. (Thanks to #Gortonington for the comment/clarification, though!)
Ok, then, the idea of a background image is only a problem for retina displays (if you want them to be all crisp and beautiful and retina-ie), and retina devices are going to be handling CSS in a more modern way (hopefully!), so how about this as a solution: Media Query targeting device resolution loads CSS with the double-size img and uses css background-size to constrain it: http://jsfiddle.net/tcyjo7ok
Third try is a charm? At least the list of options is growing...
The only way to overlay two elements across email clients is through use of background images. Even this can be broken in some clients and requires a lot of conditional and reiterate code (backgrounds.cm is good resource for email bg images).
This is the only option that will display in MOST clients. Even this is still very restricted and not very agile to use (but that is true in ALL email coding). Most other techniques will only work for a couple clients and break completely in all others.
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.