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

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

------------ 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.)

Thanks for your help.

Dennis

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", 
  "file":"4e5c90d35fd5adf0fa848bd31eb534ad8_110_2_11.gif",   
  "url":"http://www.codecogs.com/sites/unknown/4e5c90d35fd5adf0fa848bd31eb534ad8_110_2_11.gif", 
  "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('+','&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

Cool! That is exactly what I was looking for.

Thanks for your help.

Dennis

I just want to add how I finally implemented your code.

If I have specific parts on my page, where I use latex equations I call a php function, which checks whether the images for these equations have already been cached.

If they have been cached, I replace the equation with a link to the local image.

If they haven't been cached, I surround the equation with a code tag (e.g. '<code class="latex_formula">6 = 2 \cdot 3</code>'). Then when the page is loaded, a javascript function iterates through all these tags and calls a php function via ajax, which pulls the image for the equation from codecogs servers (like your one above).

Thus I have a fast page loading time, because the images for the equations can be loaded after the main part of the page has been loaded.

Dennis