0

I want to create a page to test and display my web fonts in a browser to compare different sizes of the same user-input text. Later perhaps to compare different font styles with drop down buttons etc. my question for the moment is how to have new text input in a browser field appear instantly at different sizes in other fields on the same page. Many thanks. Here is the page that works fine to display the fonts but the text has to be input manually in each field. Thanks for your help.

<html>
  <head>
    <link rel="stylesheet" type="text/css" media="screen" href="AlQuds.css" />
    <style type="text/css" media="screen">
      body { font-family: "AlQuds", Georgia; font-size: 40px ; }
      #big { font-size: 100px; background-color:#ede7ab;}
      #medium { font-size: 40px; background-color: #eab645}
      #small { font-size: 20px;  background-color:#d3ffcf}
    </style>
  </head>
  <body>
    <table style="width: 100%;" border="1">
      <col /> <col />
      <tbody>
        <tr>
        </tr>
        <tr>
          <td><img alt="alquds-regular-bold" src="alquds-regular-bold-sampler.jpg" style="display: block; text-align: center; margin-left: auto; margin-right: auto; width: 653px; height: 739px;" /></td>
          <td style="">
            <hr>
            <p >Input text below AlQuds Regular font in Arabic, Farsi or in a West European language such as Swedish.</p>
            <hr>
            <div id="big"  contenteditable="true" border="3"> إطبع هنا - type here.</div>
            <hr>
            <div id="medium"  contenteditable="true"  border="3"> إطبع هنا- type here.</div>
            <hr>
            <div id="small"  contenteditable="true" border="3">إطبع هنا - type here.</div>
            <hr>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Valavel
  • 3
  • 4

1 Answers1

1

If you can use jQuery, you can do something like this:

$(document).ready(function(){
    $("a").click(function(){
        $("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>');
        return false;
    });
});
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {font-family: 'Raleway';}
div {margin: 15px 0 0; border: 1px solid #ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Size: <input type="text" id="size" />
<a href="#">Add New Size</a>

Full HTML Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
      @import url(http://fonts.googleapis.com/css?family=Raleway);
      body {font-family: 'Raleway';}
      div {margin: 15px 0 0; border: 1px solid #ccc;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("a").click(function(){
          $("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>');
          return false;
        });
      });
    </script>
  </head>
  <body>
    Size: <input type="text" id="size" />
    <a href="#">Add New Size</a>
  </body>
</html>
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • Thank you Praveen - I will study and try try to implement your suggestion. – Valavel Nov 16 '14 at 02:30
  • I stuck your codes in the head section and Aptana gave an error message "div attribute "contenteditable" has invalid value. Obviously I am not doing something right!! – Valavel Nov 16 '14 at 03:01
  • @Valavel You can safely ignore those messages. – Praveen Kumar Purushothaman Nov 16 '14 at 09:00
  • Namaste. I am still at a loss 1- how to place the three snippets you provided on a page - all in the head section? That did not work as the code itself appeared in the browser. Do I need to add – Valavel Nov 16 '14 at 14:02
  • Namaste. Sorry for the repeat post. I am still at a loss A- how to place the three snippets you provided on an html page - all in the head section? That did not work as the code itself appeared in the browser and the jquery action did not work.. Do I need to add – Valavel Nov 16 '14 at 14:13
  • The Script section should be added to the head part. – Praveen Kumar Purushothaman Nov 16 '14 at 15:17
  • @Valavel I have added full HTML Code. Please take it. – Praveen Kumar Purushothaman Nov 16 '14 at 15:20
  • Thanks Praveen I certainly learned from your answer what is involved. I needed something a bit different - how to 'fill' three or more divs with the same input text in real time but at different sizes. Best wishes. – Valavel Nov 18 '14 at 11:55
  • @Valavel When you enter a size and click on the link, it gives you different sizes of `contentEditable` DIVs... – Praveen Kumar Purushothaman Nov 18 '14 at 11:56
  • two problems with that A) I want to input Arabic text, but to put the size one has to have English so keyboard language has to be switched back. B) If user puts in too much text and inputs large size - display goes beyond the screen. I wanted to pre-set the sizes, and when the user inputs text in one div the same text appears *simultaneously* in the other divs at different pre-set sizes. Thanks I know its not too easy. – Valavel Nov 19 '14 at 09:03