I saved a MS-Word Doc with the 'save-as' option of "Web Page, Filtered". I want to insert the HTML & CSS code that was generated inside an HTML5 document that has my header, menu, footer, etc. The first question is in regard to charset and header info:
MS-Word generated HTML (Saved as "Web Page, Filtered"):
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Generator content="Microsoft Word 12 (filtered)">
My HTML5 template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
The main issue I see is the two different character sets (UTF-8 vs windows-1252). Additionally, I am guessing the meta tag "name=Generator content="Microsoft Word 12 (filtered)" will not be a problem and perhaps can just be removed (?).
I can sort out the CSS with one exception. I do not know what the '#' symbol means. Example:
#font-face
{font-family:"Book Antiqua";
panose-1:2 4 6 2 5 3 5 3 3 4;}
I looked through the document and do not see "font-face" IDs or classes. So I am guessing this might change all of the fonts in the document. This might be a problem (if true); as stated, the new document will have my menu, header, footer, etc.
You should not copy&paste anything that ms office pukes out into a website; mostly because your code becomes a big mess, and it will most likely only look right in IE. This just my experience after i got a lot "Your website is broken!!!" complains after someone pasted ms-word-"html" into joomla pages.
Anyway, charset on your website must be utf-8.
Your #font-face looks broken to me. I only know it in a slightly different syntax:
#font-face {
font-family: "Awesomefont";
src: url("fonts/awesome.ttf");
}
this alone wont do anything, until you apply "Awesomefont" somewhere else:
h1 { font-family: "Awesomefont"; }
Here is a set of PowerShell scripts that will clean Word-Filtered HTML and correctly tag super/subscripts about 95% of the time. (No, you can't get better than that, Word is made for print.)
https://github.com/suzumakes/replaceit
This also changes the characters that M$ barfs out in windows-1252 class to their appropriate UTF-8 counterparts. It removes all the styling and classes so that you can drop the HTML straight into your template with minimal fuss. Depending on how crazy the person who made your Word doc went with justifying text and funky layouts you may have just a few minutes of cleanup, or you may have to fix M$'s propensity to insert soft hyphens all over the place.
Instructions are there in the ReadMe and if you happen to encounter any additional characters that need to be caught or come up with any tweaks/improvements, I'd be happy to see your pull request.
Related
I am facing issues that Chinese characters are not displayed properly in chrome. Below is a screenshot of whats happening.
I am wondering is there any extensions that is causing this or its because my CSS / fonts are not coded well.
I really want to fix this via my code side. Is it possible?
EDIT: Some of the words show up while some did not.
I did add in the meta charset=UTF-8
EDIT2 : #torazaburo, showing you the code snippet. The problem is that firefox is able to display all the Chinese text!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My Website</h1>
<p>Some text...</p>
</body>
have you tried using meta charset
<meta charset="UTF-8">
It enables browsers to understand any language it can be chinese , Urdu , hindi any language which you will write.
I am wondering is there any extensions that is causing this or its because my CSS / fonts are not coded well.
It's unlikely that this has anything to do with an extension. It could be due to a font issue, but that's also relatively unlikely. Probably you have an encoding problem, so:
Make sure your file is saved in UTF-8.
Make sure the file is being served as UTF-8.
Specify the the <meta charset="UTF-8"> tag proposed in another answer.
Make sure you have fonts selected which can display Chinese.
See also the second answer to this question.
I have translated Arabic content in Microsoft Excel. Whenever I am copying it to my Wordpress site with Polylang Arabic language support, the letters get messed up like this:
الهاتف (اختياري)
Although the original text was like this:
I'm using Windows 7 with Office 2010 and this applies to every application I want to copy to. I've installed Arabic support for Windows and have tried both copying and pasting with Arabic keyboard as well as English. No luck.
Is there any way to do it?
I copied you text into Google and it formats it correctly, like in your image. You will need to set proper right to left layouts when ever you use these.
Try
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
Some text that is right to left...<p>
الهاتف (اختياري)<p>
</head>
</html>
Try the above code, this will display the wrong Arabic you gave to properly formatted Arabic.
The Important part is this, it sets the text direction to right-to-left "rtl" and language to Arabic "ar":
<TAG dir="rtl" lang="ar">...</TAG>
You can use dir= and lang= with quite a few tags in HTML.
You can use the right-to-left mark character:
الهاتف (اختياري)
Without :
الهاتف (اختياري)
With :
الهاتف (اختياري)
I need to insert the following HTML meta tag to the QTextBrowser’s head tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
If I insert the tag along with my normal HTML content in the QTextBrowser, it is not working.
Because I am reading a huge number of HTML files with Unicode fonts and loading their content into the QTextBrowser, but without that meta tag the Unicode fonts are not showing properly in the QTextBrowser.
I can’t add that meta tag to each individual files too, one thing because they are too many, 16,280 files; another thing because, as I tried with one file, still the Unicode fonts do not show properly in the QTextBrowser.
I have a responsively designed (using media queries) web based training (WBT) lesson. By default, this WBT does not use any frames, for accessibility concerns and etc.
However, when deployed from a SCORM LMS, it uses a file which acts as a frameset, for the SCORM communication. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title of Course Here</title>
<script src="../common/scripts/scorm.js"></script>
<style>
html, body {margin:0; overflow:hidden; padding:0;}
html, body, iframe {border:0; height:100%; width:100%;}
</style>
</head>
<body>
<iframe src="index.htm" frameborder="0">
iframes are not supported by your browser.
You can access the pages directly here.
</iframe>
</body>
</html>
This page connects to the SCORM API, and includes an onunload to send SCORM Commit and Terminate commands.
The Problem
When this page is viewed through a mobile browser, the CSS media queries (in the content) are ignored, as is sizing on the iframe itself. This is obviously bad, as all of the media query magic is now pretty worthless.
Possible Solutions
The two possible solutions to this (that I can see) are:
Get the media queries working within an iframe.
Enable SCORM communication without a frameset.
Sadly, neither of these solutions seem possible/feasible. Any ideas on how to maintain communication to SCORM without a framset? Or alternatively, how to get media queries working from within an iframe?
Edit 1:
The deeper I look into this, the more I think solution 2 is preferable. Dealing with iframes on mobile seems like all kinds of pain. I used respond.js (hacked to always run) on the content frame, and this did work as expected, but then I ran into issues with scrolling.
Edit 2:
A 3rd solution may be to provide an intermediary window between the LMS and the WBT. This window, with a message to the effect of "Do not close this window" could hold the reference to the SCORM API. Not so elegant from a user experience perspective, but it does seem to be the least hacky of the 3 solutions.
I know that this is very late, but I wonder if you ever tried setting the viewport setting on the <meta> tag on the page containing the iframe/frameset:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
This may not work well with iOS due to the way that iframes & frames are handled (resizing to fit the content)...
The second option is going to work and you can use a timer to send LMSset() to the API. Some new browsers, like Chrome, have problems with onunload. The timer solved it.
I was facing the same issue jst place this code in head of html page and enjoy...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=yes">
The page not working in IE8 is http://gainntrain.com/shopping/index.php
It IS working chrome and firefox...
This page loads from CubeCart, but the page I edited to alter the skin http://gainntrain.com/shopping/skins/KitaBlue/styleTemplates/global/index.tpl
That page has the same problem in IE8
The thing I don't understand is that the same header works fine on other pages of the site in IE8
Changed the <header> and <nav> tags to divs with classes using the styles that the tags had and that seems to be handling it just fine so thanks for the answers!
Look at
Validator
and
Jigsaw
Notice that the only errors in Jigsaw are CSS3 rules.
I would suggest looking at the HTML because of this line in Validator's analysis of your page
Line 11, Column 107: end tag for "link" omitted, but OMITTAG NO was specified
…="http://www.gainntrain.com/site/css/style.css" type="text/css" media="screen">
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
It looks like your document is using HTML5 features but is using an older doctype declaration. I would suggest changing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to:
<!doctype html>
<html>
That is as long as it doesn't break the site. :]
Try an online HTML validator on the output, like this one. If you choose the right validator, it's likely to be able to pick out the sticky bits that work better in some browsers than others. Sifting through code by hand to find a solution like this is difficult and time-consuming.