hitp-webpage
html5.id.toc.preview format with
HTML5, IDs, Table-of-Contents, Link-preview

Description

HITP (html5.id.toc.preview) is a-FORMAT (method) for publishing WEBPAGES (digital-texts | ebooks) with these advantages:
1) html5: no need for special programs to read them, as all machines have the needed browser (= html reader). Also html5-elements structure the-text for humans and machines.
2) id: anyone can-refer to ANY PART of them, because all their html-elements have IDs.
3) toc: automatically created expandable table-of-contents makes reading easy.
4) preview: same domain link-preview makes reading fast.

With these attributes and by connecting the-names of the-sentences with their definitions using preview-links, we can-create our electronic-texts subjectively monosemous, easily readable by humans and machines.
Knowledge of html is a-prerequisite to read the-rest of this page.

Name

Name:
• cpt.Html5IdTocPreview,
• cpt.html5.id.toc.preview,
• generic-specific-pair--webpage, {2013.09.01}
• html5.id.toc.preview-webpage,
• html5.id.toc.preview-page,
• html5IdTocPreview-webpage,
• hitp-webpage,
• hitp-webpage-application,
• hitp-web-page,
• hitp-page,
• title-value-pair-webpage,

Abbreviation:
• cpt.hitp,
• wpgHitp,
• hitp,
• hitpwpg,

Browser-compatibility

Name:
• hitp'browser,

Description:
• Hitp is-tested on modern {2016} browsers on win10: Chrome, Firefox, Safari, Edge, IE11.

Code

Name:
• hitp'code,

Description:
The-code is-written in 3 computer-languages, because it is a-web-application:
html: for the-structure of the-information,
css: for its presentation,
JavaScript: for its processing.

Download

Name:
• hitp'download,

GitHub-site:
Since version.2014.08.05.10.valuenames I published the-code on GitHub.
https://github.com/synagonism/hitp/.

To use the online files, use the-latest-files on the-project-page on GitHub.
http://synagonism.github.io/hitp/hitp.html.
http://synagonism.github.io/hitp/hitp.css.
http://synagonism.github.io/hitp/hitp.js.

Synagonism-site:
v.2016.01.24.12.toc-icons,
v.2015.10.26.11.preferences,
v.2014.08.05.10.valuenames,
v.2014.01.09.08.toc,
v.2013.11.06.07.tabs,
v.2013.07.15.05.toc-algo,
v.2013.06.27.04.html5.id.toc.preview,
v.2013.04.14.03.preview,
v.2013.04.01.02.toc,
v.2011.02.17.01.html5.id,

Code.HTML

Name:
• hitp'html,
• hitp'code.html,

Description:
Html defines the-structure of a-hitp-webpage and stores the-information (the-content).

HTML5

Name:
• hitp'html5,

We use HTML5-elements to create the-structure of a-hitp-page.
Every hitp-page contains an ordered-set of title-value-pairs which are-implemented with 1 header, 1 optional footer, and many section-html5-elements.
• The-header-element is the first body-element with 1 h1-element that serves as the-title of the-document.
• The optional footer-element is the last element, and has no heading-element.
• Every section-element includes 1 heading-element and other non heading-elements, mainly p-elements.
Also a-section-element includes other sections-elements with ordered-headings in the form h1, h2, h3, ...
The last section-element has a-h1-element with content 'Meta Info'.

html-file

Name:
• hitp-doc,
• hitp'html-file,
• hitp'file,
• hitp-file,

Description:
The-body-html-element of this file contains the-information we want to publish in AN-ORDERED-SET of 'TITLE-VALUE-PAIRS'.

IDs

Name:
• hitp'id,

Description:
The core concept (and first motive) of our-proposal is the-addition of ID-attributes on all elements of an-HTML-text.
For example:
<h1 id="idXxxx">...
<p id="idYyyy">...

Now we can-refer to any part of the-document!!!

The-IDs must-be unique:
You can-use as ID whatever you want.
We sugest to begin with "id" in-order to be-distinguished from other words in the-text and do-not-contain spaces.
For example:
id, idHeader, idIndex-income, ...

The-IDs must-be visible to the-reader:
The-reader, in-order to REFER to any part of the-document, must-know the-ID of this part of the-file.
This can-be-done by adding a hidden element in this part of the-file that will-be-visible when the-mouse is over this text.
But if this hidden-element is and a-link-element, then the-reader could-copy the-address of this part of the-file from the-address-bar of his browser.
Here is an-example of the simple code we have to add to reach our goal.
<p id="idYyyy">...
  <a class="clsHide" href="#idYyyy"></a></p>

With this code, when the-reader has the-mouse over an-HTML-element (a part text), at the-end appears the-id-link-symbol .
Clicking on this symbol, s|he can-see the-ID of this text and s|he can-copy from the-address-bar the-address of this particular part of the-text.
The-paragraph you are-reading now has the-feature we are-talking about and you can-experiment with it.
We can-set IDs, if we need them, on every SENTENCE in a-paragraph.

ID Patterns:
If the-author of a-doc uses patterns to write the-IDs of a-text-file, it helps the-reader to quickly identify the-parts of the-file.
Examples:
- idA4 (article)
- idA4P2 (paragraph)
- idP2 (Part)
- idP2C2 (Chapter)

NOTATION: the-ID of a-heading-element is the-ID of its section-element plus H1, H2, etc.
This way we can-link and preview the-part of the-doc with this heading.

Math formulas

Name:
• hitp'math,

Description:
Using MathJax we can-have "beautiful math in all browsers". For example: x = b ± b 2 4 a c 2 a
HOW:
1. we need to add the following code inside the-head-element:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> and
2. create the-math-code. An easy method is from the online site ShareMath.

Code.CSS

Name:
• hitp'css,
• hitp'code.css,

Description:
CSSs separate content from presentation.
We use a-css-file for harmonization in the-appearance of documents and for the-toc creation.
You need the following code to use it:
<link href="http://synagonism.github.io/hitp/hitp.css" rel="stylesheet" type="text/css" />
You can-store the-hitp.css-file AND in your server.
Also you can modify the-appearance

css-class

Name:
• hitp'css'class
• hitp'cls,
• hitpcls,

Description:
Like the-IDs, the-name of all css-classes begin with 'cls'.
Below is the-code of the-classes I am-using.

hitpclsCenter {
  text-align: center;
}

hitpclsCenterBlock {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

hitpclsCenterInline {
  display: block;
  text-align: center;
}

hitpclsBtn {
  border-radius: 5px;
  font-size: 12px;
  margin: 2px 0 5px 12px;
}

hitpclsBtn:hover {
  background: #e0f2f7;
  color: red;
}

hitpclsColorBlue {
  color: #0000ff;
}

hitpclsColorGreen {
  color: #008000;
}

hitpclsColorGreenBg {
  background-color: #008000;
}

hitpclsColorRed {
  color: #ff0000;
}

hitpclsColorYellow {
  color: #FFFF00;
}

hitpclsColorYellowBg {
  background-color: #FFFF00;
}

hitpclsEditor {
  background: transparent;
  color: #999999;
}

hitpclsFontGrExt {
  font-family: "Palatino Linotype";
}

hitpclsFontGrMg {
  font-family: MgPolNewTimes;
  font-size: 16px;
}

hitpclsFontSerif {
  font-family: Serif, "Times New Roman", Georgia;
}

hitpclsFontSansserif {
  font-family: SansSerif, "Microsoft Sans Serif", Arial, Dialog, Tahoma;
}

hitpclsFontMonospaced {
  font-family: Monospaced, "Courier New", Courier;
}

hitpclsFontScript {
  font-family: Script "Monotype Corsiva";
}

hitpclsFontDecorative {
  font-family: Wingdings;
}

hitpclsPagePb {
  display: block;
  text-align: right;
  color: green;
}

hitpclsHide {
  //misc attributes that hide id-link and expose it by hovering.
}

hitpclsSizeSmall {
  font-size: small;
}

hitpclsSizeSmallX {
  font-size: x-small;
}

hitpclsSizeMedium {
  font-size: large;
}

hitpclsSizeLarge {
  font-size: large;
  font-weight: bold;
}

hitpclsSizeLargeX {
  font-size: x-large;
  font-weight: bold;
}

hitpclsB {
  font-weight: bold;
}

hitpclsBU {
  font-weight: bold;
  text-decoration: underline;
}

hitpclsU {
  text-decoration: underline;
}

css-file

Name:
• hitp'css-file,
• hitp'file.css,

Description:
You can-download this file, or use the online one.

Code.JavaScript

Name:
• hitp'js,
• htip'code.JavaScript,
• hitp'code.js,

Description:
JavaScript does the-information processing on the-page.
- creates the-toc and inserts into the-page.
- makes the-width of toc-container dynamic.
- adds preferences on the-page.
- adds the-site-structure.
- adds the-page-path.
- ...

JavaScript-file

Name:
• hitp'js-file,
• hitp'file.js,

Description:
'hitp.js' is the-JavaScript-code you need to create a-hitp-webpage.
You can-download this file, or use the online one.
So, hitp.html, hitp.css and hitp.js is the-code needed to create hitp-pages, and it is free (MIT license).

Table-of-Contents

Name:
• hitp'toc,
• hitp'toc-tree,

Description:
When you are-reading text on a-computer-screen you are-losing your reading-position.
Hitp-webpages automatically create the-table-of-contents-tree (toc) of the-content of the-page and show your reading-position.
HOW: you need to add the following code inside the-head-element:
<script src="http://synagonism.github.io/hitp/hitp.js"></script>

The-attributes of hitp-toc are:
* It is expandable.
* There is two-way communication between the-toc and the-content.
- By clicking on the-toc, goes to that heading in the-content.
- By clicking|hovering on content, this content position is highlited in the-toc and its parents are only expanded, giving to the-reader the big picture of the-position s|he is-reading.
Thus the-toc improves the-readability of big documents.
* If the-user needs more space for the-content, the-splitbar has a-button that closes|opens the-toc with one click.
* The-splitter changes width.

My previous approach was the-creation of a-Chrome-extension, my Table-of-contents-crx which creates a-toc on any page with headings only in Chrome.

Link preview (popup)

Name:
• hitp'link-preview,
• hitp'popup,
• hitp'preview,

Description:
Another functionality that facilitates reading is the-addition of previews (pop-ups) on interal (same-origin)links with destination relatively small chunks of text.
This is espacially usefull for footnotes, abbreviations, definitions, index items, paragraphs etc.

HOW: you only have to add the-class 'clsPreview' on the-links you want to trigger popups when the-reader is hovering over them.
<a class="clsPreview" href="#idPreview">link-preview</a>

Page-components

Name:
• hitp'components,

Every hitp-webpage is comprised of:
• one html-file with the main content,
• one css-file,
• one js-file,
• one optional directory with all other needed files such as pictures, audio, video, css, etc.
The-name of the-directory is the-same with the-name of the-html-file plus the '.files' extension.

hitp directory

Name:
• hitp'dir,

Description:
This directory contains all the extra files needed for the-hitp-file.
Its name is the-name of the-hitp-file plus '.files'.

Page-path

Name:
• hitp'pagepath,
• hitp'page-path,

Description:
By setting a-paragraph with id "idMetaWebpage_path", the-program sets its content as the first paragraph in the left toc-container, showing where the-page fits in the-site's-structure.
NOTE: If the-document does-not-contain this paragraph, the-program sets the-title-element as page-path.
I put this paragraph as the last paragraph of the-meta-info--title-value-pair.

Page-structure

Name:
• hitp'page-structure,
• hitp'structure,

Description:
The-information we want to publish is AN-ORDERED-SET of 'TITLE-VALUE-PAIRS'.

hitp-title-value-pair

Name:
• hitp'title-value-pair,
• hitp-title-value-pair,
• title-value-pair,
• hitp'tvp,

Description:
The-information (content) of a-hitp-page is structured for humans and machines.
The representation method I use I call it: 'title-value-pair' method.
Its name describes the-methodology.
All content is an-ordered-set of pairs that contain a-hitp-title and a-hitp-value.

Implementation:
A-hitp-title-value-pair is implemented with the section, header or footer html-elements.

Depth-level:
The-title-value-pairs of a-page create a-tree-structure.
Then each title-value-pair has a 'depth-level' value in this structure.
The-root has a-depth-level of zero.
The deepest node has a-dept-level of 6 because we use heading-html elements.

PROPOSAL: Because many documents use deeper depth-level than six (even-though I do-not-think it is a good practice) I proposed on {2010.10.24} in public-html-comments@w3.org list to use all the single-digit numbers 0-9 as html-headings.

header title-value-pair (required)

Name:
• hitp'header,
• hitp'header_pair,

Description:
It is the first title-value-pair.
It contains the-title of the-webpage.

Implementation:
It is a-header-html-element with parts one h1-element for the-title.

Depth-level:
0. This node is the-ROOT in the-tree-structure of the-information published.

section title-value-pair (at least one)

Name:
• hitp'section,
• hitp'section_pair,

Description:
These are the-title-value-pairs that contain mainly the published information.

Implementation:
It is a-section-html-element with parts ONE h-element for the-title.
Its value can-contains other section-tvps of lesser depth-level in a-tree-structure.

Depth-level:
It is a-number 1, 2, 3, 4, 5, 6 indicating the-heading-html-element we use for its title AND the-depth-level in the-tree-structure of the-information published.

footer title-value-pair (optional)

Name:
• hitp'footer,
• hitp'footer_pair,

Description:
It needed sometimes as the last part of the-information published.

Implementation:
It is a-footer-html-element.
EXCEPTION: It may-have no hitp-title. Then it is assumed 'Footer'.

Depth-level:
1.

meta-info title-value-pair (required)

Name:
• hitp'meta,
• hitp'meta_pair,

Description:
Usually the last tvp is meta-tvp with metadata about the=hitp-webpage.

Implementation:
It is a-section-html-element.

Value:
• the-author of the-page.
• versioning info.
• page-path info.
• page visited info. etc.

Depth-level:
1.

hitp-title

Name:
• hitp'title,

Description:
A-hitp-title is the 'name' (title) of a-hitp-title-value-pair.
Denotes the-type (subject) of information the-hitp-value contains.
In other words, the-hitp-title is some generic-information and a hitp-value is a-specific or instance of the-hitp-title.

Implementation:
A-hitp-title is implemented as a-heading-html-element OR as text that ends with ':' in the FIRST line of a-paragraph.
(IF we set '_' in the-begining of a-name we can-distinguish it from same names inside 'hitp-values').

hitp-value

Name:
• hitp'value,

Description:
A-hitp-value contains structured (like an html list or table) or unstructured information (like sentences or phrases of a-natural-language).
Recursively, it can-contains other ordered-sets of title-value-pairs.

Implementation:
The main parts of hitp-values are html-paragraphs.
We can-use and any other body-element except headings.
We can-use div-elements to create substructures.

hitp-paragraph

Name:
• hitp'paragraph,

Description:
A-hitp-paragraph, like language-paragraph, is content with common meaning.
Subparagraphs are denoted with blank lines.
Sentences begin in a-new-line.
Tables and lists with the same meaning with previous text, form one hitp-paragraph.

Implementation:
Mainly, hitp-paragraphs are-created with html-paragraphs (p element).

Html-tables and html-lists, because we can-not-put inside html-paragraphs, we put after them.
We set IDs in subparagraphs and sentences, IF WE NEED TO REFER TO THEM, with the-span-html-element, like in this paragraph.

Index

Name:
• hitp'index,

Description:
Html5.id.toc.preview-pages improve the-functionality of the-indexes of text-files because we have the-capability to refer|link, from the-index, to any part of the-text (because we use IDs) and preview these parts.

Concept-Index

Name:
• hitp'concept-index,
• hitp'index.concept,

Description:
Every text describes CONCEPTS.
The-concepts have NAMES.
Every SENTENCE in a-text is composed of names.
IF we create the-concept-index of a-text, with every concept-entry to hold its names and its definition, THEN we will-have ONE interpretation of the-meaning of a-text.
IF we set preview-linking on the-names of sentences with the-concept-index, THEN the-understanding of a-text will-become FAST.

Concept-Model

Name:
• hitp'concept-model,
• hitp'modelConcept,

Description:
Every text describes concepts and relations of concepts, which form a subjective MODEL (modelConcept) of reality.
More important than the-concept-index is the-modelConcept of the-text.
In a-model-concept a-concept-entry contains, except its names and its definition and ALL its attributes|characteristics.
A crude example of a-modelConcept contains my hitp-page of the Keynes book 'The General Theory of Employment, Interest, and Money'.

Name-Index

Name:
• hitp'name-index,
• hitp'index.name,

Description:
Βy setting as ID on each name|term-entry the pattern "idIndex-term", the-reader will-have very quick access to the-entries.
un.sna.2008.html is an-example with a-name-index.

Word-Index

Name:
• hitp'index.word,
• hitp'word-index,

Description:
The majority of programs today search a-text for words and NOT names.
By pressing Ctrl+F or F3 you can-search for words.

License

Name:
• hitp'license,

Description:
This webpage's work is FREE under the-creative-commons Attribution-3.0-Unported-(CC-BY-3.0)-license.
The-computer-code is under the-MIT-license, you can-find it on GitHub.

Problem (issue)

Name:
• hitp'issue,
• hitp'problem,

overflow-x:visible, overflow-y:auto {2013.08.23}:
I needed this combination to display the-site-menu, but I found that it does not work even in the new flexbox layout.
WORKAROUND: hovering on the-menu, it displays only the left navigation container.

:after psudo-element {2013.08.23}:
Inherits properties from its dependent element, like 'underline' which we cannot change.
WORKAROUND: I hide it when I hover the main element, but have other problems.

Firefox

location.href {2013.08.16}:
FIXED
In contrast to Chrome, Firefox loses selected-text after setting value on 'location.href'.
WORKAROUND: first click to go to that location and then select-text from this location.

Back-Forward {2013.08.16}:
FIXED.
Clicking on buttons 'back', 'forward' shows the visited locations but does not go to that location.
WORKAROUND: click on the-address-bar and hit enter.

Site-structure

Name:
• hitp'site-structure,

Description:
Every hitp-page, except of presenting its own structure, presents and its site-structure in a pull-down menu.

HOW: You have to add ONCE in the-root-directory of the-site the-file 'hitpmenu.html' with the-site-structure in the-form of an-unordered-html-list.
Of cource, modifying this file, all the-hitp-pages will-present the-changes.

Writing-style

Name:
• hitp'writing-style,

Description:
Today, our information has MANY interpretations/meanings.
Hitp-pages can-reduce it, by accepting the-following writing-style.

Names:
We use the-name-notation-of-this-site.
No spaces inside names.

Definition-links:
The-names of the-sentences are-connected with preview-links with their definitions.

Sentences:
Every sentence begins in a new line, which improves readability.

Time:
{1959} denotes time.

SPECIFIC

Name:
• hitp'example,
• hitp.specific,

SPECIFIC:
This site presents many examples with our proposal.
Actually I'm writing the-site with this proposal.
Reading the-code of these examples and seeing its behavior, is the best way to understand what really we are-proposing.
ebook-examples.
law-examples.
standard-examples.
empty-page to edit on GitHub-project-page.

EVOLUTION of proposal

Name:
• hitp'evolution,
• hitp.evolution,

{version.minor}:
Preview-links have more darkblue-color than non-preview-links. {2016.05.01}
Added a-time-delay on preview-links. {2016.04.30}
Changed id-link from ¶ to a background link image. {2016.02.23}

{version.2016.01.24.12}: Toc-Icons:
Changed the icons of the-toc-tree to images from characters, for compatibility.

{version.2015.10.26.11}: Preferences:
Users now can-choose how they prefer to view hitp-pages:
- they can-have or not the link-preview characteristic,
- they can-see on the table-of-contents the position of the content they are reading by hovering or clicking on that content.

{version.2014.08.05.10}: TYPENAMES | VALUENAMES:
With 'valuename' I mean a NAME (identifier) of a VARIABLE (= a name-value pair), that denotes the VALUE (type) with which it is associated.
Now ALL the custom names of my code are valuenames, with its FIRST-CHARACTER to denote its value|type:
- aName denotes array.
- bName denotes boolean.
- fName denotes function.
- nName denotes number.
- oName denotes object.
- rName denotes regular-expression.
- sName denotes string.
- xName denotes mixed-values.
This method is a SIMPLE method to make JavaScript a type language!!! This way we increase the readability of the source code.
I published my new code, with the MIT license (= do whatever you want, only mention my work), on GitHub at https://github.com/synagonism/hitp.

{version.2014.08.02.9}: NO jQuery:
I rewrote the-code, by removing jQuery. Everything now is vanilla JavaScript.
Fixed: preview popup location.

{version.2014.01.09.8}: Table-of-contents:
Hovering a piece of text, you see its position on ToC. To see the-address of the-text you click on ¶.
With the previous functionality, you had to click on text to see its position.

{version.2013.11.06.7}: Tabs:
The page-structure is set under a tab.

{version.2013.08.21.6}: Site-structure:
Now each hitp-webpage presents and its site-structure except of its own structure.

{version.2013.07.15.5}: ToC Algorithm:
I wrote a new smaller specific algorithm that creates the ToC of a hitp-page.
The previous was the one of html5-outliner-chrome-extension.
Also I enclosed the-code in one literal object, the 'HITP'.
I allow gaps in headings like: h1, h2, h4 because existing docs use this pattern.

{version.2013.06.27.4}: Name:
I change the-name of the proposal from html5.id.toc to html5.id.toc.preview (= html5IdTocPreview)
in-order to include all its main attributes.
Abbreviation: ebkHitp, hitp.

{version.2013.04.14.3}: Link Preview:
HTML5.ID.TOC.PREVIEW: Another feature that facilitates reading-productivity.

{version.2013.04.01.2}: Table of Contents:
HTML5.ID.ToC: Adding a few lines of javascript code the static-pages are becoming dynamic ('applications!') but this facilitates reading. This way the 'electronic-text' begins to have more advantantages than 'printed-text'. Other forms of 'electronic-text' which merely digitize printed-text are inferior to 'printed-text'.

{version.2011.02.17.1}: first publication:
HTML5.ID: the goal of my first try was to show a simple method of a-text-format we can-read in a ubiquitous web-browser that anyone can-REFER to any part of it. The main types of texts I had in my mind were law-texts.

Versioning

Name:
• hitp'versioning,

Description:
We can-have a simple versioning paradigm on hitp-pages by setting the-date on its file-name plus one or more numbers indicating how many times changes have occured, ie 'index.2013.05.15.3.html' (= version 3 of index.html on {2013.05.15}).
Having and a file with only the-file-name but with the LAST version we can always have access to the last version.
From internal links we can-have access to previous dated versions.
As example look this file you are-reading.
Evolution is a continuous entity.
Every author 'subjectively' desides when to call a-page 'version'.
The last version can-hold and minor changes we do-not-think important to hold records on them.

Meta Info

VERSIONS:
• version.15.last.minor: index.html (2016-05-01.15-17)
• version.15.last.minorNo: index.2016.01.25.15.html (content)
• version.14.previous: index.2013.08.23.14.html (site-structure)
• version.13.previous: index.2013.08.20.13.html (name webpage)
• version.12.previous: index.2013.06.29.12.html (new-dir-hitp)
• version.11.previous: /hit/index.2013.06.26.html (new-name)
• version.10.previous: /hit/index.2013.06.18.html (no-doc.ready)
• version.9.previous: /hit/index.2013.06.01.html (synagonism.net)
• version.8.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.05.29.html (concept-index)
• version.7.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.05.15.html (math)
• version.6.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.04.14.html (link-preview)
• version.5.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.04.01.html (toc)
• version.4.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.03.31.html (counter)
• version.3.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.03.28.html (¶ right)
• version.2.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.01.16.html
• version.1.published: /gym-eleous.ioa.sch.gr/textid/index.2011.02.17.html
• Created: 2011.02.15

This page was visited times since 2013.05.30.

Page-path: hitp-webpage ∈ synagonism.net

Support

Comments

comments powered by Disqus