I was toying around with the :before pseudo class in css, trying to insert a special character but the result is not what I was hoping for.
Using:
.read_more:before {
content: "»";
margin-right: 6px;
}
I get the character I want, but with an  character before it and using:
.read_more:before {
content: "»";
margin-right: 6px;
}
I get the complete » on the html page.
I can think of a couple of ways to solve my problem, but I was wondering what the correct syntax would be if I wanted to use the :before pseudo class.
By the way, my doctype is:
<!doctype html>
<html lang="en">
try this
.read_more:before {
content: "\00BB";
margin-right: 6px;
}
\00BB is the unicode representation of that character. It should reasonably works =)
The answer has been already told, but I want to refer to:
I get the complete » on the html page.
That's because CSS content property isn't treated as HTML. It's not appended to the DOM, therefore any HTML-specific markup isn't parsed. You can insert a character directly: content: "Ԃ"; or use Unicode notation: content: "\0504";.
Try specifying <meta charset="utf-8">. Ideally you want to set this in the server.
I know it's been a while since this question was asked but in case someone might need it nowadays, I found the solution for it.
Here's a chart with lots of glyphs. Find the one you want and copy the hex code for it.
Then paste it here to convert.
You'll get a value that looks like this: \00E1 (CSS Value)
Paste this value on your 'content:' and be happy :)
Your browser isn't using the correct text encoding -- that is, it isn't using the same text encoding as your editor. If you are receiving the page from a Web server, the best approach is to make sure the server is sending the proper Content-Type header. If you don't have control over the Web server's headers, or if you will be doing a lot of testing using local HTML files, add appropriate tags to your document for the encoding and HTML version you are using. I recommend using UTF-8. The CSS file (if it is separate from the HTML) should use the same encoding.
Add this on the html, inside the <head> section
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8" />
But if the html page is coded in PHP, I would prefer the following:
<?php
header("Content-Encoding: utf-8");
header("Content-type: text/html; charset=utf-8");
?>
And don't forget to save any file (css, html, php) with UTF-8 encoding
Related
I am trying to solve this issue, where users paste invalid HTML that we have to deal with, of the form <ol><ul><li>item</li></ul></ol>. We are currently parsing using lxml. In legal HTML, <ol> cannot have a (direct) child of a <ul> (it must be in an <li>) so lxml closes the ol tag too soon to try to "repair" the HTML, producing <div><ol/><ul><li>item</li></ul>.
The user-pasted text also might be invalid XML (e.g., bare <br> tag), so we can't just parse it as XML.
Thus, we can neither parse it as HTML nor XML, because it might be invalid.
To make this certain (common) case of invalid HTML into valid HTML, can we just replace all <ul> tags with <ol> tags using regexes?
If I use lxml to parse <ol><ol><li>item</li></ol></ol>, the output looks fine (does not close a tag too soon).
However, I don't want to break actual user-typed text, and I'm wondering if there are edge cases I haven't thought of (like "<ul>" within a <pre> tag or some other crazy thing that isn't actually a tag, though I've tested that particular case).
Yes, it would change unnumbered lists to numbered lists. I'm okay with that.
Yes, I have read this fun regex answer.
In general, there is no guarantee of a 'non-edge case' transform with HTML and regular expressions. HTML, more so than XML, has rules that make a direct text replacement of things that look like tags problematic.
The following text validates as HTML using w3c.org validation checker without any warnings.
<!DOCTYPE html>
<html lang="en">
<head>
<title><!--<ul>--></title>
<style lang="css">s {content: "<ul>";}</style>
<script>"<ul>"</script>
</head>
<body data-ul="<ul>"></body>
</html>
That aside, using some regular expression heuristics might solve the issue at hand - at least insofar as a reasonable scope. A streaming HTML token parser that does not attempt to apply any validation or DOM/tree building might also be useful for the initial replacement stage.
I'm having a difficulty on including special characters in my CSS preprocessor. This is the code:
.xyz{
&:before{
content: '佥佬佧佼';
some: properties;
}
}
This runs smoothly in plain HTML. But on my ReactJS Project, the output in my DOM is this:
.xyz:before{
content: '\3A3\255C\D1\3A3\255C\BC\3A3\255C\BA\3A3\255C\255D';
}
Then the content has ASCII code output.
I am not sure where to put or set the character encoding. I'm using VSC with UTF-8 encoding. Can someone please help?
Finally got what I was looking for.
On top of the page, write:
#charset "UTF-8";
Now everything is fine.
I want to just show this: », but » is showing instead. Why is  being added to it? How come it's not just the double right arrow? What's wrong with my code?
CSS
#buttonServices1{
transition: all 0.5s;
}
#buttonServices1 span {
transition:0.5s;
}
#buttonServices1 span:after {
content: '»';
transition: 0.5s;
}
#buttonServices1:hover span {
padding-right: 25px;
}
#buttonServices1:hover span:after {
opacity: 1;
}
HTML:
<button id="buttonServices1"><span>Services</span></button>
Picture:
Why is  being added to it?
Because your stylesheet is saved as UTF-8, but the browser is decoding it using Windows-1252. This is probably because the page that's referencing the stylesheet has no declared encoding and the browser is arbitrarily guessing the Windows-1252, which is typically the default encoding on Western European locales. The byte sequence 0xC2 0xBB represents » in UTF-8 but » in Windows-1252.
Adding the <meta charset> declaration in Akjm's answer to the page(s) that reference the stylesheet should make this work. If you can't do this (for example because you are making a stylesheet that might be referenced by other people's pages which could be in any encoding), alternatives are:
encoding the character using CSS backslash-escapes, as in #RobFonseca's answer. (The HTML character reference syntax in #Akjm's answer is not effective here.)
putting the rule #charset "utf-8"; at the top of the stylesheet to tell the browser that the stylesheet has its own encoding, independently of whatever the page uses
setting the web server to serve the stylesheet with an HTTP Content-Type: text/css;charset=utf-8 header
Support for approaches 2–4 has traditionally been rocky, though I haven't checked browser support recently.
It could be a rendering error with the character rendering.
First thing's first, make sure that in your head tags you have something like this:
<meta charset="utf-8">
Then, try replacing the character in the content attribute with the charcode
content: '»'
/* OR USE THIS */
content: '»'
The CSS content property requires you to use Unicode hex escapes
content: '\00bb',
Here is a useful chart of them
https://css-tricks.com/snippets/html/glyphs/
I have tried everything to get a background image to work but have had no luck.
I'm using most current versions of Windows and IE.
Works fine server side.
Does anyone have an example?
Note: The img tag in the body renders the image just fine.
also tried background:url...
<!DOCTYPE html>
<html>
<head>
<style>
html { height:100%; width:100%;
background-image:url("file://C:\Users\Public\Pictures\Sample Pictures\florida-orlando-resort.jpg");
}
</style>
</head>
<body>
123...<img src="C:\Users\Public\Pictures\Sample Pictures\florida-orlando-resort.jpg"
style="width:100px; height:100px; display:cover;">...456
</body>
</html>
1. Use a single Forward-slash / like C:/Folder/Images/image.jpg (preferred)
2. Escape your backslashes \\ like C:\\Folder\\Images\\image.jpg
Theoretically you should escape also the backslashes that you use in image's src:
<img src="file://C:\\Folder\\Images\\image.jpg">
(or again use simply a single /).
Due to some accidents in programming history Windows paths uses \. You would normally access your image using: C:\Folder\Images\image.jpg.
Browser gateways tries to normalize that issue for you and looks like it works in HTML syntax. CSS style instead (I believe the way it's parsed) needs to follow the escaping directive for unwise characters (\) translating it to a Windows understandable path.
I encourage you to simply forget about \ and use it the way you'd do on a live server:
background-image: url("C:/Folder/Images/image.jpg");
and respectively in HTML
src="C:/Folder/Images/image.jpg"
An additional note is that you should preferably use lowercase folder names.
P.S: from file: environment on Windows (NTFS filesystem) an all-lowercase path might match the desired file, but the same might not work on a live server. Such mistake might lead to small headaches, so try always to use lowercase
I want to add another MSHTML question. Thanks to all responses.
We use in Delphi the standard TWebbrowser component, that uses mshtml.dll internally. Additionaly we use the registry to ensure that the pages renders with the new rendering engine (Web-Browser-Control-Specifying-the-IE-Version, MSDN: FEATURE_BROWSER_EMULATION). So we use the rendering of IE 10 but we have the same results with ie 8 to ie 11.
Using the standard rendering machine of MSHTML (IE7) works right, but due to new rendering options we need the new rendering of MSHTML.
We use the design mode of the control to enabled the user to make changes in the documents:
var
mDocument: IHTMLDocument2;
begin
mDocument := ((ASender as TWebBrowser).Document as IHTMLDocument2);
mDocument.designMode := 'on';
Now we have the following problem:
We load th following (simplified) HTML via the IPersistStreamInit.Load(...) into the WebBrowser:
<html>
<body>
What should I do
with some of the
spaces.
</body>
</html>
In the WebBrowser user can see the following:
Now, when selecting the word "with" in the WebBrowser in editing mode, and typing a character, some spaces appear. The HTML now has in it - exactly as many as there has been spaces in the HTML before editing:
The code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv="Content-Type" content="text/html; charset=unicode">
<META name="GENERATOR" content="MSHTML 10.00.9200.16540"></HEAD>
<BODY> What should I do n some of the spaces.
</BODY></HTML>
The same effect can be achieved by replacing the word "spaces" in the WebBrowser.
This is a bad behaviour for users using our application.
Every HTML code with white spaces infront of text, has the same behaviour. The mess is, that MSHTML itself generates such HTML.
By now we think of a solution to remove all the spaces on the left of each line, but we think that such workarounds could end in a bigger mess, because they change the HTML. This could cause some different behaviour of the rendering.
Thinking about removing the spaces before each line, puts you somewhere in the right direction, but nowhere near what you should be doing: convert the data info HTML before IPersistStreamInit.Load.
Since the HTML specification prescribes any whitespace in the HTML code should be treated as a single instance of whitespace (except inside <pre> tags), it's understandable that IE's design-mode is confused what to with these extra spaces when you edit around them. You've stumbled upon a border case.
I suggest you either don't use IPersistStreamInit.Load
but Navigate('about:<html><body></body></html>'); and document.body.innerText:=... instead,
or take care to properly format the initial HTML:
parse the text to collapse any/all consecutive whitespace,
replace all & with &, < with < etc...
(perhaps also #13#10 with '<br />' and #13#10#13#10 with '</p><p>'?)