Sedra

SEDRA III

SEDRA III was the last file based SEDRA distribution. It still has value for other sites wishing to provide thier own lexical tagging and we provide it here as a downloadable resource.

Virtual Keyboard

The Virtual keyboard in use on the SEDRA site derives from software by Rob Garrison (mottie). You can find his original souce on GitHub. Adding fully functional Syriac capability required some modifications to Rob's software and those changes can also be found on GitHub. The changes required some modification to CTRL and ALT keyboard mappings. It should be compatible with other language files but we have not fully tested other languages. Additionally we have a small javascript procedure that helps to automate using the Syriac keyboard. That file can be found on this site.

Fonts

The fonts used in the Sedra application are based on the fonts provided by Beth Mardutho. In order to use these fonts in a web page you need

The font files
The CSS that define the fonts
HTML and CSS that is specific to your use case.

The first two resources you can download using the links provided. The third you will write yourself but will be similar to the following examples:


<p style="direction: rtl; font-size: 2em; font-family: SertoJerusalem;" >ܒܟܬܒܗ</p>


<p style="direction: rtl; font-size: 2em; font-family: EstrangeloEdessa;" >ܒܟܬܒܗ</p>

In the simplest case you provide the font-family for the text in CSS. This can be in-line styles or classes defined in a CSS file. More properly you should also define the text direction. In pages that are majority Syriac text the font-family and direction can be specified for the body rather than a specific HTML element. As we do in Sedra, you can change the font-family for an HTML element with JavaScript and make the page dynamic by allowing your users to select their font.

The following font families are defined in the files we have provided: EastSyriacAdiabene, EastSyriacCtesiphon, EstrangeloEdessa, EstrangeloAntioch, SertoBatnan, SertoJerusalem, SertoKharput, SertoMalankara, SertoMardin, EstrangeloMidyat, EstrangeloNisibin, EstrangeloQuenneshrin, EstrangeloTalada, EstrangeloTurAbdin, SertoUrhoy.

Directionally Responsive Input

One of the information requests we get is how do we handle textual input fields that can adapt and change direction based upon the content. The algorithm we use is straightforward. We add a class to all input fields that need to have changable input direction and then attach a keyup handler. Below is a code snippet that can be placed in your html page and should help to understand our algorithm. Take note that we use jQuery and you will need to adjust the code for other javascript frameworks.


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input class="bidirectional-text" style="font-family: SertoJerusalem;" />
<script type="text/javascript">
function setDirection(e)
{
	// Any Syriac code page characters within the text box?
	var matches = $('input.bidirectional-text').val().match(/[\u0700-\u074F]/g);

	if (matches)
	{
		// RTL if any Syriac is present
		$('input.bidirectional-text').css('text-align', 'right');
		$('input.bidirectional-text').css('direction', 'rtl');
	}
	else
	{
		// LTR if no Syriac is present
		$('input.bidirectional-text').css('text-align', 'left');
		$('input.bidirectional-text').css('direction', 'ltr');
	}
};

$(function()
{
	$('input.bidirectional-text').on('keyup', setDirection);
});
</script>
</body>
</html>