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);
}
Related
I've started playing with TiKZJax, a system for converting TikZ images to svg, and embedding them in html pages.
I do like this tool a lot, but I'm having some troubles with mathematical formulas (LaTeX) in TikZJax nodes. The problem is that some basic mathematical symbols do not render correctly.
Here you can see a webpage with two MWEs.
The first one is derived from an image I was preparing, where I first noticed the issue.
The negative y axis labels have a "times" sign instead of the expected minus.
The two texts roughly at (3,3) and (6,6) are two "experiments". One should be $-2$ and the other has a bunch of random symbols $\hbar \pi \times \otimes \sum$. The third and the fourth won't render correctly.
The second MWE is the same you can find in the TikZJax demo here, but with $-\y$ in place of $\y$. Again, the minus sign won't render correctly.
The compilation log I see from the console does not complain about anything.
I tried inspecting the "times" symbol that appears in place of the minus sign. I am no expert at all, but from what I understand, this should correspond to the £ symbol in the font family cmsy10:
<text alignment-baseline="baseline" y="61.57359313964842" x="-51.62625122070311" style="font-family: cmsy10; font-size: 12;">£</text>.
I looked for a table of cmsy10 fonts and I found one in this TeX StackExchange thread.
It seems to me that the minus sign is two cells to the right from the times sign. I am not sure how to read the "coordinates" in the table. Anyway from this site £ corresponds to 163, and 161 corresponds to an inverted exclamation mark "¡".
I created an html file with the svg code for (a version of) the first MWE, and changed the pound symbols into inverted exclamation marks. This produces the expected minus signs.
Could it be that the author of TikZJaX got the mapping of some math symbols wrong?
Or am I getting it all wrong?
In the latter case, can something be done to get the correct minus signs (and other symbols)?
Thanks a lot for your help
Francesco
PS By the way, I noticed that the TikZJaX demo here does not actually map the fonts to the correct font family. I think this is because something goes wrong with the link to the css file in the header of the webpage. I'm guessing this because I get a similar rendering if I comment out the link to the css file, which contains a list of font families.
My problem occurs when I try to use some data/strings in a p-element.
I start of with data like this:
data: function() {
return {
reportText: {
text1: "This is some subject text",
text2: "This is the conclusion",
}
}
}
I use this data as follows in my (vue-)html:
<p> {{ reportText.text1 }} </p>
<p> {{ reportText.text2 }} </p>
In my browser, when I inspect my elements I get to see the following results:
<p>This is some subject text</p>
<p>This is the conclusion</p>
As you can see, there is suddenly a difference, one p element uses and the other , even though I started of with both strings only using . I know and technically represent the same thingm, but the problem with the string is that it gets treated as a string with 1 large word instead of multiple separate words. This screws up my layout and I can't solve this by using certain css properties (word-wrap etc.)
Other things I have tried:
Tried sanitizing the strings by using .replace( , ), but that doesn't do anything. I assume this is because it basically is the same, so there is nothing to really replace. Same reason why I have to use blockcode on stackoverflow to make the destinction between and .
Logged the data from vue to see if there is any noticeable difference, but I can't see any. If I log the data/reportText I again only see string with 's
So I have the following questions:
Why does this happen? I can't seem to find any logical explanation why it sometimes uses 's and sometimes uses 's, it seems random, but I am sure I am missing something.
Any other things I could try to follow the path my string takes, so I can see where the transformation from to happens?
Per the comments, the solution devised ended up being a simple unicode character replacement targeting the \u00A0 unicode code point (i.e. replacing unicode non-breaking spaces with ordinary spaces):
str.replace(/[\\u00A0]/g, ' ')
Explanation:
JavaScript typically allows the use of unicode characters in two ways: you can input the rendered character directly, or you can use a unicode code point (i.e. in the case of JavaScript, a hexadecimal code prefixed with \u like \u00A0). It has no concept of an HTML entity (i.e. a character sequence between a & and ; like ).
The inspector tool for some browsers, however, utilizes the HTML concept of the HTML entity and will often display unicode characters using their corresponding HTML entities where applicable. If you check the same source code in Chrome's inspector vs. Firefox's inspector (as of writing this answer, anyway), you will see that Chrome uses HTML entities while Firefox uses the rendered character result. While it's a handy feature to be able to see non-printable unicode characters in the inspector, Chrome's use of HTML entities is only a convenience feature, not a reflection of the actual contents of your source code.
With that in mind, we can infer that your source code contains unicode characters in their fully rendered form. Regardless of the form of your unicode character, the fix is identical: you need to target these unicode space characters explicitly and replace them with ordinary spaces.
Today i read:
Don’t use single quotation marks around paths for images. When setting
a background image, resist the urge to surround the path with quote
marks. They’re not necessary, and IE5/Mac will choke.
Meaning instead of:
<img src="pic_mountain.jpg" title="Mountain-View" style="width:304px;height:228px;">
this:
<img src=pic_mountain.jpg title=Mountain-View style=width:304px;height:228px;>
should be perfectly fine. Is this true? No diffrences? It does work normally on my end. Is it about cross-browser compatibility?
Source for the info: Source
The quote is talking about CSS, not HTML.
These all mean the same in CSS:
background-image: url(/path/to/foo);
background-image: url("/path/to/foo");
background-image: url('/path/to/foo');
… except only the first one works in IE5/Mac … which hasn't been supported for a very long time, so isn't worth worrying about.
The two versions of HTML in your question are (for reasons unrelated to the quote you included) also equivalent.
The common view about best practise is that you should always place quotes around HTML attribute values. It saves having to remember which characters that you might want to place in an attribute value turn the quote from optional into required. Space is an obvious example of such a character.
It is valid html but if you then use an attribute that is not valid for an element it will then through an error this link should help.
unquoted attributes
I create HTML documents from a rst-formated text, with the help of Sphinx. I need to display some Japanese words with furiganas (=small characters above the words), something like that :
I'd like to produce HTML displaying furiganas thanks to the < ruby > tag.
I can't figure out how to get this result. I tried to:
insert raw HTML code with the .. raw:: html directive but it breaks my line into several paragraphs.
use the :superscript: directive but the text in furigana is written beside the text, not above.
use the :role: directive to create a link between the text and a CSS class of my own. But the :role: directive can only be applied to a segment of text, not to TWO segments as required by the furiganas (=text + text above it).
Any idea to help me ?
As long as I know, there's no simple way to get the expected result.
For a specific project, I choosed not to generate the furiganas with the help of Sphinx but to modify the .html files afterwards. See the add_ons/add_furiganas.py script and the result here. Yes, it's a quick-and-dirty trick :(
I'm converting a website to a PDF, but there are images in there and along all of them there is a text that when clicked gets you to image itself.
I think this would be the code responsible for showing that text, since I deleted it in one of the files and the text and link is not shown anymore.
<div class="v1"><a target="_self" href="images/graphics/1.jpg">[View full size image]</a></div>
The problem is that there are about 200 more HTML documents containing this similar text, only changing href.
Would there be any easy way to get rid of all this without having to go one by one? Maybe a regular expression for sed?
If the expression is always on one line and the only difference is in href, sed is a possible solution:
sed -e 's,<div class="v1"><a target="_self" href="[^"]*">\[View full size image\]</a></div>,,'
I used an alternative separator , so / does not have to be escaped in closing tags. The brackets in the links's text need to be escaped, though.
Yes, regular expressions are likely the easiest solution here. If it's simply a question of removing this line from all your files then I'd just open them up in an editor (Sublime Text 2 does this well) and perform a regex search and replace. The following search pattern will likely work:
<div class=\"v1\"><a target=\"_self\" href=\"[^"]+\">\[View full size image\]</a></div>