Hello, I'm trying to add a Persian language translation, but when I edit KlipTok.en.json and replace English words with Persian, the JSON file format changes, particularly "" location.

this is what happening

While adding the Dutch translations for the newly added transcription texts I noticed one of the lines of text not being translated, Results from clip title search for text (visible in screenshot where I have the Dutch language active on the site). I also couldn't find it in the en-US json file.

Screenshot below with Dutch language active:

Another thing you might notice on the screenshot above is the button isn't being translated. I tested both Dutch and German which both have NextPage translations available but neither of them have the translated version showing. The same goes for the PreviousPage button.

Screenshot below with German language active:

Expected behaviour:

The share button/icon on a streamers KlipTok page should read: Share streamer or Share channel

Actual behaviour:

It share it's description with the Share clip button.

The Comments title isn't showing it's translated text on the clip view.

I made a Norwegian translation
Hit me up, so I can send you the file :)

Discord name: Steffino#0449

Croatian translations (hr-HR) break KlipTok due to a missing translation in Humanizer:

Humanizr/Humanizer#1045

Start and End date in date picker are missing from localization dictionary.

Those might be displayed as part of datepicker component.

The language name drop down should display the native translation for each language.

Dependent on dotnet/runtime#44739

Information on the GitHub translation action at:

https://github.com/marketplace/actions/translation-action

Hi Jeff,

RTL support has a lot of quirks that can make Kliptok uncomfortable to use for RTL users, here is some issues related to RTL layout I think you should consider.

Landing page

1. About link:
   Margin is set to margin-left: auto, must be changed to:

   (in _speacing.scss:70)
   @media (min-width: 768px)
   .ml-md-auto, .mx-md-auto {
   	margin-right: auto !important;
   }
   

2. Question mark is flipped:
   Arabic, Hebrew, and other languages that use right-to-left scripts commonly include numerals or include text written in the Latin or other scripts: both of these typically flow left-to-right within the overall right-to-left context.
   Question mark “?”, exclamation mark “!”, period “.”, etc. have the BiDi class O.N. ('Other Neutrals'), which means effectively that it adapts to the directionality of the surrounding text. To ensure those issues don't occur, you can use the <bdi> tag:

     <bdi>
     	<div class="left">
             <a class="twitchChannelName" href="/clip/AntediluvianCulturedSandwichKippa-0mcY7Mj3JpPMqMSB">yuno returns?</a>
             <br>
             <a class="twitchChannelName" href="fuslie" target="">fuslie</a> يلعب Just Chatting
             <br>
             تم التسجيل منذ 9 أيام
               - سجل بواسطة wang633
         </div>
     </bdi>
   

click here for more details about <bdi> tag.

3. Font must be changed.
4. Ribbon should be rotated and aligned to the left:

   	(in _layout.scss:311)
   	@media (min-width: 768px)
   	.ribbon-container {
   		width: 150px;
   		height: 150px;
   		overflow: hidden;
   		position: absolute;
   		top: 2rem;
   		right: inherit;
   		left: -3px;
   		z-index: 2;
   		margin-right: 11px;
   	}
   	
   	@media (min-width: 768px)
   	(in _layout.scss:323)
   	.ribbon {
   		font: 15px;
   		color: #e6e6e6;
   		text-align: center;
   		text-shadow: rgb(0 0 0 / 80%)  0px 1px 0px;
   		transform:  rotate(-45deg);
   		position: relative;
   		padding: 5px;
   		left: 60px;
   		top: 4.5rem;
   		width: 300px;
   		background-image: -webkit-gradient(linear,  left  top,  left  bottom,  from(#c83232),  to(#ff6464));
   		box-shadow: 0px 0px 3px  rgb(0 0 0 / 30%);
   	}
   

Landing page after applying the above fixes

Clip page

1. Font must be changed and right aligned, also text box width should be 90%.
2. Title must be right aligned.
3. Font must be changed.

Clip page after applying the above fixes

About page

Change .grid-container style to:

(in _layout.scss:251)
@media (min-width: 1200px)
.grid-container {
	height: 100%;
	display: flex;
	margin-top: 0;
	flex-direction: row;
	justify-content: flex-start;
}

About page after applying the fixes

Status page

Text must be right aligned.

Status page after applying the fixes

Loading page

• Font must be changed.
• Text must be right aligned.

Font recommendation

Dubai Font is a beautiful sans-serif typeface commissioned by the Government of Dubai in partnership with Microsoft and designed by a U.S.-based firm Monotype. It contains both Latin and Arabic script.