I want to display logic equations in a QTextBrowser. It would be a lot better if I could draw overlines to symbolise the "not".
Right now I am able to draw one overline using text-decoration:overline :
Not(A) = <span style="text-decoration:overline"> A </span>
But it doesn't work if I want multiple overlines. For example the following equation :
Not(A or not B) = <span style="text-decoration:overline"> A or <span style="text-decoration:overline"> B </span> </span>
Is there a solution or a workaround to be able to do this?
MathML is not HTML, and QTextBrowser supports a simplified variant of HTML. It knows nothing of MathML. Alas, it might be a relatively simple change to the layout engine to implement this aspect of MathML, though. Worth looking into it I'd think.
Related
I'm using the Microsoft Translator Text API to translate some sentences. My sentences contains some parts of text that I need to not being translated.
To achieve this I using <span class="notranslate"></span> by wrapping not translatable text. It works good in most cases, by in some cases MT API breaks this spans.
Examples (Input -> Output):
some <span class="notranslate">1</span> text -> деякий 1 текст
some <span class="notranslate">1</span> another text -> деякий
<span class="notranslate">1 інший </span> текст
Good Example:
some <span class="notranslate">1</span> text -> деякий <span class="notranslate">1</span> текст
I do not observe any regularities, it happens randomly. Maybe I miss something?
UPD:
I tried to send headers Content-Type: text/xml or Content-Type: text/html - the same result in both: engine breaks some spans.
I found the solution.
Microsoft Translator API 3.0 Documentation recommends to use <div class="notranslate"></div> instead of <span class="notranslate"></span>.
I use API 2 version, but seems like after changing wrapper to <div>, MT API stopped breaking of my notranslate wrappers.
With version 3.0, it's not enough to use <div>. Also as Denis Kurochkin warned, it will reduce the effectiveness of the translation (by ending the sentence prematurely).
To achieve this, use <span class="notranslate">Text won't translate here</span> or <span translate="no">Text</span>, plus include the textType=html query parameter to ensure it is working correctly:
/translate?api-version=3.0&to=zh&textType=html
Without it (regardless of span/div), it will not translate the text inside the tags, but it will translate the attributes within the tag
i.e. if you have other attributes inside the <span> tag then they will be modified, something like this:
<span data-type=""mention"" class=""mention"" data-id=""39dcf29b-fce0-4a26-90ef-6342e017c1b8"" data-label=""My name has words inside it | Super cool company"" class=""notranslate"">My name has words inside it | Super cool company
I have a website featuring a long list of names.
To make it more oversee-able, I'd like to put a text link in to
(on load) show all
(on clicking word "pears") hide all elements with class="apple"
(on clicking word "apples") hide all elements with class="pear"
(on clicking "show all") show all
I suppose it'd be like a really simplified version of "as you type" filtering.
Does a plug-in exist for this? I don't even know where to start!
Just bumped into this post, I know it's old but to be honest are none of the given answers pretty helpful. In my opinion, you can filter out the elements using the filter with :not, as in filter(':not()').
As Joel Potter stated, using $("span[class='apple']").hide(); will only select the spans with exactly one classname, apple. If multiple classes are present (which is highly likely) then such an approach would not work.
If you click on a word, e.g. pears, you can then filter out the elements that do not contain the class pears.
$('span').show().filter(':not(.pears)').hide();
and you're done ;)
hmm.. if you had a list like the following:
<span class="apple">red apple</span>
<span class="apple">green apple</span>
<span class="pear">big pear</span>
<span class="pear">little pear</span>
the following would show all:
$("span.*").show();
the following would hide all elements with 'class="apple"':
$("span[class='apple']").hide();
or you could go with hiding everything that doesn't have 'class="pear"':
$("span[class!='pear']").hide();
To filter out elements that contain a given class or any other attribute value, using the Attribute Contains Word Selector would be a good solution:
$("span").filter("[class~='apple']")
Actually, for the class attribute, it's even easier to just write:
$("span").filter(".apple") // or:
$("span.apple")
[This is also what Joel Potter wrote in his comment to this answer.]
That way you'll be able to match all of the below:
<span class="apple">...</span>
<span class="apple fruit">...</span>
<span class="fruit apple sweet">...</span>
So whenever you're not 100% sure that you'll only have a single class set on an element, use the ~= operator.
I have this line inside a ProfessionalService itemscope:
Az <span itemprop="makesOffer">ágyi poloska irtását</span> permetezéses módszerrel végezzük.
This is in Hungarian and the problem comes from my language too. For search engines I would like to communicate the offer is "ágyi poloska irtás" without the addendum "át" so it would look like this:
Az <span itemprop="makesOffer">ágyi poloska irtás</span>át permetezéses módszerrel végezzük.
Is this legal? Can I break a word with a </span> closing tag?
Sorry I can't come up with an English example. The example sentence is about how the company exterminate bed bugs it would read like this in English: The <span itemprop="makesOffer">bed bug extermination</span> done by spraying method. but in English it works.
Yes, it is valid and it can make sense to do this.
Any conforming Microdata parser will get the value "ágyi poloska irtás" for the property makesOffer.
Following the HTML5 specification, consumers would have no reason to break the word (e.g., by adding whitespace or a line break) if it contains a span element (… which does not necessarily mean that you won’t find consumers that do this nonetheless).
I'm looking for a way to display the traditional long division symbol using HTML/CSS (kinda like what's shown here: http://barronstestprep.com/blog/wp-content/uploads/2013/04/longdiv1.png).
This (http://www.fileformat.info/info/unicode/char/27cc/index.htm) is basically what I need, but I don't think many people would have the proper font installed on their computer to see it (I don't, at least).
I've also tried this (below), but it doesn't display consistently on Chrome and FF...
4<span style="text-decoration: overline;"><span style="font-size: 14px">)</span>84</span>
This should be displaying 84 ÷ 4 with the long division box.
Ideas?
<span style="border-right: 1px black solid; border-radius: 0px 0px 10px 0px">
4
</span>
<span style="border-top: 1px black solid; ">
84
</span>
Demo
The concept and notation of “long division” is traditional, in some traditions, of teaching arithmetic at school, and it is used in contexts where the steps of integer division are explained graphically. There is no reliable way to do this in HTML and CSS except by using images, either large images containing an entire long division as a process or piecewise, e.g. one piece containing just a number, the long division operator, and another number (as in the jpg referred to in the question). This is how e.g. http://www.mathsisfun.com/long_division.html does this. The page http://en.wikipedia.org/wiki/Long_division uses preformatted text, construction symbols from Ascii characters like “)” and “_”, but the result is primitive-looking and is not robust (e.g., turns to gibberish in a screen reader).
When using an image, you should write an alt text that expresses the idea verbally. This somewhat depends on context, but I’m afraid it would need to be longish, like alt="long division with divisor 4, dividend 84".
Using just HTML and CSS to construct long divisions is rather hopeless, since HTML and CSS are rather powerless with anything involving essential two-dimensionality in math notations (i.e., mathematical expressions that are not simple linear sequences of characters). Even constructing a square root expression, with a vinculum extending over the radicand, requires trickery that easily fails, more or less, and showing such an expression is similar to, but essentially simpler than a long division expression.
The character U+27CC LONG DIVISION would theoretically let you write a long division expression, even in plain text, since it is defined in the Unicode standard so that it “graphically extends over the dividend”. This is however largely theoretical, for several reasons. In addition to limited font coverage (which could be dealt with using a downloadable font with #font-face), the approach suffers from lack of software support. The idea “graphically extends over the dividend” is not easily implemented. While browsers may (when using a suitable font) render 84⟌4 properly, they fail with 84⟌42 (the symbol extends over the “4” after it but not over the “2”). The reason seems to be that in fonts that contain U+27CC, it might be implemented with advance rules that imply that operator seems to extend over the next digit, but to make it extend over the next number (digit sequence), software support above the simple font level would be needed.
In HTML5, you can directly use MathML. MathML 3 supports the <mlongdiv> element:
<figure>
<math>
<mlongdiv>
<mn>4</mn>
<mn></mn>
<mn>84</mn>
</mlongdiv>
</math>
<figcaption>
This will display as a long division in browsers that support MathML 3.
</figcaption>
</figure>
For MathML 2 you can use a Javascript solution based on LaTeX, such as MathJax. Here is a long division example which uses the MathJax TeX parser to parse input of the form \longdiv{84}{4}.
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.