I have forgotten

• https://me.yahoo.com

# Center equation vertically at "="

5 Feb 10, 11:58AM
(5 replies)
Center equation vertically at "="
Hi,

i want to add some equations on my website. The problem ist that I want to add them in html text. For example:

This ist html text.

_ _

I want the "=" sign to be on the same "height" as the text like it is in the following example:

This ist html text.

Is there a way to do this?

Dennis

6 Feb 10, 3:42AM
The way we do this on CodeCogs is by making an adjustment to the vertical alignment of the image relative to the text line.

You can achieve this by adding a margin-bottom attribute to an image:
<img src="http://latex.codecogs.com/gif.latex?\frac{1}{2}" style="margin-bottom:-10px" />
naturally the size of offset will vary according to the equation.

We will be introducing this offset onto the Equation Editor shortly - our month of testing is nearly complete.

If you're using a javascript method that translate LaTeX within a page into images, then you may have to wait longer. We're struggling to find an eliquent method of retrieving the image offset from CodeCogs servers. Despite having embedded this imformation into gif images you download from CodeCogs, we have no way to extract arbitrary imformation from an image header using JavaScript - which was the original plan. If anyone has ideas on how to this, then we'd greatly appreciate the input.

We'll
7 Feb 10, 8:45AM
------------ naturally the size of offset will vary according to the equation ------------

Yep...that was also my problem.

------------ We will be introducing this offset onto the Equation Editor shortly - out month of testing is nearly complete. ------------

I am currently inserting an image tag into the document with php. Do you mean that I can access the offset via php then?

------------ If anyone has ideas on how to this, then we'd greatly appreciate the input. ------------

If the only problem ist that you can't do cross-domain calls with javascript, you could try this approach: http://www.ajax-cross-domain.com/ (Only an idea. I did not test this.)

Dennis

7 Feb 10, 11:46AM
The key to your problem is a yet unpublished option, namely gif.json, i.e.
http://codecogs.izyba.com/gif.json?\inline%20x=\frac{12}{y^2}
will give you
ParseEqn({ "latex": {
"type":"gif",
"equation":"x=\\frac{12}{y^2}",
"site":"unknown",
"width":"50",
"height":"25",
"baseline":"8" } });
Notice the last parameter 'baseline' that tells you the offset you need to get the image in the right place. Please remember you only get this parameter if you use '\inline' at the start of the equation. We don't work this out for images that will be placed on their own in the middle of the page.

To save you recoding the PHP, this is roughly what we use
// $local - is the directory in which to place the equation locally. function latexEqn_json($latex_formula, $font_size='normal',$dpi=110, $local=NULL) { // don't waste CodeCogs time if you've nothing to request.$latex_formula=trim(str_replace("\n",' ',$latex_formula)); if(empty($latex_formula)) return;

$url=''; if($font_size!='normal') $url.='\\'.$this->font_size.' ';
if($dpi!=110)$url.='\\'.$dpi.'dpi ';$url.=$latex_formula; // encode the url so its safe for transmittion to codecogs$url='http://latex.codecogs.com/gif.json?'.(str_replace(array('+',' '),array('&plus;','&space;'), $url)); // tell CodeCogs who you are - you must keep this line in ini_set('user_agent', "PHP\r\nReferer: http://".$_SERVER['SERVER_NAME']); $json=file_get_contents($url); // the return will be in the form: ParseEqn({ ... }); So need to trim this down.

$object=json_decode(substr($json,9,strlen($json)-11)); if($local!==NULL) { if(!isset($object->latex->error)) { copy($object->latex->url, $_SERVER['DOCUMENT_ROOT'].$local.$object->latex->file);$object->latex->local=$local.$object->latex->file; } else error_log($object->latex->error); } return$object; }

This PHP script will also copy the image to any local path you specify so the final HTML page can pull the images from your servers rather than ours.

Other points:
• Use print_r(object) to see what is returned
• You can easily extend the function to include other options our service supports, like background colour, font colour
8 Feb 10, 6:18AM
Cool! That is exactly what I was looking for.

Dennis
12 Feb 10, 5:54AM