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.
Related
I'm working on a Japanese website and I'm using the Meiryo webfont. I really like this font but the special characters have too much margin.
The exact issue is that there's too much space in front of special characters like 【, which makes the design look off if such a character is the first on a line.
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
<h3>【好き】</h3>
<p>猫、アクリル板、真空管、リンゴジュース、ゾロ目、柄物、ドラッグストア、レゴ、アイドル、アニメ、光る物、製菓、イラスト、ドラム(叩けない)、ダリ</p>
<h3>【好きくない】</h3>
<p>煙草、カフェイン、満員電車及び人混み、パンチのあるアルコール類、刺激物全般(辛い、苦い)、算数、スポーツ全般、読書、プンプンしてる人</p>
<h3>【弱点】</h3>
<p>近眼乱視、虚弱、猫舌、譜面が読めない、書けない。方向音痴、機械音痴、運動音痴。睡眠をとらないと死ぬ。強く怒られると死ぬ。</p>
An image of the issue in my browser:
http://i.stack.imgur.com/OYqMt.jpg
My idea to solve this is to write a script that puts every special character in a container which has a negative margin. That is obviously very hacky, and not practical at all, so are there any better solutions, like a different font for special characters only?
I wouldn't say this is a great option, but you could let CSS render the lenticular brackets instead. By doing so, you're removing the brackets from text entirely, so they're no longer selectable, indexable, etc., but it would solve the padding problem for these characters with a simple CSS class and it should work with any element.
This would only apply to these two characters. Other special characters would need similar CSS rules.
.brackets:before {
content:'\3010';
margin-left:-1.5%;
}
.brackets:after {
content:'\3011';
margin-right:-1.5%;
}
And then in your HTML, just add a brackets class and remove the brackets in text:
<h3 class="brackets">好き</h3>
.brackets:before {
content:'\3010';
margin-left:-1.5%;
}
.brackets:after {
content:'\3011';
margin-right:-1.5%;
}
<h3 class="brackets">好き</h3>
<p>猫、アクリル板、真空管、リンゴジュース、ゾロ目、柄物、ドラッグストア、レゴ、アイドル、アニメ、光る物、製菓、イラスト、ドラム(叩けない)、ダリ</p>
<h3 class="brackets">好きくない</h3>
<p>煙草、カフェイン、満員電車及び人混み、パンチのあるアルコール類、刺激物全般(辛い、苦い)、算数、スポーツ全般、読書、<span class="brackets">プンプンしてる人</span></p>
<h3 class="brackets">弱点</h3>
<p>近眼乱視、虚弱、猫舌、譜面が読めない、書けない。方向音痴、機械音痴、運動音痴。睡眠をとらないと死ぬ。強く怒られると死ぬ。</p>
I need to show paragraph marks, spaces and other formatting marks in a contenteditable div as you can in MS Word by pressing the Formatting Marks button Formatting Marks button http://blogs.mccombs.utexas.edu/the-most/files/2011/04/show-hide-button-in-outlook.jpg
Is there a simple way to achieve this?
<html>
<head>
<style>
span::after{
color:black;
content:"\00b6";
}
p::after{
color:black;
content:"\00b6";
}
</style>
</head>
<body>
<h3>
<span class="label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
<P>Quote me</p>
</body>
</html>
Creating a font which draws spaces as dots and newlines as paragraph marks should solve your problem.
In code it will look like
.editable-div {
font-family: "Your custom font with spaces as dots and stuff", "Actual character font";
}
Here's an article which elaborates on this approach http://www.sitepoint.com/joy-of-subsets-web-fonts/
(I don't have access to Word, but I'm assuming it's the exact same functionality present in most text editors, or InDesign's 'show hidden characters' option &c.)
No, there definitely isn't a simple way to do this, because it's a fairly complex feature.
Your best bet if you really want to do this is to capture the input within the div as a user enters text. Something like Bacon that can easily capture keyed user input as a stream (and allow you to map across the stream) would simplify the process somewhat.
You'll then need to replace* (in realtime) every space/paragraph mark/&c with a relevant marker for the user. The actual input still needs be either saved as typed, or parsed again before saving to strip the new, pretend characters. And though you can use use unicode entities for many of the markers (pilcrows, maybe?), a space (for example) will still show as whitespace (or as the entity code if escaped), so you would need to use a representative icon - essentially, the majority of the hidden characters will each need to have their own specific, defined rendering rules.
This is all fairly nightmarish. It's doable if you can ensure the max amount of text can be kept small, and if you can control what users can enter. For large amounts of text, I can see it becoming horrific: not sure what the JS overhead would be in terms of performance, but I can't imagine it would be particularly good.
* or append - for example newlines/carriage returns etc need to be both displayed as a marker, and actually occur within the contenteditable element.
Edit: What you could do in addition to the above is to edit a font, replacing/adding unicode points for hidden characters instead/as well as visible ones - you would still need to capture input, but this would remove a few headaches. It would deal with spaces quite nicely, for example. Still a bit of a nightmare, but hey.
I've tried the answers on 4 other S.O. questions but my image is still not showing up.
I'm learning to code by going through Dash at General Assembly. However I'm building this project using Sublime 3.
body{
background-image: url("Southern California Sunset.jpg");
My html file and images are saved in the same folder.
Where I obtained the background image:
Southern California Sunset.jpg
Your CSS syntax for background image is correct:
background-image: url("Southern California Sunset.jpg");
You can replace each space with %20 which is the HTML URL encoding equivalent. But in a modern web browser this may not be necessary. You can also use camel case (that is, capitalization of the first letter of every word) without spaces or another naming convention to eliminate the spaces.
As long as the syntax is correct and the file is in the right place, the code should work properly.
You do, however, have a small (unrelated) syntax error in your code; this:
<input type="email"; placeholder"Your email"/>
should be:
<input type="email" placeholder"Your email" />
HTML is generally pretty forgiving of syntax errors. Still, it is best to avoid them.
Try replacing the spaces in the filename with %20:
background-image: url("Southern%20California%20Sunset.jpg");
In general, avoid spaces in file names. Much easier.
Like he said you should avoid using spaces when saving an image. I use the 'camel humps' method for all my coding. So instead of using spaces you capitalize the all the words.
So instead of 'my example image text.jpg', it would be MyExampleImageText.jpg.
You must have a picture size under 1 MB or 500 KB. This worked.
body {
background-image: url(yourfile.jpeg);
}
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.
From wikipedia:
Cursive (from Latin curro, currere, cucurri, cursum, to run, hasten) is any style of handwriting that is designed for writing notes and letters quickly by hand. In the Arabic, Latin, and Cyrillic writing systems, the letters in a word are connected, making a word one single complex stroke.
In the above languages when we want to format one single word with e.g. <span> tag to apply custom css style it breaks word conection, so is there any solution for this.
example this is for example normal arabic word: كتب
but when we want to color last letter in other color using the span tag get this:
because first two letter are in one tag and last is in other to color it.
Is there something I can do to avoid word breaks.
Here is the full html:
<p>كت<span style="color: Red;">ب</span></p>
I'm not sure if there's any HTML way to do it, but you can fix it by adding a zero-width joiner Unicode character before the opening span tag:
<p>كت<span style="color: Red;">ب</span></p>
You can use the actual Unicode character instead of the HTML character entity, of course, but that wouldn't be visible here. Or you can use the prettier entity.
Here it is in action (using an invisible <b> tag, since I can't do color here), without the joiner:
كتب
and with the joiner:
كتب
It's supposed to work without the joiner as far as I understand it, though, and it does in some browsers, but clearly not all of them.
Update 2020/5
Google Chrome (Checked version 81.0.4044.138) and Firefox (76.0.1) have solved this issue when rendreing Arabic and Farsi words and there is no more need to handle the situation manually. Simply wrap the keyword with <span style="color:red">Keyword</span> works fine with both connecting and non-connecting characters.
For this reason, you probably can not see the difference between Correct and Wrong examples below:
Main post:
After 7 years of accepted answer I would like to add a new answer with more practical details as my native language is Farsi. I assume that we want to replace a keyword within a long word. This answer considers the following details:
1- Sometimes it is not enough to add only to the previous character becase next character should also has a tail to complete the connection.
body{font-size:36pt;}
span{color:red}
Wrong: مک<span>انیک</span>
<br>
Correct: مک<span>انیک</span>
2- We may also need to add after the keyword to connect it to next character.
body{font-size:36pt;}
span{color:red}
Wrong: مک<span>انیک</span>ی
<br>
Correct: مک<span>انیک</span>ی
3- There are some characters that accept tail before but not after. So we have to exclude them from accepting tail after them. This is the list of non-connecting characters to next characters: ا آ د ذ ر ز ژ و
4- Finally to respect search engines and scrappers, I recommend using javascript (jquery) to replace keywords after DOM ready to keep the page source clean.
This is my final code with regards to all details above:
$(document).ready(function(){
var tail="\u200D";
var keyword="ستر";
$(".searchableContent").each(function(){
var htm=$(this).html();
/*
preserve keywords which have space both before and after
with a temp sign say #fullHolder#
*/
htm=htm.split(' '+keyword+' ').join(' #fullHolder# ');
/*
preserve keywords which have only space after
with a temp sign say #preHolder#
*/
htm=htm.split(keyword+' ').join('#preHolder#'+' ');
/*
preserve keywords which have only space before
with a temp sign say #nextHolder#
*/
htm=htm.split(' '+keyword).join(' '+'#nextHolder#');
/*
replace remaining keywords with marked up span.
Add tail to both side of span to make sure it is
connected to both letters before and after
*/
htm=htm.split(keyword).join(tail+'<span style="color:#ff0000">'+tail+keyword+tail+'</span>'+tail);
//Deal #preHolder# by adding tail only before the keyword
htm=htm.split('#preHolder#'+' ').join(tail+'<span style="color:#ff0000">'+tail+keyword+'</span>'+' ');
//Deal #nextHolder# by adding tail only after the keyword
htm=htm.split(' '+'#nextHolder#').join(' '+'<span style="color:#ff0000">'+keyword+tail+'</span>'+tail);
//Deal #fullHolder# by adding markup only without tail
htm=htm.split(' '+'#fullHolder#'+' ').join(' '+'<span style="color:#ff0000">'+keyword+'</span>'+' ');
//Remove all possible combination of added tails to non-connecting characters
var nonConnectings=['ا','آ','د','ذ','ر','ز','ژ','و'];
for (x = 0; x < nonConnectings.length; x++) {
htm=htm.split(nonConnectings[x]+tail).join(nonConnectings[x]);
htm=htm.split(nonConnectings[x]+'<span style="color:#ff0000">'+tail).join(nonConnectings[x]+'<span style="color:#ff0000">');
htm=htm.split(nonConnectings[x]+'</span>'+tail).join(nonConnectings[x]+'</span>');
}
$(this).html(htm);
})
})
div{font-size:26pt}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchableContent">
سترون - بستری - آستر - بستر - استراحت
</div>