I have problem with a web page where it is display some symbols wrongly only in mozilla. The page is click here In this page there are so many -> symbols used. It is displayed as ® in mozilla. So how can i make it to display properly as -> symbol in mozilla. The page has style which are created by micosoft word. I want to retain those as it is.So any css trick can i use it to do?
To get the error i am facing please go to this page and search for software ® click ‘Buy now’.
You use specific Microsoft extensions :
<span style="mso-list:Ignore">§<span style="font:7.0pt "Times New Roman""> </span></span>
And defining fonts in style enclosing them with " is clearly buggy.
I don't know what MSWord tries to do but it's obviously not trying to build a standard HTML document for the World Wide Web. Is that a recent version ?
You'll have to fix the generated HTML.
Another problem is that your rendering relies on the Times New Roman font, which isn't available in non Windows computer.
Using standard HTML and encoding your document in UTF-8, you could replace those spans with simple arrow characters.
But the better solution would be to simply forget the idea to convert a MSOffice document to HTML and to build a proper HTML document instead.
Related
If I type emojis here like 🎓🦕, you'll probably see colored sprites.
If you copy and paste that into Windows Notepad / Notepad++, you'll see something like this.
If you copy-and-paste that back into another text editor, it'll present normally.
Can I achieve the rendering effect of Notepad in CSS? I would prefer not to export / load my own custom SVGs or use JS if possible, and I would like copy-and-pasting into other applications to render emojis normally, as is the case with Notepad.
The non-accepted response here How would I change the color of an emoji? remarks that one can modify an emoji with a trailing \FE0E to use Unicode Variation Selector 15 (VS15) which enables text presentation. However, adding such a character would override rendering in other applications after copy-pasting, which is undesirable.
There was a CSS draft https://github.com/w3c/csswg-drafts/issues/1144 which proposed adding font-presentation: auto | text | emoji | text-override | emoji-override to CSS but the specific issue hasn't progressed since 2017 & I'm unaware if progress has continued elsewhere.
This should become trivially possible via CSS whenever the proposed CSS Fonts Module Level 4 goes into effect. See Section 9.3 Selecting the text presentation style: The font-variant-emoji property of https://drafts.csswg.org/css-fonts-4/#font-variant-emoji-prop
In the meantime, here is a workaround that supports copy-and-pasting by exploiting the fact that CSS generated content is not captured in copy/paste operations. This is incompatible with controls like text inputs, though.
In CSS:
.emoji::after {
display: inline;
content: '\FE0E';
}
And HTML:
Lorem<span class="emoji">🎓</span>Ipsum
Lorem<span class="emoji">🦕</span>Ipsum
This renders the graduation cap correctly, but strangely enough not the dinosaur. It doesn't work for me if I copy-paste emojis directly into source; you need to specify the codepoints explicitly, not sure how that works.
Copy-and-pasting the text does not copy-and-paste the VS15 codepoint as we'd hope:
Lorem🎓Ipsum Lorem🦕︎Ipsum
I am trying to create a TOC for my Markdown blog.
The methods I am finding here... : Markdown to create pages and table of contents?
....do not work for me because I am naming all of my headers # _</>_ The Setup because I am using CSS on to style the "", giving each header a nice colored Icon next to it. If I simply use ```# The Setup ```` it works great.
This causes issues whenever I try to use [The Setup](#The-Setup).
I tried a few things like [The Setup](#_</>_-The-Setup) and other things, but I can not get it to work.
If someone can point me in the right direction I would greatly appreciate it. Also, if anyone has a better way of adding custom icons next to headers, I think that would be the better way to go about it.
As always, thanks in advance.
The general solution is to examine the rendered HTML output to see what the tool is converting the special characters to, in the HTML's element ID. Every tool could handle the conversion differently (it could convert special characters to -, _, or just remove special characters). Some examples:
<h1 id="_____the-setup">The Setup</h1>
<h1 id="-the-setup">The Setup</h1>
<h1 id="the-setup">The Setup</h1>
Once you have identified the exact id that the tool is using, then you use that value as the heading link in the markdown's table of contents. For example:
[The Setup](#_____the-setup)
Now, the tricky part is that not all Markdown tools will export the rendered HTML, including VS Code. The workaround for VS Code is:
Open the markdown preview mode (which renders to html internally).
Open the VS Code Developer Tools (Help > Toggle Developer Tools).
Use DevTools to inspect the element (in this case, the heading element for "The Setup").
I see that VS Code named the id as the-setup, so in the markdown's table of contents, I write [The Setup](#the-setup). Now the table of content hyperlink works in VS Code. Caveat: it might not work in other Markdown tools if they render a different HTML element ID!
Another shortcut now available in VS Code (1.70 July 2022), is that markdown can autocomplete the header ID. So you just type #, and it will list the valid IDs:
I would like to use a regular symbol (the up-right-arrow) in a Wordpress menu. I copied the symbol character into the required field and it looks good on desktop. For some reason, the iPhone I use displays an emoji instead of the character. I already activated the Wordpress plugin "Disable Emojis" but this doesn't help. How do I force smartphones to display the simple black arrow instead of a colored arrow emoji?
The usual searches just bring up the idea with the Wordpress plugin which probably disables emojis globally but still lets smartphones override that.
Screenshots (Imgur)
You will never get the same emoji / symbol depending on os, service, browser, app, etc ... because it is interpreted.
Find below some examples :
1. On Twitter
2. On FaceBook
3. On Instagram
4. On WordPress wysiwyg as text content
5. On WordPress wysiwyg as visual content
For the text variant, use the text presentation sequence:
U+2197 U+FE0E (↗︎)
For the emoji variant, use the emoji presentation sequence:
U+2197 U+FE0F (↗️)
For the default variant, use only the character:
U+2197 (↗)
but, as already mentioned, how will it be displayed by default depends on many factors: OS, browser, etc.
See: Emoji Presentation Sequences, v11.0
In the noble effort to re-invent every wheel, our company has recently rolled our own custom web-based e-mail app, of which I was the primary designer.
One thing I've noticed is that smileys coming in from MS Outlook-based e-mails (sent from third parties) are not appearing correctly. Example: A happy face just displays a J
The HTML of the inbound message comes in like this:
<span style="...;font-family:Wingdings;...">J</span>
I know that Firefox and Chrome do not support the Wingdings font because it is non-standard. However, I am tasked with coming up with a fix.
Is there a good way to either 1) force the browser to load and use Wingdings or 2) otherwise convert the J to a smiley?
I'd rather not do anything crazy like try some wingdings-detection-regex - or even worse, parse the DOM - just to get some stupid emoticons working. Maybe there is already some library out there that already handles this?
For what it's worth, GMail seems to not 'fix' this problem either. iOS doesn't in the message view, but puzzlingly does fix it in the inbox view (replaces the J w/ emoji)
EDIT
To clarify, this question is regarding inbound messages from third parties. Outlook, by default, autocorrects ":)" to the Wingdings smiley. There's nothing I can do to prevent this coming in. What I need is a solution to correct for this.
EDIT 2
Again, the app itself is a web based e-mail client (Gmail, etc.). E-mails go in to here, NOT to users' individual Outlook/phones/other e-mail clients. It only goes into the web app.
To avoid having to parse the HTML or manipulating the DOM, a simple solution would be to use CSS3 web fonts by linking the Wingdings font-family to a copy of the Wingdings font file on your server:
<style>
#font-face {
font-family: Wingdings;
src: url(link_to_wingdings_font_file.ttf);
}
</style>
However, a license is required for this approach.
You could embed the SWEC (Symbola-based Wingdings Emoticons Compatibility) font: https://drive.google.com/open?id=0BwDrnPQfa-aMOEx0bEZCQUNrSGs
It provides basic compatibility with Wingdings emoticons. (In Wingdings, "J" represents a smile, "K" represents a lack of expression, and "L" represents a frown.) Background: certain versions of Microsoft e-mail clients still in use change user-typed expressions such as ":)", ":|", and ":(" into "J", "K", and "L", respectively, and then specify Wingdings as the font family; recipients on systems which do not include a Wingdings-compatible font are not able to see the intended emoticons, which can cause confusion.
You need to manually substitute it prior to sending the email as you have no control over what fonts the reader has installed. You also can't include anything outside bland old html and css (unless you want to mess with VML)
First I would try running your wingding through a html converter to see if there is a html code for it.
Besides that, you could try a webfont wingdings equivalent, however there are issues with Outlook playing nice when webfonts are imported in email (ignores your font stack, falling back to Times New Roman).
Besides that, all that is left is ZephyrusDigital's suggestions of using an image or :).
Against my better judgement I have decided to go for the quick hack and just use a regular expression. Here it is for anyone else that runs into the same problem:
$html = preg_replace('/\<SPAN*?(Wingdings)*?[^\>]*\>J(\<o\:p\>\<\/o\:p\>)*\<\/SPAN\>/i', ' :) ', $html);
use :)
kidding!
why not save the wingdings smiley in photoshop as a png, or make another custom one? you could use <img src="http://something.com/images/smiley.png" style="display:inline-block;"/> and it won't look weird in a text block as long as it isn't taller than your line-height.
Is there any rich text editor available that can generate "AS3 Compatible" codes?
I want to add this to the web admin, where user can set the font size and color of the text and it should generate as3 compatible code like:
<p><font size="12" color="#000000">Welcome to</font> <font size="30" color="#ffffff">My Website</font></p>
I used the CKEditor, but it generates like this:
<p><span style="font-size:12px; color:#000000">Welcome to</span></p>
I am assigning this value in my textfield with txt.htmlText.
If there is not any such text editor available, is there any way to render the above "span style" in the as3 textfield?
Although you say that you've been using CKEditor, it seems that you haven't configured it correctly.
Check this sample: http://nightly.ckeditor.com/latest/ckeditor/_samples/output_for_flash.html
As nowadays CSS is common practice, I guess it'll be hard to find an editor that will spit old style html. Flash only supports a handful of html tags. So you might want to use the CKEditor output, strip the style part, scour it for tags that flash would support and inject those back into the html.
[edit] I found something related here