A typographic time travel Back to the future

We know you fell in love with our Time Machine tool and with the possibility to view recent articles formatted according to styles from the past (and the future). Yes, you fell in love with it, but you would like to try it with your own articles.

Well, you've come to the right place.

Whether you want to write a trivial "Hello World", or you want to spread a huge treatise on geoquantistic physics around the world, here you can format it with our typographical styles! But f of all...

Are you familiar with HTML/CSS?

Below this text you will find a section entitled "THE EDITOR". Created by CKEditor, it is a JavaScript WYSIWYG text editor, an acronym for "What You See Is What You Get" that allows you to see a text in its HTML¹ structure and also in its final form (the one you are reading right now, taking as example this text).

---

¹ HTML is the standard markup language for documents designed to be displayed in a web browser. In other words, it describes the hierarchical structure of a text (title, subtitle, paragrahps and so on).

---

In simple words, if you don't have any HTML knowledge, you can start writing your article/text in the box of the editor and then select the features that will make it semantically rich (such as Title 1, Title 2, Subtitle etc), by clicking the toolbar button Format.

You can even add images, special symbols and tables, by exploring and playing with the buttons. In the meantime, the editor will automatically create the HTML structure of your article/text, without you even noticing it! When you are finally satisfied with your article, you can get the HTML structure of it just clicking on the Source button.

If you don't have any article in mind, the editor is already filled with a sample "Lorem Ipsum" text, provided with three levels of hierarchy: a main title (h1) and two subtitles (h2 and h3), some paragraphs and one image. But now you may have a question: why do you have to care about HTML? Because this is the only way you can move on to Part 2 of these awesome guidelines.

<h1>Lorem ipsum</h1> <h2>Dolor sit amet</h2> <h3>Consectetur adipiscing elit</h3> <p>Sed do eiusmod tempor incididunt ut <b>labore</b> et <b>dolore</b> magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p><strong>Duis aute irure dolor in reprehenderit in voluptate</strong> velit esse cillum dolore eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat cupidatat non proident, <i>sunt in culpa qui officia deserunt mollit anim id est laborum</i>.</p> <p><img alt="time" src="https://backtothefuture2019.github.io/tttt/img/time.png" style="height:200px; width:200px" /></p>

You wrote your awesome article, clicked on the 'Source' button and found out its HTML structure. Now it's time to style it!

Copy the HTML structure of your text and go to the section below. You will see a white text area indicated by the title 'Insert your text here', with already something inside: "<article> <section>". Don't worry, these elements (which are HTML tags) are essential to give a general environment to your article, following the structure of our six historical styles.

So, now paste the HTML structure of your article it in the text area after "<article> <section>" and see how it magically appears on the left. You can even keep on modifying it, if you want, and the changes will be displayed just in less than a second!

Finally, choose your favorite style by clicking on one of the six buttons underneath. But remember that each time you want to change an already-displayed style, you have to 'clean' the previous one, otherwise they will sum each other (... which would be a fun experiment anyway, wouldn't it?).

Oh, I see. You don't believe in magic and you want do deeply analyze how the cold, grey machine works. You must be so fun at parties.

Very well. Let's reveal all the magician's tricks.

Nothing to explain regarding the CK Editor part: it's just a tool allowing non-HTML experts to write an article with a correct HTML structure without following a whole course about HTML.

Part B, however, is trickier. It is structured as a <grid> divided in two columns: the left one for the inputs (the text and the styles) and the right one for the output (the formatted text in the chosen style). The text can be written in a <textarea> element, and will be shown as output on the right inside an element called <iframe> (used to embed another HTML document within the current HTML document). The <iframe> is populated through the following jQuery function, a reworking of a function wrote by Bhaskar Tiwari:

(function() {
	$('.grid').height( $(window).height() );	
	var	contents = $('iframe').contents(),
		body = contents.find('body'),
		styleTag = $('<style></style>').appendTo(contents.find('head'));
	$('textarea').keyup(function() {
		var $this = $(this);
		if ( $this.attr('id') === 'textarea') {
			body.html( $this.val() );
		}
	});
})();

The grey squared buttons for choosing the styles were developed in Javascript. Here is what we did: we added a simple 'onclick' event on each of the buttons, defining the name of its CSS. For example:

<input type="button" value="Bauhaus" onclick="addCss('bauhaus.css')"/>
<input type="button" value="Pop Art" onclick="addCss('popart.css')"/>

The Javascript function, therefore, took as parameter the name of its CSS and created a full link to an external style sheet (i.e. the desired historical type), enriched with all its standard attributes (<rel>, <type> and, of course, <href>). The created <link> is finally put inside the body of the iframe.

function addCss(fileName) {

  var x = document.getElementById("iframe");
  var y = x.contentWindow.document;
  var link = document.createElement("link");

  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = fileName;

  y.body.appendChild(link);
}

In conclusion, the 'cleaning' button was a 'trick' to avoid the accumulation/sum of the stylesheets one above the other. With the Js method removeChild() we managed to remove a specified child node of the specified element (i.e. the iframe), and we chose it to be the second, assuming that the first is the written text. So, the Js function will never remove the text but only the first appended CSS (so not the last one! ).

function removeCss() {
  var x = document.getElementById("iframe");
  var y = x.contentWindow.document;
  var list = y.body;
  
  list.removeChild(list.childNodes[1]);
}