So I have finally decided to start adding pitch accent to my vocabulary flashcards and thought I would share my method since I couldn't find any good sources explaining how to do this.
So my goal was to copy this style of formatting for my words:
Now underlining text is pretty straightforward but overlining was a pain. Luckily Flashcards Deluxe can process and view HTML so after a little Googling and testing I developed the following code which will display a thick yellow line above, below, or to the right of text:
<SPAN STYLE="text-decoration:underline yellow">Underlined Text</SPAN>
<SPAN STYLE="text-decoration:overline yellow">Overlined Text</SPAN>
<SPAN STYLE="text-decoration:overline yellow; border-right:thick yellow solid;">Overlined Text with Right Border</SPAN>
Which when combined together will show like so in the app:
基礎|<SPAN STYLE="text-decoration:overline yellow">キ</SPAN><SPAN STYLE="text-decoration:underline yellow">・ソ</SPAN>|<SPAN STYLE="text-decoration:underline yellow">キ</SPAN><SPAN STYLE="text-decoration:overline yellow; border-right:thick yellow solid;">・ソ</SPAN>
Unfortunately it's not the most simple thing to implement but it's effective and doesn't take up additional character width like arrows would. I also personally think that it looks good.
Further customization can be done by changing the color written in the code so that it shows up better against the background or by adding the right border in the middle of the transition from high to low to connect the pitch change. (Sadly the underline is rendered closer to the text than the overline so this causes the right border to stick out under the underline a bit when it's between the pitch transition thus why I haven't been doing it.)
Well, now I'm off to add pitch accent code to all 3500+ flashcards I've made up to this point...
Hope this helps any other Japanese (or other pitch accented language) learners wanting to add pitch accent to their cards. Let me know if anyone has trouble getting this run on their cards. I've also been copying my code into this website to test it just make sure I don't make a mistake while making my cards:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
So I have finally decided to start adding pitch accent to my vocabulary flashcards and thought I would share my method since I couldn't find any good sources explaining how to do this.
So my goal was to copy this style of formatting for my words:
[img]https://lh3.googleusercontent.com/fife/AAbDypDF0gxDtpgmE-VHqD6YQfv41rJjA_T-Km67Ivd7H_Q16UYK1cRlt1iaFbAY0UJvbMxdKMwEbDeyOu-fKVRZTMYddnOfAJsdm9-LwBM4-vnw1uuAFvAMQUEFkKL7UpD9oFFFyWyyrJsCCrEDXii87ErpxZ5SnRai2K9xR0gldNv7CQiAOCURj_gcQ-MjAHn9PlS1qEdwzkUI34GSydD2RhCvuju2UIYGd8th2xXZG-Gje8RAyQcz-yIehn6BLp5rMMKa6avLzJxZiFrAmA2018Ab7bHXIm_kVpBkjtN65PAneNKuSQ5msjs7BTWfacgS6BdvYBM9Bvhr_C0B_6C3fhBLakNbrrrPX_U-T2Texncacg3jFFqVsr-2nspKA97xQlxQO1wyrvtHCWgGW65oc-13lquZaMRWgbtWKNhXxFcjANMS6ALgcQPztVYWWXJDmnkFTymsEJil5meX6gQ0PYY6h-aUR_j2cYmqqtZLLPMwtjiEi9NqlfI0cIPmgJwLL23_Ik_QKmXqt_HrDUTEAe6aiZvEbUbJGh4nNxOB_6gBPSe4kPQp7hFB-zdCBdhJyVlKGhxeIT7VaQ8noKEIe_s7fO7gC0DPuLw96BiKWyxkTeLPqQ8Lv0wBUi5KWHF7YqdUt7R2KtqHhJgapuq4YpZ9LjHUdO-zGINX8tnLIx9fRTlFZDBTftDAB9dKMrX_u6l4-fWi-jLakHDyHESVDdEPkp-AolKpxxtsyhiWgVK7G_IcRTdad7mc29CCbda0mMHvqDw1ftXrP5puVj9hvp99UdU8LaSW_DaaB7_LWwyiic6OQut3NOXg-RvUjA-51KeiPKonV11YOHcarjty03PcOX4r3GT-3j2tfWJ790o5OUccNuz2lKuxIpIDNpvK6CypSQSdZfBpoPBU3qb3sXzyS3B3iy-80Gbwa8_ufhXf9uFTRCdAltKYNVLtFsnBB9ISd_2kwijewDGTyg4t-XZI1-xCFwn6UKd6BjCfFpITd8jDKoxkFJrRYCCplAVUYUsX2I7l5F1a1b2hzGn5XWZrXv22ze6mumj3A8iFsSQCXwgBhCjrBr4GRTjIcH2spjAtLAWWJNeCS-pN5Ecn0_PCBm9oJucgaV-wzCP2vSdSYr3OeS-T71v3WCGmgrSKhxh6fvS9GbGj8pva81lNdFiAv0I1WJ5zm8urHDYy2bwoKKoL-6zBSB0C9EQTnU_Kh7W5hZ493HM6mg0mjqtrZ3y6L1h_m2BPHl3iU_XFTaXMfbSs_aH-gCOiasbas_1ugfx8697yMg=w1920-h937[/img]
Now underlining text is pretty straightforward but overlining was a pain. Luckily Flashcards Deluxe can process and view HTML so after a little Googling and testing I developed the following code which will display a thick yellow line above, below, or to the right of text:
[quote]<SPAN STYLE="text-decoration:underline yellow">Underlined Text</SPAN>
<SPAN STYLE="text-decoration:overline yellow">Overlined Text</SPAN>
<SPAN STYLE="text-decoration:overline yellow; border-right:thick yellow solid;">Overlined Text with Right Border</SPAN>[/quote]
Which when combined together will show like so in the app:
[quote]基礎|<SPAN STYLE="text-decoration:overline yellow">キ</SPAN><SPAN STYLE="text-decoration:underline yellow">・ソ</SPAN>|<SPAN STYLE="text-decoration:underline yellow">キ</SPAN><SPAN STYLE="text-decoration:overline yellow; border-right:thick yellow solid;">・ソ</SPAN>[/quote]
[img]https://lh3.googleusercontent.com/fife/AAbDypD0fCP-7PjvIj2cEHuk51Okhe2HRGOyif--Ck9vD5ylJ5twf29aNsrcbQ-xGPxJjN3ImRbXic0nx54lY00HvzXUxyhL9uQ-h3ROEv1T-ty1D8G9m0p6bQ01vD04_4rooV5PuQQtx7mtnIIYGUQgNA-xCDoHqfm-u8qMz-zjBh7em2sLkF0sKwPtvOLJdQkcwkGVPLERTcUCM7vLyQTi56ocwTIDlTqol61MrW6pZRtJDFCKTyvkjROiK1DpF9YqYTrQ94TiyqC8OauE7QZgF5A7RJ9StC9GhcoMXzBS6IwypNC4xWktSR5iwO9FlrCRqoNY84QgFYCBIiJhQT--CEyO0DLfjZaEsN7THylWOqI2APUwRv1VLBLqdNJ94Z8JEasQSz8MJbsQYKIT6Qz7cjfAhSEdHKbuQ_Mmz0APf4gdgaWi9rQVlhs5MUejaDKcvv2EB8KCZpVK1rnFpPsdi1GMqwKcpvnXnS2XhzLi8cBMpmT_x2IR_Lh7NrntNnj4GfvqR-9Egn8r4TvFAMP0M3pKwoYJokwtbsRlhFTHcgCZhd_6beAe-ldzhOj_RmnhnjQTyTnPHrdU5z5Yvk267kGnqsTcsA_XUnkI2cfBeNGJUCOnbsXeO-vATolirK9NFO40ajoEatrOpWQQXh82jlQAyTT8A3N55eKbzQVN6gQV0_QUP_VO8T9jarsF2eaoNdWnfRbl5OqmzQUJXuFExkjbSOiCcwuzM-rWl3Dq30EPRDXot8B4jti8Paa_uzdJRQGGtQuTjOLiJ-ObQVM5aYhhK2KLUY5Fxs_CSccgmeUFeEaynH2ucQrmQzjcEt7D-NkBiXJLcSnTbeyHK740NXJd8d8sIiNT9k0WiXtQOiO7il4N0eGy3-4Y7-ovdIFy1DwQvVflYVVSS4q33V2GxDvCi-rMWbvZ2QNTgf_KBqaSwDHtkb6f4y_GDSezOJZms9w_QKmp_0ZVlHVG44PPx9PZxbIJvia4dSnRr2WfvHCSebJK8IbKfY2Q_WM-e0e9w4Hm2Krd3R5wHBPa0xDeVJsfn7OPP0FLXcTipV9w0B_ocxpas3YTqUO1yEYPUAHHUxal8nmliZ-0RrTVaVu8KmTpw5_KZtRwFYDjSPaOYGvxVOBalsmXc5r7bcxGhJ_DUClEltJgSYYBnI-nJPGQpMXYVht99VnvKYT-asbEs_cewTslOGRFnoMbHu1Kkv4rzmlq8Vd9LO7-RA5Du4vkXhDuJ2uFqC4vYy33CG0x4DcJDxnyoftfYs994OQWaAbVFsb8g_t3Xg=w972-h911[/img]
Unfortunately it's not the most simple thing to implement but it's effective and doesn't take up additional character width like arrows would. I also personally think that it looks good.
Further customization can be done by changing the color written in the code so that it shows up better against the background or by adding the right border in the middle of the transition from high to low to connect the pitch change. (Sadly the underline is rendered closer to the text than the overline so this causes the right border to stick out under the underline a bit when it's between the pitch transition thus why I haven't been doing it.)
Well, now I'm off to add pitch accent code to all 3500+ flashcards I've made up to this point...
Hope this helps any other Japanese (or other pitch accented language) learners wanting to add pitch accent to their cards. Let me know if anyone has trouble getting this run on their cards. I've also been copying my code into this website to test it just make sure I don't make a mistake while making my cards:
[url]https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro[/url]