https://www.duolingo.com/HartzHandia

"Tables" in the forum posts

The initial plan was to try a few things here and get rid of the post. However, Usagiboy asked to share the technique, and I simply cannot say "no" :) I'm still not happy with the way it looks, especially in the mobile site. Yet, it is better than nothing and hopefully it will be useful.

So, this table

(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;} (ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;}

 

is produced by the code below. Essentially, it is an optical illusion, a set of cell-like elements formatted with CSS and glued together by the text flow. I am not the author of the technique, the thanks should go to HeadwayCourse.

<pre>*(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;}* *(nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;}* *(tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;}* *(vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;}* *(usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;}* *(ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;}* </pre>
June 21, 2015

25 Comments


https://www.duolingo.com/Usagiboy7

Oh hey!! You got a table to work! :D will you share the coding with us?

June 21, 2015

https://www.duolingo.com/HartzHandia

These are not real tables, but yes, why not. Here is a bit more complete example: https://www.duolingo.com/comment/9199690. Here I'm just trying to make it work with the mobile version of the site.

I'll send you something shortly.

June 21, 2015

https://www.duolingo.com/raans
  • 2074

Wow, this looks awesome. I wished DL would just make it available with the regular Markdown syntax (a bit easier :)). Your example in your comment above looks just great!

dd2927a3e0

June 22, 2015

https://www.duolingo.com/Dessamator

Despite markdown being useful code for creating/formatting pages or text. The original spec was too ambiguous so there are many things which work differently in different versions of markdown, even using the same syntax.

I'm not exactly sure which flavor of markdown Duolingo adopted, but for those same reasons it has issues. One issue is that the original spec doesn't support tables, some flavors of markdown support that through extensions rather than using the core.

Generally speaking though, most forums don't really need tables. I've seldom found the need for it, in several forums I've used.

To put it bluntly markdown is a mess.

June 25, 2015

https://www.duolingo.com/raans
  • 2074

I admit that I neither knew nor checked it. You're right, there isn't really much use of tables. The only example I can think is the our beloved "Weekly Incubator Update". I know that you already tried and posted alternatives. ;)

June 25, 2015

https://www.duolingo.com/Dessamator

Yup, but this would require a lot of time from jitengore to implement. Although I could probably write a userscript to do it automatically.

Hmm, that would be a rather interesting hack :).

June 25, 2015

https://www.duolingo.com/raans
  • 2074

@Dessamator: Yes, this would be really great — not the least bit selfish, here. :)

June 25, 2015

https://www.duolingo.com/Dessamator

raans wrote:

@Dessamator: Yes, this would be really great — not the least bit selfish, here. :)


Well, if I knew the exact code Duolingo uses to change or submit a new post, it would be rather easy. But currently the only possibility would be to change the textarea. Something I already do with another script..

The problem is that jitengore's posts are already huge, adding all that mark-up in the text-area will make it completely unmanageable. Also, I'm currently developing another interesting user-script. Still need to debug it a lot ...

June 25, 2015

https://www.duolingo.com/raans
  • 2074

That looks pretty interesting (not tried yet). I can't wait for your secret new 'weapon' (user script)... :)

June 25, 2015

https://www.duolingo.com/m.tastic

This is the best.

June 22, 2015

https://www.duolingo.com/Artilex

So the tables aren't working anymore?

March 4, 2016

https://www.duolingo.com/daKanga
Mod
  • 146

yes - that is correct.

March 4, 2016

https://www.duolingo.com/Pikachu025

This post looks so funny now lol. It looks like everyone were appreciating that huge lump of congested code! xD

January 12, 2019

https://www.duolingo.com/EoghanBostock

German Pronoun {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Conjugation {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} English Pronoun {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Conjugation {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Ich {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} bin {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} I {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} am {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Du {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} bist {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} You {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} are {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Er sie es {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} ist {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} He she it {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} is {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Wir {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} sind {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} We {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} are {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Ihr {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} seid {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} You {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} are {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} Sie Sie {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} sind {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} They You {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} are {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;}

.

September 29, 2015

https://www.duolingo.com/EoghanBostock

Thank you so much lindakanga

September 29, 2015

https://www.duolingo.com/silmeth

Ha, I have managed to use markdown formatting in tables for Polish IPA! :)

I needed two hacks: first, put everything with markdown after style, second – define height of element by hand (so that, regardless of formatting, every cell is the same height).

I used code like that:

*{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} letter(s)* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Polish example* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} English approximation* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} IPA*

*{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} c* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} dzie**c**ko* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} ca**ts*** *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} \[[ʦ](https://en.wikipedia.org/wiki/Voiceless_alveolar_affricate#Dentalized_laminal_alveolar)\]*

*{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} ć* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} by**ć*** *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} **ch**eap* *{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; height:4ex} \[[ʨ](https://en.wikipedia.org/wiki/Voiceless_alveolo-palatal_affricate)\]*

December 13, 2015

https://www.duolingo.com/TseDanylo

Does it work?

<pre>(yo) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:solid solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (nosotros/nosotras) íbamos, éramos, veíamos{@style=float:left;width:60%;border:1px #1caff6;border-style:solid solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (tú) ibas, eras, veías{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (vosotros/vosotras) ibais, erais, veíais{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;white-space:nowrap;text-overflow:clip;} (usted/él/ella) iba, era, veía{@style=float:left;width:40%;border:1px #1caff6;border-style:none solid solid solid;padding:6px;font-style:normal;text-overflow:clip;} (ustedes/ellos/ellas) iban, eran, veían{@style=float:left;width:60%;border:1px #1caff6;border-style:none solid solid none;padding:6px;font-style:normal;text-overflow:clip;} </pre>

September 24, 2016

https://www.duolingo.com/scilling

Not since mid-January 2016.

EDIT: See here for an example of GitHub-flavored Markdown table syntax, which is supported.

October 1, 2016
Learn a language in just 5 minutes a day. For free.