

I wish I could read Wikipedia like this - assaflavie
http://blog.assaflavie.com/wikipedia/

======
Svip
This already exists on Wikipedia.

Under preferences, select the Gadgets tab and enable "Navigation popups".

When hovering over a link in a Wikipedia article, a small popup will appear,
in addition to some metadata about the link, the first paragraph of the
article will appear, including links that may appear in that paragraph, which
can also be hovered to make another popup appear.

~~~
neilk
The OP's design for it is much nicer.

Navigation popups have been around since 2005, and while in some ways better
than the OP's design (pictures!) this is useful enough to test it as default
behavior.

Hover doesn't work on mobile, so perhaps they should appear if you click and
hold for a few seconds.

~~~
3rd3
Implementing it in HTML/CSS/JS certainly poses an interesting problem because,
as far as I know, one cannot directly access individual, dynamically broken
lines of text. One would probably have to wrap each word in a container and
keep track of the absolute positions.

~~~
assaflavie
Very true. I got a rough POC of this, implemented using the technique in this
answer:
[http://stackoverflow.com/a/22816419/11208](http://stackoverflow.com/a/22816419/11208)

(just with divs instead of images)

It's very brittle though. It relies on knowing the line-height, calculating
the line in which the highlighted word sits, accounting for the existence of
vertical scroll-bars... not trivial.

~~~
3rd3
Ah, that was surprisingly easy:
[http://jsfiddle.net/5p92U/](http://jsfiddle.net/5p92U/)

Or am I missing something?

Edit: Yes, I do. It does not work together with images on the right side:
[http://jsfiddle.net/Nup2F/](http://jsfiddle.net/Nup2F/)

------
ygra
Incidentally, this was what my diploma thesis was about. The basic idea was to
have a single »text« that contains lots of possible branching or expansion
points, depending on certain criteria. Depending on those criteria you'd get a
expanded or contracted text to read that would be tailored to what you already
know or are interested about. Altering the text in small parts (like [−1½]
mentioned in another comment – I found that one much later, though) was one
part of it; inline expansions if necessary or wanted were a possible UX
enhancement I thought of (avoiding a completely static text where you'd have
to tell the engine everything beforehand).

Use cases I thought of were mainly adjusting texts explaining things (e.g.
Wikipedia, school books, etc.) to the already existing knowledge of the
reader. So that an article explaining a concept could look radically different
(and going into increasingly more detail) depending on what the reader already
knows. One proof of concept I created was adjusting the German Wikipedia
article on Turing machines to three different levels (school, 1st semester CS
student, 4th semester CS student) [75.3]. What each level does is either
explaining things differently or leaving out parts altogether (no need
horrifying a pupil with formulae). So my main focus was on providing something
that reads well (expanding things inline still incur a context switch because
they're not part of the original narrative) and finding a way how to model
such things. Nothing automatic because a clear semantic model is needed for
that to work.

Thesis can be found at [0.046], it's in German, but the abstract is in English
too. Just in case someone might be interested in that.

[−1½] [http://www.telescopictext.com/](http://www.telescopictext.com/)
mentioned by
[https://news.ycombinator.com/item?id=7602335](https://news.ycombinator.com/item?id=7602335)

[75.3]
[http://hypftier.de/temp/turing.html](http://hypftier.de/temp/turing.html) –
sorry, it's in German, but Google Translate seems to work fine.

[0.046]
[http://hypftier.de/temp/Diplomarbeit.pdf](http://hypftier.de/temp/Diplomarbeit.pdf)

~~~
CatsoCatsoCatso
Telescope Text is very interesting, thanks for the link.

~~~
tim333
Yeah, it would be an interesting format to produce a novel in. You could see
the summarised story and expand the interesting bits.

------
tty
Wikipedia currently has a Beta feature name Hovercards

You can enable it here

[https://en.wikipedia.org/wiki/Special:Preferences#mw-
prefsec...](https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsection-
betafeatures)

~~~
nashashmi
I prefer Chrome's extension called Google dictionary. Every time I highlight a
word, it pulls up a definition. Anywhere on the web.

~~~
err4nt
OS X and iOS users can do this in Chrome and Safari, I think the shortcut it
selecting a word and pressing Command-Control-D or something :)

~~~
neic
Select and Command-Control-D is right. You can also do a three finger tab. See
[https://en.wikipedia.org/wiki/Dictionary_(software)#Quick_ac...](https://en.wikipedia.org/wiki/Dictionary_\(software\)#Quick_access)

------
assaflavie
About popups/tooltips/hovercards: I considered this approach, but decided to
go with this sort of "inline" expansion for the following reasons:

1\. A popup obscures the original text. This interferes with context, albeit
admittedly to a much lesser degree than full-blown navigation, but still.

2\. Multi-level popup hierarchies just don't look good, in my opinion.

3\. You must dismiss a popup to continue, whereas with inline expansion you
can just as well keep the expansion and continue reading.

4\. The hover approach doesn't work as well for touch-devices (i.e. without a
mouse).

~~~
TeMPOraL
Agree with all four; I prefer inline expansion to popups as well. Especially
2/ \- multiple popups can quickly lead to a mess on screen, just like on the
Wikipedia's Navigation Popups screenshot, where it does not only look ugly,
but the popups also obscure each other as well as the original text.

------
dredmorbius
Tree-style tabbed browsing makes tree-traversal style web browsing far more
tractable.

Sadly, Chrome doesn't have a tree-style tabs mode, nor can it be provided by
the existing Chrome extension format. There are a number of tree-style tab
extensions for Firefox (e.g., "Tree Style Tab":
[http://piro.sakura.ne.jp/xul/_treestyletab.html.en](http://piro.sakura.ne.jp/xul/_treestyletab.html.en)).

There are any of a number of changes to the browser model I'd very much prefer
aimed at information management, as opposed to the web-applications centric
focus of the past several years.

In an interesting departure, Kobo advertised among the features of its
(Android-based) tablet a web browser which simplified pages to an easy-to-read
view. Based on present pre-loaded apps bundles, it looks as if that was the
Pocket browser, but I still find it interesting that this was pitched as a
benefit to a largely nontechnical, literary audience. It certainly reflects my
own growing dissatisfaction with present-generation browsers.

------
Goladus
Any article on an advanced topic is going to be difficult if you lack
prerequisite knowledge, no matter how fancy the cross-reference ui.

------
sksksk
I find the Google Dictionary plugin is pretty good for reading wikipedia like
this...

[https://chrome.google.com/webstore/detail/google-
dictionary-...](https://chrome.google.com/webstore/detail/google-dictionary-
by-goog/mgijmajocgfcbeboacabfgobmjgjcoja?hl=en)

------
alxndr
Similar, but apparently "one-way":
[http://www.telescopictext.com/](http://www.telescopictext.com/)

------
Holbein
While the suggested feature would be a improvement, the real goal imho should
be that each Wikipedia article can be read and understood by itself, without
the need to go on a recursive yak shaving expedition through other articles
first.

~~~
Wohui
I don't see how that is feasible. Upvoting the analogy though.

------
jasongrout
The American Institute of Mathematics has been promoting "knowls", which is a
very similar idea and implementation:
[http://www.aimath.org/knowlepedia/](http://www.aimath.org/knowlepedia/)

Rob Beezer's free open-source linear algebra book uses these _extensively_ to
provide more details in proofs and in exposition. It's very nice. For example,
click on the underlined blue text at [http://linear.ups.edu/html/section-
SSLE.html](http://linear.ups.edu/html/section-SSLE.html)

------
MichaelAza
Wish granted:
[http://wikiballoons.tomodo.me/wiki/Main_Page](http://wikiballoons.tomodo.me/wiki/Main_Page)

I also made a (by no means complete) POC more simmiliar to your animation
which you're welcome to fork and improve:
[http://en.wikimore.tomodo.me/wiki/Main_Page](http://en.wikimore.tomodo.me/wiki/Main_Page)

In general, whenever you want to improve a website - Tomodo is the place to go
([http://tomodo.com/](http://tomodo.com/))

~~~
owenversteeg
Hmm. Your example doesn't work for me (Arch Linux Chromium 28). Tomodo is also
broken in general when I tried to use it.

------
Aardwolf
Since my primary language is Dutch, it's easy for me:

If I want a short article, read the Dutch version. If I want too many details,
read the English version :)

~~~
ronaldx
I have Dutch as a second language and can vouch for this - when an English
article is convoluted and misses the point, I click on the Dutch link for a
simpler version.

------
zodiac
I thought this was a really interesting idea and tried implementing it. You
can check out the demo here:

[http://xuanji.appspot.com/static/wikipedia.html](http://xuanji.appspot.com/static/wikipedia.html)

Note that the "sinusoidal wave" link isn't working, as it redirects to "sine
wave"...gotta work around that :(

If you want to read/modify the code send a pull request to
github.com/zodiac/xuanji.appspot.com/, the commit which implemented this is
[https://github.com/zodiac/xuanji.appspot.com/commit/872b40dc...](https://github.com/zodiac/xuanji.appspot.com/commit/872b40dca7dd001b6413eee8e8d9b3daff3a1c1d)

~~~
someguy1233
It works well until you get too deep. Then it becomes unreadable.

Http://i.imgur.com/9lSpyxb.png

------
bachback
welcome to Ted Nelson's original idea of hypertext. further information here:
[http://en.wikipedia.org/wiki/History_of_hypertext](http://en.wikipedia.org/wiki/History_of_hypertext)

------
kubiiii
I like it a lot, my use of wikipedia often leads to a bunch of opened tabs and
a lack of focus on what I was looking for in the first place (which might also
be a great thing depending on your mood).

------
epochwolf
If you have a mac, you can right click on any word and choose "Look up in
dictionary". The dictionary pulls definitions from it's internal dictionary
and wikipedia.

------
lewispollard
I use the 'wikipedia quick hints' chrome extension and it works really well
for me. It works kind of like the navigation popups already mentioned - but
links inside the modal can also be hovered over, 'recursively'.

[https://chrome.google.com/webstore/detail/wikipedia-quick-
hi...](https://chrome.google.com/webstore/detail/wikipedia-quick-
hints/ldnhgfghebflgcndlbppfanbchpgmkna)

------
enscr
I prefer popups (floating elements) instead of altering the flow of the
document. The continuous re-flow of the document is distracting.

~~~
vacri
I'm the same - I'm currently trying to use DuckDuckGo and familiarising myself
to it, but it's driving me nuts as it reflows the results as it loads
elements. I'll go to click on something only to have it move away as another
element is loaded.

------
hngiszmo
I want my computer to get a concept of what I know. It should then gray out
stuff I know and linkify stuff that might be new to me. Semantic Web is the
key word here. Decades of research went into that but this magic tool still is
not anywhere near yet.

------
ozh
Neat idea, but the article also made me discover Basic English and its 850
words. Didn't know about that, I think that should be mentioned when you learn
English.

Does anyone know of similar general purpose word sets for other languages?

~~~
jaynos
>Does anyone know of similar general purpose word sets for other languages?

This would be great. All my attempts at learning a new language are thwarted
by the seeming daunting nature of the task. 850 (or so) words? I could see
myself doing that (and then continuing on to another few thousand words.

I believe Tim Ferriss did something like this for learning Japanese. He made
the list himself, but published it for others. It's in "The 4 Hour Chef" and
probably on his website.

~~~
jaynos
Self reply, I hope that's okay.

I looked into this more (had an urge to learn Spanish today). Frequency
dictionaries might be a good place to start. Here's the Spanish one I found
[1]. It's a dictionary sorted by frequency of use (in a 20 million word text
survey) instead of alphabetically. I imagine you can find a similar dictionary
for other languages.

[1] [http://speak-spanish.ru/wp-
content/uploads/A-FreDictSpan.pdf](http://speak-spanish.ru/wp-
content/uploads/A-FreDictSpan.pdf)

------
Raphmedia
Take a look at
[https://github.com/sanketsaurav/easywiki](https://github.com/sanketsaurav/easywiki)
which do exactly what he proposes and work on other websites when hovering
wikipedia links!

------
badgateway
Didn't Ted Nelson suggest this sort of in-situ display for transclusion in
Xanadu?

~~~
kristopolous
Goes a bit beyond that, especially in the kablang navigation and sworfing but
yes ... it definitely gets closer than the current one-way linking model of
html.

------
softgrow
Maybe the prose could be written to assume less knowledge and reduce the
amount of other material needed for most people to understand? Alternatively
as a user preference the prose could auto-include the meanings of some terms?

------
mosselman
I like your concept a lot. It would be great addition to reading complex
things.

------
r0h1t4sh
It will be great to see this as a Chrome/FF extension.

------
api_or_ipa
This is why some IDEs allow you to to "peek" at a definition, for example.

------
brunorsini
This reminds me of Apture, which Google acquired in 2011.

------
Zakuzaa
tldr.io chrome extension does something like this

~~~
assaflavie
Thank you! Just tried it. I'm in love. :)

------
Dewie
Yeah... try to look up some category theory terms you found in the wild on
Wikipedia. You will not be enlightened.

I guess this can be generalized to most mathematics on Wikipedia.

------
PhasmaFelis
What we really need is for more Wikipedia writers to remember that it's an
encyclopedia, not a technical reference manual.

