June 10, 2021:
Interpretation of the generation of “Photoluminescence” succeeded!
Different CSS classes accounted for normal, italic, bold texts. I could also set up indentation, alignment, separating line, and colored background for category names. As for the font, I use Alegreya and the accompanying Alegreya Sans, since I was rather fascinated by its somewhat old-fashioned but fancy strokes.
The image links in the footer for social media was more difficult to achieve. A solution is the CSS background rule, and we had to remember to adjust its width and height to avoid unwanted blank space.
.icon-gmail {
background: url("/asset/icon-gmail.
display: inline-block;
background-size: contain;
}
June 15:
As an easter egg, the quote in the footer was to be chosen randomly by a script. Suppose the quote element had ID #quote, then the following script would do the job.
var texts= [`The first quote`, `The second quote`, `The third quote`];
var choice = Math.floor(Math.random() * texts.length);
document.getElementById(
June 16:
CSS colors could be called by semantic names, like mediumaquamarine and midnightblue, which was a lot more readable than HEX color codes.
June 17:
Enhanced responsive design. I learnt that font sizes, among other things, could be adapted with respect to the screen width, as shown in the code below.
body { font-size: 24px; }
@media screen and (max-width: 600px) {
body { font-size: 20px; }
}
@media screen and (max-width: 400px) {
body { font-size: 16px; }
}
July 4:
While the Mathjax 3 documentation isn’t yet very refined, it is instructive now to copy what configuration worked for me. We could choose to render math in SVG, which is saved in image, or CHTML, which calls web fonts. Moreover, we could specify precisely those CSS classes in which Mathjax is called.
MathJax = {
loader: {
load: ['input/tex', 'output/svg']
},
tex: {
inlineMath: [['\\(', '\\)']],
displayMath: [['\\[', '\\]']]
},
options: {
processHtmlClass: ["math"],
ignoreHtmlClass: ["body"]
}
};
July 6:
Previously, I decided to break math expressions into individual spans when parsing them, since Mathjax 3 had no word break. The spacing wasn’t quite right. My workaround was to add \,, \:, and \;, in the LaTeX source, and to remove whitespace between these spans.
July 27:
Numbered all posts with respect to the stamp. It simply amounted to copy the list of posts, and add a counter in each title. Now the slowly increasing numbering made me proud.
July 28:
The original profile and the banner picture has oxygen to be blue, and nitrogen red. Leyi told me that according to CPK coloring, which is a chemistry standard, oxygen should be red, and nitrogen blue. I redrew the profile following such coloring, and redesigned the banner picture altogether. Now on the banner were mostly colored, aromatic chemicals, hinting the title “Photoluminescence”.
August 3:
Word break had been a serious problem in web designing. It was the tradition in typography to justify text, but it was generally discouraged to do so in web programming. The reason is that web browsers couldn’t reliably break words in real time, and if we insist justification of text, spaces could be too big.
After a long thought, I maintained to justify, as I really liked the lofty look of a justified text. To alleviate the problem, I used a media query to switch to left alignment when the screen is less than 600 px. Furthermore, word breaking opportunity, <wbr>, would be inserted. To do so for text, we could single out a word, and broke at punctuations whenever possible; if not possible, we broke at vowels; if not possible either, we simply broke at the middle of the word. Do the same for code, except for breaking at alphabets. We could look up a list of characters, at which words might be broken, ordered in decreasing priority. For instance, it was better to break at period . than at hyphen -.
August 16:
Unlike in a book having a fixed width of page, mathematics on a webpage had to adapt a variety of widths. Mathjax 3 hadn’t implement the word break feature yet, as in Mathjax 2. Not breaking long expressions, could result in a large blank in the right half of some lines, considering the present width of page was already narrower than the usual size of a mathematics textbook. I came up a way of greedily fitting a line with mathematics, by splitting each paired bracket to three parts, the left bracket, the content, and the right bracket, while keeping the automatic sizing by phantom objects.
Suppose we have the LaTeX source:
\left( \frac {a} {b} \right)
I propose to convert it as:
\left( \vphantom {\frac {a} {b}} \right.
\frac {a} {b}
\left. \vphantom {\frac {a} {b}} \right)
It might be extreme to abuse the functionality of phantom objects, and LaTeX purists were going to have a heart attack if they see I break up mathematics like this. At any rate, since the Porphyrin source was stable, I could always switch back to the older version if I regretted.
August 18:
Came across the concept of relative units, em and rem. Sizes in em were measured relative to the font size of its parent element, and sizes in rem, to the font size of its root ancestor. It rendered some media queries unnecessary, thus drastically shortening the lines and even enhancing the readability. All seemed promising, but on testing, I found Mathjax couldn’t display properly; disappointing as it was, I guessed absolute pixels were still more robust.
❧ mostly July 2, 2021
References
❉ MDN Web Docs, ‹Colors›
❉ MDN Web Docs, ‹Specificity›
❉ World Wide Web Consortium, ‹Markup Validation Service›
❉ World Wide Web Consortium, ‹Units›