After I’d written Added W3C Validated Logos to Some Pages, I saw that in the site, there’s still two pages which hadn’t been checked by the W3C’s validators.
To allow SVG fallbacks to text, I viewed the source code for
the SVG example from W3Schools. The fallback message was
simply included inside a <svg>
tag just like a <p>
tag. I applied
this technique to source/downloads/code/SVGViewBox/viewBox1.html
.
Then I uploaded that HTML file to the W3C’s HTML validator, which complained such an inclusion of text.
After that, I googled “svg fallback text” using the encrypted version of the search engine. Luckily, the second answer to the Stack Overflow question, which appeared at the top of the list of search results, is useful.
To get an HTML page which consists of a <foreignObject>
tag inside
an <svg>
tag validated by the W3C HTML validator, it’s obligatory to
specify the dimensions of the <foreignObject>
tag.
To set up a printer-friendly framework for blog posts/pages.
Two months ago, in order to install Clapper’s image popup plugin in this blog1, I studied the source code of his blog on GitHub. In this process, I learnt the roles of /sass\/(custom\/_)?(screen|print).scss/
. (To be concise, I write a Perl regex.) Lacking time to learn CSS, I just directly copied Clapper’s CSS settings for printing.
Using [Firefox]’s “Inspect Element” and searching the generated HTML code for a post, I discovered that those missing parts belonged to <pre class="meta">
tags. In Clapper’s sass/custom/_print.scss
, he didn’t display them. Before the removal of the section of CSS code that hid the author and date, I input “.meta” in the search box above the panel that showed the HTML code of the current document.
I don’t want the links for previous and next posts to appear in the printed version of a post in this blog, so I inspected the HTML code for those two links, and saw that only those two links belonged to an <a class="base-alignment ...">
tag. Therefore, I change p.meta
to a.base-alignment
in sass/custom/_print.scss
.2
After I wrote the HTML and CSS code of an HTML5 slide used for a presentation, I knew something about the max-width
property in CSS.
Google searches:
Query string | Rank | Remarks |
---|---|---|
image max-width | 1 | Failed |
resize image max width height | 1,2 | They’re about C#. |
resize image max width ratio | 1 | I haven’t learnt jQuery. |
max-width, max-height: aspect ratio not kept | 1 | The image was horizontally squeezed without changing the height. |
keep aspect ratio | 7 | I knew what to do from the first two answers. |
You may refer to commit 4be1bbf for details.
Two days ago, when I was writing a post about viewing Octopress blogs over HTTPS, which is a secure and encrypted connection, I saw a Moziila Support page which contained inline icons. I attempted to include those tiny pictures into some paragraphs. However, the resulting appearance of those paragraphs wasn’t appealing—the white border surrounding the tiny icon didn’t look great. It would be better if it could be removed.
I did try to find the solution using Google, but it wasn’t useful this time. I re-read the source code of Clapper’s image plugin, that of the Solarized theme for Octopress, and that of Larry Nung’s GitHub page, but I still had not yet come up with a solution.
With the help of a modern browser like Firefox, I inspected the CSS rules and properties of an image. Clicking the checkbox for some CSS properties, I finally found the four properties that were responsible for the default white border. By unchecking three of them, the border would disappear.
To illustrate the function of those checkboxes in Firefox’s DOM and Style Inspector, I’ve included two screenshots from a page in Octopress’s official documentation.
Right-click the image and choose “Inspect Element”. Scroll down the panel on the right that shows the CSS rules, as shown in the below figure.
Uncheck the three checkboxes as shown in the below figure.
The white border will disappear.
Flash videos were also affected by this CSS rule. Therefore, I
searched for files under the sass/
folder that contains
flash-video
, after learning the command from
a question on StackExchange.
$ grep -r flash-video ./sass
I observed that the mixin shadow-box
was used in
sass/partials/_blog.scss
.1 I performed another search, and found
the mixin in sass/base/_utilities.scss
.2
I tried setting border: none
for img
tags in
sass/custom/_screen.scss
, but it was overridden by the above four
CSS rules. Modifying the CSS files created by other developers
wasn’t a good idea for me. Therefore, I created a custom mixin to
override the default one. I learned a way for overriding mixins from
another Stack Exchange question.
Though it is an ugly approach, I’m quite satisfied and I would like to
work on other things, such as my studies and another CSS problem in
this blog—improve the settings in sass/custom/_print.scss
for
better printing experience.
Downloaded from History of the Apple Logo.1
Thanks to Ruiz’s GIMP tutorial on Mbrsolution, I can remove the white background of the picture on the left.
It’s a brief summary of the referenced tutorial. To save time, I won’t post screenshots here. You may refer to those in the tutorial.
I’ve found Mrchief’s answer to Web_Designer’s question on Stack Overflow useful.3
Inspired by ParaImage’s tutorial on Hong Kong Silicon,
I’ve written a small and simple HTML file to practice the concepts
learnt from Stack Overflow and HK Silicon.
(Click “download” for viewing the HTML code in a web browser.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Image Backgrounds</title>
<style type="text/css">
img {
-moz-box-shadow:0 0 0 10px 20px rgba(0, 255, 0, .5);
-webkit-box-shadow:0 0 10px 20px rgba(0, 255, 0, .5);
box-shadow:0 0 10px 20px rgba(0, 255, 0, .5);
display: block;
margin-left: auto;
margin-right: auto;
}
body {
background-color: rgba(0, 255, 255, .1);
}
h1 {
text-align: center;
color: rgba(255, 214, 0, .9);
}
</style>
</head>
<body>
<h1>An image with white backgroud</h1>
<p><img src="/images/posts/GIMPTransparentBg/apple-logo-2.jpg" alt="white bg"></p>
<h1>An image with transparent backgroud</h1>
<p><img src="/images/posts/GIMPTransparentBg/apple-logo-3.png" alt="transparent bg"></p>
<p>
<a href="//validator.w3.org/check?uri=referer"><img
src="/images/valid-html401.png" alt="Valid HTML 4.01 Strict"
height="31" width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a></p>
</body>
</html>
Using Firefox, I can dynamically change the width and displacement of the shadow of an image by choosing “Inspect Element” and hitting arrow keys.