0byt3m1n1

Path: /data/17/1/18/11/1670011/user/1801231/htdocs/marketting/js/scripts/saf/ [ Home ]
File: text1.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style/editor.css" rel="stylesheet" type="text/css">
<script>
  var sLangDir=window.opener.oUtil.langDir;
  document.write("<scr"+"ipt src='../language/"+sLangDir+"/text1.js'></scr"+"ipt>");
</script>
<script language="JavaScript" src="color_picker.js"></script>
<script>writeTitle()</script>
<script language="JavaScript" src="list.js"></script>
<script>
var dialogArgument=['window.opener', 'window.opener'];
var activeModalWin;
document.onclick=hideAll;
function hideAll()
    {
    oColor1.hide();oColor2.hide();
    }

function modelessDialogShow(url,width,height)
    {
    var left = screen.availWidth/2 - width/2;
    var top = screen.availHeight/2 - height/2;
    window.open(url, "", "dependent=yes,width="+width+"px,height="+height+",left="+left+",top="+top);
    }

function modalDialogShow(url,width,height)
    {
    var left = screen.availWidth/2 - width/2;
    var top = screen.availHeight/2 - height/2;
    activeModalWin = window.open(url, "", "width="+width+"px,height="+height+",left="+left+",top="+top);
    window.onfocus = function(){if (activeModalWin.closed == false){activeModalWin.focus();};};
        
    }
    
function GetElement(oElement,sMatchTag)
    {
    while (oElement!=null&&oElement.tagName!=sMatchTag)
        {
        if(oElement.tagName=="BODY")return null;
        oElement=oElement.parentNode;
        }
    return oElement;
    }

function doWindowFocus()
    {   
    window.opener.oUtil.onSelectionChanged=new Function("realTime()");
    }
    
var obj1 = new ListEditor("obj1")

function bodyOnLoad()
    {
    window.onfocus=doWindowFocus;
    window.opener.oUtil.onSelectionChanged=new Function("realTime()");
    
    var obj=window.opener.oUtil.obj;
    
    //Font-Family
    var sTmp="["
    for(var i=0;i<obj.arrFontName.length;i++)
        {
        sFontName=obj.arrFontName[i];
        sTmp+="['"+sFontName+"','"+sFontName+"','font:8pt "+sFontName+";']," 
        }
    sTmp=sTmp.substr(0,sTmp.length-1)
    sTmp+="]";
    obj1.items=eval(sTmp);
    document.getElementById("divFont_family").innerHTML=obj1.RUN();
    obj1.onEdit = updateFont_Family;
    realTime();
    
    }

function realTime()
    {    
    var inpFont_Family = document.getElementById("inpFont_Family");
    var inpFont_StyleWeight = document.getElementById("inpFont_StyleWeight");
    var inpFont_Size = document.getElementById("inpFont_Size");
    var inpText_ForegroundColor = document.getElementById("inpText_ForegroundColor");
    var inpText_BackgroundColor = document.getElementById("inpText_BackgroundColor");
    
    var inpText_VAlign_Relative = document.getElementById("inpText_VAlign_Relative");
    var inpText_LetterSpacing = document.getElementById("inpText_LetterSpacing");
    
    var inpText_Decoration = document.getElementsByName("inpText_Decoration");
    var inpText_Case = document.getElementsByName("inpText_Case");
    var inpFont_Variant = document.getElementsByName("inpFont_Variant");
    var inpText_VAlign = document.getElementsByName("inpText_VAlign");
    
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    
    var isTextSel = window.opener.isTextSelected(oSel);
    
    var oElement;
    if(window.opener.oUtil.activeElement)
        oElement=window.opener.oUtil.activeElement;
    else
        oElement = window.opener.getSelectedElement(oSel);

    inpFont_Family.value=oElement.style.fontFamily;

    if(oElement.style.fontWeight=="normal" && oElement.style.fontStyle=="normal")
        inpFont_StyleWeight.value=sStyleWeight1;
    else if(oElement.style.fontWeight=="normal" && oElement.style.fontStyle=="italic")
        inpFont_StyleWeight.value=sStyleWeight2;
    else if(oElement.style.fontWeight=="bold" && oElement.style.fontStyle=="normal")
        inpFont_StyleWeight.value=sStyleWeight3;
    else if(oElement.style.fontWeight=="bold" && oElement.style.fontStyle=="italic")
        inpFont_StyleWeight.value=sStyleWeight4;
    else inpFont_StyleWeight.value=""
    
    inpFont_Size.value=oElement.style.fontSize;
    
    inpText_ForegroundColor.style.backgroundColor=oElement.style.color;
    inpText_BackgroundColor.style.backgroundColor=oElement.style.backgroundColor;
    
    if(oElement.style.textDecoration=="")inpText_Decoration[0].checked=true;
    if(oElement.style.textDecoration=="underline")inpText_Decoration[1].checked=true;
    if(oElement.style.textDecoration=="overline")inpText_Decoration[2].checked=true;
    if(oElement.style.textDecoration=="line-through")inpText_Decoration[3].checked=true;
    if(oElement.style.textDecoration=="none")inpText_Decoration[4].checked=true;
    
    if(oElement.style.textTransform=="")inpText_Case[0].checked=true;
    if(oElement.style.textTransform=="capitalize")inpText_Case[1].checked=true;
    if(oElement.style.textTransform=="uppercase")inpText_Case[2].checked=true;
    if(oElement.style.textTransform=="lowercase")inpText_Case[3].checked=true;
    if(oElement.style.textTransform=="none")inpText_Case[4].checked=true;
    
    if(oElement.style.fontVariant=="")inpFont_Variant[0].checked=true;
    if(oElement.style.fontVariant=="small-caps")inpFont_Variant[1].checked=true;
    if(oElement.style.fontVariant=="normal")inpFont_Variant[2].checked=true;
    
    if(oElement.style.verticalAlign=="")
        {
        inpText_VAlign[0].checked=true;
        inpText_VAlign_Relative.value="";
        }
    if(oElement.style.verticalAlign=="super")
        {
        inpText_VAlign[1].checked=true;
        inpText_VAlign_Relative.value="";
        }
    if(oElement.style.verticalAlign=="sub")
        {
        inpText_VAlign[2].checked=true; 
        inpText_VAlign_Relative.value="";
        }           
    if(oElement.style.verticalAlign=="top" ||
        oElement.style.verticalAlign=="middle" ||
        oElement.style.verticalAlign=="bottom" ||
        oElement.style.verticalAlign=="text-top" ||
        oElement.style.verticalAlign=="text-bottom")
        {       
        inpText_VAlign[3].checked=true;
        inpText_VAlign_Relative.value=oElement.style.verticalAlign;
        }
    if(oElement.style.verticalAlign=="baseline")
        {
        inpText_VAlign[4].checked=true;
        inpText_VAlign_Relative.value="";
        }
    
    inpText_LetterSpacing.value=oElement.style.letterSpacing;
    }

function updateFont_Family()
    {
    sVal = ""
    var arrList = obj1.getResultValues()
    for(var i=0;i<arrList.length;i++) sVal += arrList[i] + ", ";
    sVal = sVal.substring(0,sVal.length-2)
    document.getElementById("inpFont_Family").value = sVal
    
    preview()
    }

function preview()
    {
    var divPreview = document.getElementById("divPreview");
    var inpFont_Family = document.getElementById("inpFont_Family");

    //divPreview selalu di-renew (bukan di-update) setiap kali style berubah (shg tdk perlu remove rule).
    divPreview.innerHTML= "<table height=100% width=100%><tr><td valign=middle align=center>____________ <span id=spanPreview></span> ____________</td></tr></table>"

    var spanPreview = document.getElementById("spanPreview");
    if(inpFont_Family.value!="") spanPreview.innerHTML=inpFont_Family.value;
    else spanPreview.innerHTML="Text Preview";
    format(spanPreview);
    }

function getArrStyle()
  {
    var inpFont_Family = document.getElementById("inpFont_Family");
    var inpFont_Size = document.getElementById("inpFont_Size");
    var inpFont_StyleWeight = document.getElementById("inpFont_StyleWeight");
    
    var inpText_Decoration = document.getElementsByName("inpText_Decoration");
    var inpText_Case = document.getElementsByName("inpText_Case");
    var inpFont_Variant = document.getElementsByName("inpFont_Variant");
    var inpText_VAlign = document.getElementsByName("inpText_VAlign");
    
    var inpText_ForegroundColor = document.getElementById("inpText_ForegroundColor");
    var inpText_BackgroundColor = document.getElementById("inpText_BackgroundColor");
    var inpText_LetterSpacing = document.getElementById("inpText_LetterSpacing");
    
    var inpText_VAlign_Relative = document.getElementById("inpText_VAlign_Relative");
    
  var arrStyle=[];

  arrStyle.push(["fontFamily",inpFont_Family.value]);
  arrStyle.push(["fontSize",inpFont_Size.value]);

  if(inpFont_StyleWeight.value==sStyleWeight1)
    {
    arrStyle.push(["fontWeight","normal"]);
    arrStyle.push(["fontStyle","normal"]);
    }
  else if(inpFont_StyleWeight.value==sStyleWeight2)
    {
    arrStyle.push(["fontWeight","normal"]);
    arrStyle.push(["fontStyle","italic"]);
    }
  else if(inpFont_StyleWeight.value==sStyleWeight3)
    {
    arrStyle.push(["fontWeight","bold"]);
    arrStyle.push(["fontStyle","normal"]);
    }
  else if(inpFont_StyleWeight.value==sStyleWeight4)
    {
    arrStyle.push(["fontWeight","bold"]);
    arrStyle.push(["fontStyle","italic"]);
    }
  else
    {
    arrStyle.push(["fontWeight",""]);
    arrStyle.push(["fontStyle",""]);
    }

  if(inpText_Decoration[0].checked) 
    arrStyle.push(["textDecoration",""]);
  if(inpText_Decoration[1].checked) 
    arrStyle.push(["textDecoration","underline"]);
  if(inpText_Decoration[2].checked)
    arrStyle.push(["textDecoration","overline"]);
  if(inpText_Decoration[3].checked)
    arrStyle.push(["textDecoration","line-through"]);
  if(inpText_Decoration[4].checked)
    arrStyle.push(["textDecoration","none"]);
    
  if(inpText_Case[0].checked)
    arrStyle.push(["textTransform",""]);
  if(inpText_Case[1].checked)
    arrStyle.push(["textTransform","capitalize"]);
  if(inpText_Case[2].checked)
    arrStyle.push(["textTransform","uppercase"]);
  if(inpText_Case[3].checked)
    arrStyle.push(["textTransform","lowercase"]);
  if(inpText_Case[4].checked)
    arrStyle.push(["textTransform","none"]);
  
  if(inpFont_Variant[0].checked) 
    arrStyle.push(["fontVariant",""]);
  if(inpFont_Variant[1].checked)
    arrStyle.push(["fontVariant","small-caps"]);
  if(inpFont_Variant[2].checked)
    arrStyle.push(["fontVariant","normal"]);
  
  if(inpText_VAlign[0].checked)
    arrStyle.push(["verticalAlign",""]);
  if(inpText_VAlign[1].checked)
    arrStyle.push(["verticalAlign","super"]);
  if(inpText_VAlign[2].checked)
    arrStyle.push(["verticalAlign","sub"]);
  if(inpText_VAlign[3].checked)
    arrStyle.push(["verticalAlign",inpText_VAlign_Relative.value]); 
  if(inpText_VAlign[4].checked)
    arrStyle.push(["verticalAlign","baseline"]);
  
  arrStyle.push(["color",inpText_ForegroundColor.style.backgroundColor]);
  arrStyle.push(["backgroundColor",inpText_BackgroundColor.style.backgroundColor]);
  
  if(inpText_LetterSpacing.value=="")
    arrStyle.push(["letterSpacing",""]);
  else
    arrStyle.push(["letterSpacing",inpText_LetterSpacing.value+"px"]);
  
  return arrStyle;
  }

function format(s)
    {
    var divPreview = document.getElementById("divPreview");
    var spanPreview = document.getElementById("spanPreview");    
    var inpFont_Family = document.getElementById("inpFont_Family");
    var inpFont_Size = document.getElementById("inpFont_Size");
    var inpFont_StyleWeight = document.getElementById("inpFont_StyleWeight");
    
    var inpText_Decoration = document.getElementsByName("inpText_Decoration");
    var inpText_Case = document.getElementsByName("inpText_Case");
    var inpFont_Variant = document.getElementsByName("inpFont_Variant");
    var inpText_VAlign = document.getElementsByName("inpText_VAlign");
    
    var inpText_ForegroundColor = document.getElementById("inpText_ForegroundColor");
    var inpText_BackgroundColor = document.getElementById("inpText_BackgroundColor");
    var inpText_LetterSpacing = document.getElementById("inpText_LetterSpacing");
    
    var inpText_VAlign_Relative = document.getElementById("inpText_VAlign_Relative");
    
    if(inpFont_Family.value!="")s.style.fontFamily=inpFont_Family.value;
    else
        {//Not Set
        s.style.fontFamily="";  
        s.style.cssText = s.style.cssText.replace("FONT-FAMILY: ; ","");
        s.style.cssText = s.style.cssText.replace("FONT-FAMILY: ","");
        }
    
    if(inpFont_Size.value!="")s.style.fontSize=inpFont_Size.value;
    else
        {//Not Set
        s.style.fontSize="";
        s.style.cssText = s.style.cssText.replace("FONT-SIZE: ; ","");
        s.style.cssText = s.style.cssText.replace("FONT-SIZE: ","");
        }   
    
    if(inpFont_StyleWeight.value=="")
        {//Not Set
        s.style.fontWeight="normal";s.style.fontStyle="normal"
        s.style.cssText = s.style.cssText.replace("FONT-WEIGHT: normal; ","");
        s.style.cssText = s.style.cssText.replace("FONT-WEIGHT: normal","");
        
        s.style.cssText = s.style.cssText.replace("FONT-STYLE: normal; ","");
        s.style.cssText = s.style.cssText.replace("FONT-STYLE: normal","");
        }
    if(inpFont_StyleWeight.value==sStyleWeight1){s.style.fontWeight="normal";s.style.fontStyle="normal"}
    if(inpFont_StyleWeight.value==sStyleWeight2){s.style.fontWeight="normal";s.style.fontStyle="italic"}
    if(inpFont_StyleWeight.value==sStyleWeight3){s.style.fontWeight="bold";s.style.fontStyle="normal"}
    if(inpFont_StyleWeight.value==sStyleWeight4){s.style.fontWeight="bold";s.style.fontStyle="italic";}
    
    if(inpText_Decoration[0].checked) 
        {
        s.style.textDecoration="none";      
        s.style.cssText = s.style.cssText.replace("TEXT-DECORATION: none; ","");
        s.style.cssText = s.style.cssText.replace("TEXT-DECORATION: none","");
        }
    if(inpText_Decoration[1].checked) s.style.textDecoration="underline";
    if(inpText_Decoration[2].checked) s.style.textDecoration="overline";
    if(inpText_Decoration[3].checked) s.style.textDecoration="line-through";
    if(inpText_Decoration[4].checked) s.style.textDecoration="none";
    
    if(inpText_Case[0].checked) s.style.textTransform = "";
    if(inpText_Case[1].checked) s.style.textTransform = "capitalize";
    if(inpText_Case[2].checked) s.style.textTransform = "uppercase";
    if(inpText_Case[3].checked) s.style.textTransform = "lowercase";
    if(inpText_Case[4].checked) s.style.textTransform = "none";
    
    if(inpFont_Variant[0].checked) s.style.fontVariant=""
    if(inpFont_Variant[1].checked) s.style.fontVariant="small-caps";
    if(inpFont_Variant[2].checked) s.style.fontVariant="normal";    
    
    if(inpText_VAlign[0].checked)s.style.verticalAlign = "";
    if(inpText_VAlign[1].checked) s.style.verticalAlign = "super";
    if(inpText_VAlign[2].checked) s.style.verticalAlign = "sub" ;   
    if(inpText_VAlign[3].checked) s.style.verticalAlign = inpText_VAlign_Relative.value;    
    if(inpText_VAlign[4].checked) s.style.verticalAlign = "baseline";   
    
    s.style.color=inpText_ForegroundColor.style.backgroundColor;
    s.style.backgroundColor=inpText_BackgroundColor.style.backgroundColor;

    if(inpText_LetterSpacing.value=="") 
        {
        s.style.letterSpacing=0
        s.style.cssText = s.style.cssText.replace("LETTER-SPACING: 0px; ","");
        s.style.cssText = s.style.cssText.replace("LETTER-SPACING: 0px","");
        }
    else s.style.letterSpacing=inpText_LetterSpacing.value+"px";    
    }
    
function doApply()
    {  
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    var obj=window.opener.oUtil.obj;
    
    window.opener.oUtil.obj.saveForUndo();
    
    if(window.opener.oUtil.activeElement)
        {
        oElement=window.opener.oUtil.activeElement;
        format(oElement);
        }
    else
        {
        oElement=window.opener.getSelectedElement(oSel);
        if (window.opener.isTextSelected(oSel)) 
          {
          if(oSel!="")
            {
            obj.applySpanStyle(getArrStyle());
            }
          else
            {
            if(oElement)
            if(oElement.nodeName!="BODY") format(oElement);
            }
          }
        else
          {
          if(oElement)
          if(oElement.nodeName!="BODY") format(oElement);
          }
        }
       
    window.focus();
    }
</script>
</head>
<body onload="loadTxt();bodyOnLoad()" style="overflow:hidden;">

<table width="100%" height="100%" align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding:5px;height:100%">

    <table width="100%" height="100%">
    <tr>
    <td valign=top style="padding-left:5px;padding-right:5px;">

    <div style="margin-bottom:3px;"><b><span id=txtLang name=txtLang>Font</span> :</b></div>
    <input type=text name=inpFont_Family id=inpFont_Family style="width:100%" onchange="preview()" class="inpTxt"><div style="padding:1px;"></div>
    <div id=divFont_family></div>

    </td>
    <td valign=top style="width:105px">

            <div style="margin-bottom:3px;"><b><span id=txtLang name=txtLang>Style</span> :</b></div>
            <input type=text name=inpFont_StyleWeight id=inpFont_StyleWeight style="width:100%" onchange="preview()" class="inpTxt"><div style="padding:1px;"></div>
            <select size=6 style="width:100%" name="selFont_StyleWeight" onchange="document.getElementById('inpFont_StyleWeight').value=this.value; preview();" class="inpSel">
                <option id="optLang" name="optLang" selected>Regular</option>
                <option id="optLang" name="optLang">Italic</option>
                <option id="optLang" name="optLang">Bold</option>
                <option id="optLang" name="optLang">Bold Italic</option>
            </select>

    </td>
    <td valign=top style="padding-right:5px;width:60px">

            <div style="margin-bottom:3px;"><b><span id=txtLang name=txtLang>Size</span> :</b></div>
            <input type=text name=inpFont_Size id=inpFont_Size style="width:100%" onchange="preview()" class="inpTxt"><div style="padding:1px;"></div>
            <select size=6 style="width:100%" name="selFont_Size" onchange="document.getElementById('inpFont_Size').value=this.value+'pt'; preview();" class="inpSel">
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="22">22</option>
                <option value="24">24</option>
                <option value="26">26</option>
                <option value="28">28</option>
                <option value="36">36</option>
                <option value="48">48</option>
                <option value="72">72</option>
            </select>

    </td>
    </tr>
    <tr>
    <td colspan=3 style="padding-left:5px;padding-right:5px;" valign=top>

            <div style="margin-bottom:5px;margin-top:3px"><b><span id=txtLang name=txtLang>Foreground</span>:</b>
            <span id="inpText_ForegroundColor" style="margin-left:0px;border:gray 1px solid;width:20px;margin-right:0px;;background-color:#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input type=button name=btnPick1 id=btnPick1 value=Pick onclick="oColor1.show(this);event.cancelBubble=true;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
            <script>
            var oColor1 = new ColorPicker("oColor1");
            oColor1.onPickColor = new Function("document.getElementById('inpText_ForegroundColor').style.backgroundColor=oColor1.color;preview()");
            oColor1.onRemoveColor = new Function("document.getElementById('inpText_ForegroundColor').style.backgroundColor='';preview()");
            oColor1.align="left";
            oColor1.txtCustomColors=window.opener.getTxt("Custom Colors");
            oColor1.txtMoreColors=window.opener.getTxt("More Colors...");
            oColor1.RENDER();
            </script>   
            
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><span id=txtLang name=txtLang>Background</span>:</b>
            <span id="inpText_BackgroundColor" style="margin-left:0px;border:gray 1px solid;width:20px;margin-right:0px;background-color:#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input type=button name=btnPick2 id=btnPick2 value=Pick onclick="oColor2.show(this);event.cancelBubble=true;" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
            <script>
            var oColor2 = new ColorPicker("oColor2");
            oColor2.onPickColor = new Function("document.getElementById('inpText_BackgroundColor').style.backgroundColor=oColor2.color;preview()");
            oColor2.onRemoveColor = new Function("document.getElementById('inpText_BackgroundColor').style.backgroundColor='';preview()");
            oColor2.align="left";
            oColor2.onShow = new Function("document.getElementById('inpText_VAlign_Relative').style.visibility='hidden';");
            oColor2.onHide = new Function("document.getElementById('inpText_VAlign_Relative').style.visibility='visible';");
            oColor2.txtCustomColors=window.opener.getTxt("Custom Colors");
            oColor2.txtMoreColors=window.opener.getTxt("More Colors...");
            oColor2.RENDER();
            </script>   
            </div>  
            
            <div style="margin-bottom:5px;margin-top:5px;">
            <table width=100% style="border:white 1px solid;background:#F2F1F8">
            <tr>
            <td><span id=txtLang name=txtLang>Decoration</span>:</td>
            <td><span id=txtLang name=txtLang>Text Case</span>:</td>
            <td><span id=txtLang name=txtLang>Minicaps</span>:</td>
            <td><span id=txtLang name=txtLang>Vertical</span>:</td>
            </tr>
            <tr><td valign=top>
            <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()" checked> <span id=txtLang name=txtLang>Not Set</span><br>
            <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()"> <span id=txtLang name=txtLang>Underline</span><br>
            <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()"> <span id=txtLang name=txtLang>Overline</span><br>
            <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()"> <span id=txtLang name=txtLang>Line-through</span><br>
            <input type=radio class=inpRdo name="inpText_Decoration" onclick="preview()"> <span id=txtLang name=txtLang>None</span>
            </td>
            <td valign=top>
            <input type=radio class=inpRdo name="inpText_Case" onclick="preview()" checked> <span id=txtLang name=txtLang>Not Set</span><br>
            <input type=radio class=inpRdo name="inpText_Case" onclick="preview()"> <span id=txtLang name=txtLang>Capitalize</span><br>
            <input type=radio class=inpRdo name="inpText_Case" onclick="preview()"> <span id=txtLang name=txtLang>Uppercase</span><br>
            <input type=radio class=inpRdo name="inpText_Case" onclick="preview()"> <span id=txtLang name=txtLang>Lowercase</span><br>
            <input type=radio class=inpRdo name="inpText_Case" onclick="preview()"> <span id=txtLang name=txtLang>None</span>
            </td>
            <td valign=top>
            <input type=radio class=inpRdo name="inpFont_Variant" onclick="preview()" checked> <span id=txtLang name=txtLang>Not Set</span><br>
            <input type=radio class=inpRdo name="inpFont_Variant" onclick="preview()"> <span id=txtLang name=txtLang>Small-Caps</span><br>
            <input type=radio class=inpRdo name="inpFont_Variant" onclick="preview()"> <span id=txtLang name=txtLang>Normal</span>
            </td>
            <td valign=top>
            <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()" checked> <span id=txtLang name=txtLang>Not Set</span><br>
            <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()"> <span id=txtLang name=txtLang>Superscript</span><br>
            <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()"> <span id=txtLang name=txtLang>Subscript</span><br>
            
            
            <table cellpadding=0 cellspacing=0><tr><td>
            <input type=radio class=inpRdo name="inpText_VAlign" onclick="preview()">&nbsp;
            </td><td>
            <span id=txtLang name=txtLang>Relative</span> :&nbsp;
            </td><td>
            <select name="inpText_VAlign_Relative" id="inpText_VAlign_Relative" style="vertical:bottom" onchange="preview();document.getElementsByName('inpText_VAlign')[3].checked=true;" class="inpSel">
                <option value="top" id="optLang" name="optLang">Top</option>
                <option value="middle" id="optLang" name="optLang" selected>Middle</option>
                <option value="bottom" id="optLang" name="optLang">Bottom</option>
                <option value="text-top" id="optLang" name="optLang">Text-Top</option>
                <option value="text-bottom" id="optLang" name="optLang">Text-Bottom</option>
            </select>
            </td></tr></table>          

            <input type=radio class=inpRdo name="inpText_VAlign" id="inpText_VAlign" onclick="preview()"> <span id=txtLang name=txtLang>Baseline</span><br>
            </td>
            </tr></table>
            </div>

            <div style="margin-bottom:5px;margin-top:3px;">
            <b><span id=txtLang name=txtLang>Character Spacing</span> : </b><input type=text name=inpText_LetterSpacing id=inpText_LetterSpacing size=3 value="" style="text-align:right" onblur="preview()" class="inpTxt">
            </div>

            <div id="divPreview" style="overflow:auto;border:1px dimgray solid;height:70px;background:#ffffff"></div>
    </td>
    </tr>
    </table>

</td>
</tr>
<tr>
<td class="dialogFooter" style="padding:7px;padding-top:7px;padding-bottom:7px;" align="right">
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    <input type="button" name=btnApply id=btnApply value="apply" onclick="doApply()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    <input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
</tr>
</table>

</body>
</html>