HTML + CSS solutions

● Hundreds of HTML symbols at w3schools.com ▣ ● ☎ ♬ ➓ ✿

● Some useful typographical HTML entities:
++++cent ¢ ¢
++++section § §
++++degree ° °
++++en dash – –
++++em dash — —
++++single quotes ‘ ’ ‘ ’
++++double quotes “ ” “ ”
++++bullet • •
++++almost equal to ≈ ≈
++++not equal to ≠ ≠
++++less/greater than < > &lt; &gt;
++++prime, double prime ′ ″ &prime; &Prime;

● I’ve started using the Zen Coding plugin with TextWrangler, which makes adding HTML tags, or even whole complicated blocks of HTML, a breeze.

● Book-style formatting! Ughh. So unreasonably tricky with HTML. Wrap paragraphs (or whole pages) that you want to give indented first lines, with:
<div style="text-indent:30px;"> </div>

● Adding indentation to a particular line. Add s {visibility: hidden;} to the CSS, or add it to a style section at the top of the current page, or make one, i.e.

<style>
s {
  visibility: hidden;
}
</style>

Then to add spaces, put: <s>+++++<s/> at the beginning of each line to be indented.
<s>+++++</s>Like this. Which should then look:
+++++Like this.

● To eliminate unwanted line break gaps between paragraphs, in lists etc, add a negative top margin to the offending ol, ul and/or li list element immediately after the gap, i.e.

<ol style="margin-top:-23px;">No more gaps
<li style="margin-top:-23px;">Yay!</li></ol>
    No more gaps

  1. Yay!

If there are lots of lists, better to add ol {margin-top:-23px;} to the CSS/style, and the same for ul, than to have to alter it every time like that.


● Another very useful addition to the CSS/style element is nw {white-space:nowrap;} .
Then to prevent a phrase being cut by a line break, just wrap it in a <nw> tag. i.e.
blah blah blah blah <nw>This phrase will stay on one line!</nw> blah blah

● The best way currently I’ve thought of to display book-style text involves fiddling with margin-top, margin-left and text-indent. To display indented paragraphs of text, without lines between, add to the CSS/page style:

div.book {text-indent: 4em;}
p {margin-top: -23px;}

This creates a new class of div, book, which should be wrapped around all the section of text you wish to have indented paragraphs. The second line eliminates the gap between paragraphs (adjust the -23 to fit font size) throughout the page. Now multiple line breaks do nothing, so perhaps define a ‘gap’ in the CSS/style as gap{margin-top:80px;}, and make a gap when you need one, with <gap>. Phew! (Or for a custom-sized gap, <gap style="margin-top:15px;"> or whatever size needed.)

+++++Also, I added this line in the style element, to indent quoted paragraphs: p.ind {margin-left: 7em;} With these three added – div.book, gapless paragraphs, and p.ind, this:

<div class="book">
Yes, and how much one has not even seen! For one never sees anything in anybody's work but what one brings to it, and it is as true of art as of nature that

Yes, and how much one has not even seen! For one never sees anything in anybody's work but what one brings to it, and it is as true of art as of nature that

	<p class="ind">"we receive but what we give,
	And in our life alone doth Nature live,
	Ours is her wedding-garment, ours her shroud."</p>

- Collingwood, Speculum Mentis, p68</div>

looks like this:

Yes, and how much one has not even seen! For one never sees anything in anybody’s work but what one brings to it, and it is as true of art as of nature that

Yes, and how much one has not even seen! For one never sees anything in anybody’s work but what one brings to it, and it is as true of art as of nature that

“we receive but what we give,
And in our life alone doth Nature live,
Ours is her wedding-garment, ours her shroud.”

– Collingwood, Speculum Mentis, p68


(To remove the indent on that last line, move the /div tag a line up.)

using MS Word


Replacing “quotes” with html italics tags. Using Find/Replace, enable “Use wildcards”. Put:
(“)(*)(”)
in the Find field – copy and paste both quotes individually from your text to make sure you get the right ones. In the Replace field put: <i>\2</i>.

MS Word macros. I’ve been having problems with the wordpress text editor, so I decided to work on longer files in Word. I was converting a text file to HTML, – putting h2 & h3 tags on titles, italics, +++++ indents, etc so I made some macros to speed things up. (I’d never made, used or seen a macro before. Or used Visual Basic) I left just the italics to convert when finished editing, with a Find & Replace: Find [Font:Italics] and Replace with <i>^&</i>, plain font.
+++++So now thanks to macros, COMMAND+CTRL+SPACE adds <s>+++++</s> at the cursor, while COMMAND+2 and COMMAND+CTRL+2 turn the selected word/phrase, e.g. THIS, into <h2>THIS</h2> and <h2 id=”THIS”>THIS</h2>. COMMAND+CTRL+a gives the ‘a href’ link version. Very cool.
Also, some things I learnt today: (warning! I am using a PC keyboard with a Mac)
Alt+Shift+ left & right arrows = select word to right/left
Command+Shift+ left/right = select whole of the line to left/right
(Or Shift+ Home/End, but that doesn’t work in all editors)
The macro code looks like this:

Sub Labelh2()
x = Selection
Selection.InsertBefore "<h2 id='"
Selection.InsertAfter "'>"
Selection.InsertAfter x
Selection.InsertAfter "</h2>"
End Sub
Sub h2()
Selection.InsertBefore "<h2>"
Selection.InsertAfter "</h2>"
End Sub
Sub Sp()
Selection.TypeText Text:="<s>+++++</s>"
End Sub
Sub ahref()
x = Selection
Selection.InsertBefore "<a href='#"
Selection.InsertAfter "'>"
Selection.InsertAfter x
Selection.InsertAfter "</a>"
End Sub 

I used the Visual Basic editor accessible with Tools->Macro->Visual Basic editor. Paste the above code to the macros window and then save and return to Word. Then assign hotkeys to each macro with Tools->Customize->Customize Keyboard… The “Macro” category is near the bottom of the list in the Category window.
(hehe “x = Selection” was just a wild guess; luckily it seems to work. Gee, I haven’t written in BASIC since…well, the 80s. Pre-mouse, pre-internet etc)

2 thoughts on “HTML + CSS solutions

Leave a Reply

Your email address will not be published.