I am developing a web app where I am displaying arabic words in a jquery ui combobox,
It's working perfectly in IE and firefox,but chrome is displaying the words in separate way !
you can see the difference between the two sony in the combobox and the dropdown list
here is my meta
<meta http-equiv="content-type" content="text/html";charset="utf-8" />
and The data is stored in sql server using collate
Looking at the page you mention in a comment, http://jqueryui.com/demos/autocomplete/#combobox in Chrome F12 editor, it seems that in this browser, a jQuery-generated dropdown list element like foo appears so that each character is inside a separate strong element: <strong>f</strong><strong>o</strong><strong>o</strong>. In Firefox, I see a generated select element instead, with <option>foo</option>. I suppose this depends on jQuery, which tries to accommodate for browser differences.
In any case, markup like <strong>f</strong><strong>o</strong><strong>o</strong>, though mostly harmless for texts in the Latin alphabet, may mess up Arabic text badly, since it may make browsers treat each letter as independent and use the independent glyph form for it. Cf. to the question Partially colored arabic word in HTML.
I hope someone who knows jQuery well can come up with a suggestion to fix this. All that woule be needed is to avoid separating the letters as in <strong>f</strong><strong>o</strong><strong>o</strong>, using just <strong>foo</strong> (if simple foo won’t do).
I did't ;)
in the jquery ui combobox javascript you will have this function
if (this.value && (!request.term || matcher.test(text))) return {
label: text.replace(
new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span></span>"),
value: text,
option: this
};
I've just removed the "gi" so the code is
if (this.value && (!request.term || matcher.test(text))) return {
label: text.replace(
new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", ""), "<span></span>"),
value: text,
option: this
};
and it's working just fine now :D
That depends on the used font, not on the character set.
As one can see from your screenshot even the latin variants of "Sony" differ slightly (mind the Y). Try to use the same font in both cases.
Related
My problem occurs when I try to use some data/strings in a p-element.
I start of with data like this:
data: function() {
return {
reportText: {
text1: "This is some subject text",
text2: "This is the conclusion",
}
}
}
I use this data as follows in my (vue-)html:
<p> {{ reportText.text1 }} </p>
<p> {{ reportText.text2 }} </p>
In my browser, when I inspect my elements I get to see the following results:
<p>This is some subject text</p>
<p>This is the conclusion</p>
As you can see, there is suddenly a difference, one p element uses and the other , even though I started of with both strings only using . I know and technically represent the same thingm, but the problem with the string is that it gets treated as a string with 1 large word instead of multiple separate words. This screws up my layout and I can't solve this by using certain css properties (word-wrap etc.)
Other things I have tried:
Tried sanitizing the strings by using .replace( , ), but that doesn't do anything. I assume this is because it basically is the same, so there is nothing to really replace. Same reason why I have to use blockcode on stackoverflow to make the destinction between and .
Logged the data from vue to see if there is any noticeable difference, but I can't see any. If I log the data/reportText I again only see string with 's
So I have the following questions:
Why does this happen? I can't seem to find any logical explanation why it sometimes uses 's and sometimes uses 's, it seems random, but I am sure I am missing something.
Any other things I could try to follow the path my string takes, so I can see where the transformation from to happens?
Per the comments, the solution devised ended up being a simple unicode character replacement targeting the \u00A0 unicode code point (i.e. replacing unicode non-breaking spaces with ordinary spaces):
str.replace(/[\\u00A0]/g, ' ')
Explanation:
JavaScript typically allows the use of unicode characters in two ways: you can input the rendered character directly, or you can use a unicode code point (i.e. in the case of JavaScript, a hexadecimal code prefixed with \u like \u00A0). It has no concept of an HTML entity (i.e. a character sequence between a & and ; like ).
The inspector tool for some browsers, however, utilizes the HTML concept of the HTML entity and will often display unicode characters using their corresponding HTML entities where applicable. If you check the same source code in Chrome's inspector vs. Firefox's inspector (as of writing this answer, anyway), you will see that Chrome uses HTML entities while Firefox uses the rendered character result. While it's a handy feature to be able to see non-printable unicode characters in the inspector, Chrome's use of HTML entities is only a convenience feature, not a reflection of the actual contents of your source code.
With that in mind, we can infer that your source code contains unicode characters in their fully rendered form. Regardless of the form of your unicode character, the fix is identical: you need to target these unicode space characters explicitly and replace them with ordinary spaces.
I would like to get a string, of a word broken into one or more syllables, and if more than one, with hyphens, in-between, too.
For example: I would like to get Floccinaucinihilipil-ification out of Floccinaucinihilipilification.
Current browsers are able to break them by hyphens already, grammatical correct.
The reason: I would like to show a term like it would have been shown in a dictionary. Therefor the easiest thing would be to get access to how the browser would break it, but show it in one single line.
In other words: Is there any way to get access to a word as it would be shown to an user agent if there is enough space to show at least the narrowest syllables?
It's possible, if a bit tedious, to determine where the word wraps are located in the document. But you're also depending on the browser having a hyphenation dictionary, which can depend on the platform and possibly the user's language.
Here's one approach, which works in Firefox. I couldn't get Chrome or WebKit to reliably hyphenate the word at every possible spot, and it simply gave up hyphenating below a certain width.
testbed.innerHTML = testbed.innerHTML.replace(/./g, '<span>$&</span>');
outer = testbed.getBoundingClientRect();
match = [...testbed.querySelectorAll('span:not(:first-child)')].filter(e => e.getBoundingClientRect().x == outer.x);
match.forEach(e => e.classList.toggle('match', true));
output = [...testbed.children].map(e => (e.classList.contains('match') ? '-' : '') + e.textContent).join('');
console.log(output);
div#testbed {
width: 0;
hyphens: auto;
}
span.match {
background: magenta;
}
<div id=testbed lang=en>Floccinaucinihilipilification</div>
If you want automatic hyphenation you will have to use a third party js library like Hyphenator.
If you want to place marks, such as , manually, you can do so within the html by hand.
I am using gtk in an application and I make use of the abilities of gtklabel text to be rendered automatically as a clickable url. This works well most of the time, however with a url which contains parentheses "(" and ")" this does not work. The versions I use are the ones available on debian (old)stable, i.e. debian 6 (2.20) and 7 (3.4.2).
For example, I am trying to display the following url:
https://maps.google.com/maps?q=62.1891,+-141.5372+(Example+text+in+here+will+be+rendered+in+the+maps+label)&iwloc=A&hl=en
When I create a gtklabel with this text, for example:
text="<b>Click here for Map</b>\n"
Then it will display fine in the label as an underlined link in bold with the text Click here for Map
However when you click the link it will not show correctly and this error appears:
Gtk-WARNING **: Unable to show '(null)': Operation not supported
It looks like the parentheses mess up the rendering of the url by gtk.
Is there a way to escape the parentheses, or use a different character that works in the map url to create the label?
I have tried various methods of escaping it, however none were effective so far. Such as using %28 and %29 to replace the parentheses as well as backslashes as an escape character.
I am using the method described in https://developer.gnome.org/gtk2/2.24/GtkLabel.html and https://developer.gnome.org/gtk3/stable/GtkLabel.html under "Links" which allows automatic rendering of links:
Links
Since 2.18, GTK+ supports markup for clickable hyperlinks in addition
to regular Pango markup. The markup for links is borrowed from HTML,
using the a with href and title attributes. GTK+ renders links similar
to the way they appear in web browsers, with colored, underlined text.
The title attribute is displayed as a tooltip on the link. An example
looks like this:
1 gtk_label_set_markup (label, "Go to the http://www.gtk.org\" title=\"<i>Our&/i> website\">GTK+
website for more...");
I understand it is working in more recent releases of gtk (2.24 and 3.6), making sure to escape ampersands. But I was wondering if there is a work around for older gtk versions to avoid this problem?
You should be escaping your ampersands with &.
I'm pretty sure GTK prints out a runtime warning telling you this when you call gtk_label_set_markup().
Here's the warning on GTK 3.6.4:
Gtk-WARNING **: Failed to set text from markup due to error parsing markup: Error on line 1: Entity did not end with a semicolon; most likely you used an ampersand character without intending to start an entity - escape ampersand as &
jku is right, the ampersand need to be escaped. He're an example using the very same string as you, and it works (tested on 3.6.4 and 2.24.17).
#include <gtk/gtk.h>
int
main (int argc, char **argv)
{
gtk_init (&argc, &argv);
GtkWidget *window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
// This one won't work, needs ampersand escaping
// GtkWidget *label = gtk_label_new ("<b>Click here for Map</b>\n");
GtkWidget *label = gtk_label_new ("<b>Click here for Map</b>\n");
gtk_label_set_use_markup (GTK_LABEL (label), TRUE);
gtk_container_add (GTK_CONTAINER(window), label);
gtk_widget_show_all (GTK_WIDGET (window));
g_signal_connect (window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
gtk_main ();
return 0;
}
Original answer:
Have you tried to call gtk_show_uri with that link? You could then see if that's a problem with what handles URI's, or if it's the way your label is formatted/constructed.
I need a way to identify certain strings in HTML markup. I know what the strings are, but it is possible that they could be substrings of other strings in the document. To find them, I output a special delimiter character (currently using \032). On page load, we go through the HTML and record the location of the strings, and remove the delimiter.
Unfortunately, most browsers show the delimiter character until we can find and remove them all. I'd like to avoid that if possible. Is there a character or string that will be preserved in the HTML content (so a comment wont work) but wont be visible to the user? It also needs to be something that is fairly unlikely to appear next to a string, so something like wouldn't work either.
EDIT: Sorry, I forgot to mention that the strings will be in attributes, so any sort of tag wont work.
- zero-width non-joiner (see http://htmlhelp.org/reference/html40/entities/special.html)
On the off chance that this already appears in your text, double it up (eg: mytext
Edit in response to comment: works in Firefox 3. Note that you have to search for the Unicode value of the entity.
<html>
<body>
<div id="test">
This is a test
</div>
<script type="application/javascript">
var myDiv = document.getElementById("test");
var content = myDiv.innerHTML;
var pos = content.indexOf("\u200C");
alert(pos);
</script>
</body>
</html>
You could insert them into <span> elements. This will work only for in-page text (not attributes, or the like).
Otherwise, you could insert a whitespace character that your program doesn't already output as part of the HTML, like a tab character (\x09), a vertical tab (\x0b), a bare carriage return (\x0d) — without a newline beside it, ala Windows text encoding — or, just a null byte (\x00).
The best thing that I shall like to insert, which is not visible on the browser, will be a pair of tags with some special id, like <span id="delimiter" class="Delimiter"></span>. This will not show up on the content, while this can be present in the doc. You don't need to remove them.
You could use left-to-right (LTR) marks. Is this for some sort of XSS testing? If so, this might be of interest: Taint support for PHP
I have to maintain a large number of classic ASP pages, many of which have tabular data with no sort capabilities at all. Whatever order the original developer used in the database query is what you're stuck with.
I want to to tack on some basic sorting to a bunch of these pages, and I'm doing it all client side with javascript. I already have the basic script done to sort a given table on a given column in a given direction, and it works well as long as the table is limited by certain conventions we follow here.
What I want to do for the UI is just indicate sort direction with the caret character ( ^ ) and ... what? Is there a special character that is the direct opposite of a caret? The letter v won't quite cut it. Alternatively, is there another character pairing I can use?
There's ▲: ▲ and ▼: ▼
Don't forget the ∧ (logical and) and ∨ (logical or) characters, that's what I use for indicating sort direction: HTML entities ∧ & ∨ respectively.
There's always a lowercase "v". But seriously, aside from Unicode, all I can find would be &darr, which looks like ↓.
An upside-down circumflex is called a caron, or a háček.
It has an HTML entity in the TADS Latin-2 extension to HTML: ˇ and looks like this: ˇ which unfortunately doesn't display in the same size/proportion as the ^ caret.
Or you can use the unicode U+30C.
˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅
˅˅˅ Hǝɹǝ,s ɐ ɯɐʇɔɥᴉuƃ sǝʇ˙ ˅˅˅
˄˄˄ Here's a matching set. ˄˄˄
˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄
"Actual size": ˅˄˅˄
(more info)
Edit: Another Option...
⋁⋁⋁⋁⋁⋁⋁⋁⋁⋁ Unicode #8897 / U+22C1 ("n-ary logical or")
⋀⋀⋀⋀⋀⋀⋀⋀⋀⋀ Unicode #8896 / U+22C0 ("n-ary logical and")
"Actual size": ⋁⋀⋁⋀
A powerful option – and one which also boosts creativity – is designing your own characters using box drawing characters.
Want a down pointing "caret"? Here's one: ╲╱
I've recently discovered them — and I take great pleasure at using such custom designed characters for labeling things all around :) .
You might be able to use the black triangles, Unicode values U+25b2 and U+25bc. Or the arrows, U+2191 and U+2193.
c# code
int i = 0;
char c = '↑';
i = (int)c;
Console.WriteLine(i); // prints 8593
int j = 0;
char d = '↓';
j = (int)d;
Console.WriteLine(j); // prints 8595
You might consider using Font Awesome instead of using the unicode or other icons
The code can be as simple as (a) including font-awesome e.g. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> (b) making a button such as <button><i class="fa fa-arrow-down"></i></button>
I'd use a couple of tiny images. Would look better too.
Alternatively, you can try the Character Map utility that comes with Windows or try looking here.
Another solution I've seen is to use the Wingdings font for symbols. That has a lot fo arrows.
I did subscript capital & bolded V. It works perfectly (although it takes some effort, if it needs to be done repetitively)
Syntax:
<sub><strong>v</strong></sub>
Output:
v
U+2304 DOWN ARROWHEAD, in HTML as ⌄
The ^ (Caret - or Ascii Circumflex), produced by pressing shift + 6, does not appear to have an Ascii opposite, namely an Ascii Inverted Circumflex.
But for your alternative character pairing that also have keyboard combinations, you could use:
ˆ (Circumflex) shift + alt + i and
ˇ (Caron) shift + alt + t
Source: fileformat.info
There is no upside down caret character, but you can easily rotate the caret with CSS. This is a simple solution that looks perfect. Press 'Run code snippet' to see it in action:
.upsidedown {
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
}
.upsidedown.caret {
display: inline-block;
position:relative;
bottom: 0.15em;
}
more items <span class="upsidedown caret">^</span>
Please note the following...
I did a little correction for the positioning of the caret, as it is normally high (thus low in the rotated version). You want to move it a little up. This 'little' is relative to the font-size, hence the 'em'. Depending on your font choice, you might want to fiddle with this to make it look good.
This solution does not work in IE8. You should use a filter if you want IE8 support. IE8 support is not really required nor common in 2018.
If you want to use this in combination with Twitter Bootstrap, please rename the class 'caret' to something else, like 'caret_down' (as it collides with a class name from Twitter Bootstrap).
So I wanted the caret exactly as in OWA, so I downloaded office365icons.woff from
https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff (have to be logged in to do it, so did it through browser) and then, copying the boiled-down style from the website:
#font-face {
font-family: 'Office365Icons';
src: url('/fonts/office365icons.woff') format('woff');
font-weight: normal;
font-style: normal;
}
span.o-icon {
font-family: 'Office365Icons';
font-size: 14pt;
line-height: 21px;
color: #666;
}
And finally:
<span class="o-icon"></span>
Could you just draw an svg path inside of a span using document.write? The span isn't required for the svg to work, it just ensures that the svg remains inline with whatever text the carat is next to. I used margin-bottom to vertically center it with the text, there might be another way to do that though. This is what I did on my blog's side nav (minus the js). If you don't have text next to it you wouldn't need the span or the margin-bottom offset.
<div id="ID"></div>
<script type="text/javascript">
var x = document.getElementById('ID');
// your "margin-bottom" is the negative of 1/2 of the font size (in this example the font size is 16px)
// change the "stroke=" to whatever color your font is too
x.innerHTML = document.write = '<span><svg style="margin-bottom: -8px; height: 30px; width: 25px;" viewBox="0,0,100,50"><path fill="transparent" stroke-width="4" stroke="black" d="M20 10 L50 40 L80 10"/></svg></span>';
</script>
If you are needing font-awesome for React Apps then React Icons is a very good resource and very easy to implement. It includes a lot more libraries than just font-awesome.