I was wondering, in the following example why the stretchy attribute of mo tag is giving similar display. I thought the second MathML below (with <mo stretchy="false">∑</mo> would display the upper and lower limits on top and bottom of the summation symbol (as shown in figure 2 below). But both the examples (with <mo stretchy="true">∑</mo> and <mo stretchy="false">∑</mo> respectively) are displaying the limits on sides of summation symbol instead:
Remark: I'm using MathJax
HTML with MathML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>MathJax TeX to MathML Page</title>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
<p>With stretchy="true"</p>
<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msubsup><mo stretchy="true">∑</mo><mrow><mi>k</mi><mo>=</mo><mn>0</mn></mrow><mrow><mi>n</mi></mrow></msubsup><mrow><mfenced separators="|"><mrow><mfrac linethickness="0pt"><mrow><mi>n</mi></mrow><mrow><mi>k</mi></mrow></mfrac></mrow></mfenced><msup><mrow><mi>x</mi></mrow><mrow><mi>k</mi></mrow></msup><msup><mrow><mi>a</mi></mrow><mrow><mi>n</mi><mo>-</mo><mi>k</mi></mrow></msup></mrow></mrow></math>
<p>With stretchy="false"</p>
<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><munderover><mo stretchy="false">∑</mo><mrow><mi>k</mi><mo>=</mo><mn>0</mn></mrow><mrow><mi>n</mi></mrow></munderover><mrow><msup><mrow><mi>r</mi></mrow><mrow><mi>k</mi></mrow></msup></mrow></mrow></math>
</body>
</html>
Display of the above HTML [using MathJax]:
Desired display of second MathML (with <mo stretchy="false">∑</mo>):
You have used the wrong attribute. It is not strethy="false" that you want, but movablelimits="false" (or use <math display="block"> or <mstyle displaystyle="true"> around the expression).
For example:
<script src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-chtml.js"></script>
<p>
<b>movablelimits="false"</b>
<br>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<munderover>
<mo movablelimits="false">∑</mo>
<mrow>
<mi>k</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mi>n</mi>
</munderover>
<msup>
<mi>r</mi>
<mi>k</mi>
</msup>
</math>
</p><p>
<b>display="block"</b>
<br>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<munderover>
<mo>∑</mo>
<mrow>
<mi>k</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mi>n</mi>
</munderover>
<msup>
<mi>r</mi>
<mi>k</mi>
</msup>
</math>
</p><p>
<b>mstyle displaystyle="true"</b>
<br>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle displaystyle="true">
<munderover>
<mo>∑</mo>
<mrow>
<mi>k</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mi>n</mi>
</munderover>
<msup>
<mi>r</mi>
<mi>k</mi>
</msup>
</mstyle>
</math>
</p>
Note, however, that these generate different output. The first uses a smaller summation sign (since it is in-line math style), the second uses a separate line with the math centered on it, and the third is in-line, but uses the display-mode layout rules.
Related
I'm using XSL-FO with Antennahouse FO formatter.
How do I make the fo:caption in a fo:table-and-caption element run only as wide as the fo:table does?
Essentially, I am looking for the FO equivalent of this HTML:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image with Caption – CENTERED</title>
</head>
<body>
<div style="border:2px solid blue;">
<table style="border:1px solid green; margin-left:auto; margin-right:auto;">
<caption style="caption-side:bottom; text-align:left; border:1px solid red;"><p style="font-size:9pt;">Sourceline (left edge should match up with table's left edge, and line breaking should occur at right edge of table)</p></caption>
<tr>
<td><p><- The table runs only this wide. -></p></td>
</tr>
</table>
</div>
<p>BLUE = wrapper-DIV</p>
<p>GREEN = table</p>
<p>RED = caption</p>
</body>
</html>
which looks like this:
The XSL-FO code I have is this:
<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master margin-bottom="58px" margin-left="120px" margin-right="120px" margin-top="50px" master-name="content-page" page-height="11in" page-width="8.5in">
<fo:region-body margin-bottom="44px" margin-top="50px" region-name="xsl-region-body" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="content-page">
<fo:flow flow-name="xsl-region-body">
<fo:block>
<fo:table-and-caption border="2px solid blue" text-align="center">
<fo:table-caption border="1px solid red" caption-side="bottom">
<fo:block font-size="8pt" text-align="left">Sourceline (left edge should match up with table's left edge, and line breaking should occur at right edge of table)</fo:block>
</fo:table-caption>
<fo:table border="1px solid green">
<fo:table-column/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block><- The table runs only this wide. -></fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:table-and-caption>
</fo:block>
<fo:block>BLUE = fo:table-and-caption</fo:block>
<fo:block>GREEN = fo:table</fo:block>
<fo:block>RED = fo:caption</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
which renders like this:
How do I force (in XSL-FO) the table caption to only run as wide as the table (which might be arbitrarily complex, including e.g. fo:table-footer and table borders on table or cells), and start at the left edge of its associated table (like in the HTML rendering)?
I have a small DropDownList with 3 options .
Problem is when I select , let's say , 2nd option .
No probs , a new page is opened .
If I click on option 1 or 3 , no probs .
However , if I click on 2nd option again , instead of clicking on 1 or 2 , no new page is opened .
Is there a way to correct this , so that clicking on whatever always opens a new window .
Thanks...Vern
SORRY I COULDN'T GET THE "CODE" OR "HTML" TO WORK .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>myFavs-HtmlProbs.html</title>
<meta name="Generator" content="PureBasic">
<meta name="Description" content="Your description here...">
<meta name="Description" content="...Created by myFavs % PureBasic...">
<style type="text/css">
</style>
</head>
<body text="#000000" style="background-color:#A69E80; text-align:center;">
<br> <br> <br>
<!--dd <div style=-->
<table width="100%" border="0" style="text-align:center" cellspacing="0" cellpadding="0">
<tr style="text-align:center">
<!-- EXAMPLE: <MenuName="aaMost-Used"> --> <!-- rgb(250,240,255) -->
<select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(231,169,126);" name="menu" onchange="window.open(this.value)">
<option selected="0" value="">aaMost-Used</option>
<option value="http://alternativeto.net/">AlternativeToSoftwares</option>
<option value="https://www.biblegateway.com/reading-plans/chronological/today?version=NLT">One Year Chronological Bible NLT</option>
<option value="http://www.portablefreeware.com/">portablefreeware.com/</option>
</select></td></tr></table><br></body></html>
Just add this attribute to your select tag
onfocus="this.selectedIndex=0;"
It will change the option to the default option each time after you select one, in your case
aaMost-Used and hence you can then select your required next option again.
When you click on an option more than once, it does not open the page because the option is already selected, and no change occurs. Therefore, onchange isn't fired.
You can actually open a link twice by opening that link, opening another (deselects first) and then clicking on the first link again.
But here's the fix.
Change onchange="window.open(this.value)" to onclick="window.open(this.value)" (onchange to onclick).
That way, the link will be opened whenever an option is clicked, rather than when it changes.
JSFiddle: https://jsfiddle.net/SanPilot/mqqh5u73/1/
I haven't used DW for a while, excuse my beginners question.
I have created a table with 2 rows & 1 column within HTML. I have inserted an image in to the top row and one image in to the bottom row.
With border, cell padding and cell spacing set to 0, I cannot figure out why I see pixel padding/spacing at the bottom of each cell. I have changed the background colour of the cells in the table to red so that its easy to show the padding.
Changing the vertical alignment for the cells does not change the issue.
I haven't created CSS page for this.
From what I recall in my previous experience with DW padding and spacing was quite simple when creating a basic table in HTML, so not sure where I am going wrong.
Any help would be much appreciated on where I am going wrong here.
Link to the resulting output when i preview the code in safari and/or chrome
https://dl.dropboxusercontent.com/u/13258883/DW.png
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<table width="512" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td colspan="2" bgcolor="#F50408"><img src="images/Untitled-10_01.gif" width="512" height="107" alt=""/></td>
</tr>
<tr>
<td colspan="2" bgcolor="#F50408"><img src="images/Untitled-10_02.gif" width="512" height="93" alt=""/></td>
</tr>
</tbody>
</table>
</body>
</html>
found the answer i add the following code in to the head
<style>
img {
display:block;
}
</style>
In addition to the strange disappearing markup issue as noted in another StackOverflow question, I'm also noticing weird encoding problems where some characters are replaced with random letters. This seem to happen when there are very long lines in the markup. Here are examples:
Normal behavior
Before processing of Gmail API
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Email Title</title>
</head>
<body>
<p style="font-size: 16px; line-height: 24px; margin-top: 0; margin-bottom: 0; font-family: 'ff-tisa-web-pro, Georgia, serif;">Pinterest mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pinterest four loko lofi forage gentrify cray.</p>
</body>
</html>
After processing of Gmail API (via opening message in Gmail, and selecting Show original).
--001a1133f016eff52804ff2a2885
Content-Type: text/html; charset=ISO-8859-1
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Title</title>
</head>
<body>
<p style>Pinterest mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pinterest four loko lofi forage gentrify cray.</p>
</body>
</html>
--001a1133f016eff52804ff2a2885--
In the above example, what happens is what we expected. Once the line-length of the p element is longer however, we get unusual behavior.
Weird behavior
Before processing of Gmail API
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Email Title</title>
</head>
<body>
<p style="font-size: 16px; line-height: 24px; margin-top: 0; margin-bottom: 0; font-family: 'ff-tisa-web-pro, Georgia, serif;">Pinterest mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pinterest four loko lofi forage gentrify cray. Pinterest mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pinterest four loko lofi forage gentrify cray.</p>
</body>
</html>
After processing of Gmail API (via opening message in Gmail, and selecting Show original).
--001a1133547278e12e04ff2a28d8
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable
<html>
<head>
<meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1.0">
<title>Email Title</title>
</head>
<body>
<p style>Pinterest mumblecore authentic stumptown, deep v slowcarb skat=
eboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bir=
d on it Echo Park. Pinterest four loko lofi forage gentrify cray. Pinterest=
mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia =
food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pin=
terest four loko lofi forage gentrify cray.</p>
</body>
</html>
--001a1133547278e12e04ff2a28d8--
In the above example, the number of characters inside the p element has doubled. Somehow this triggers all sorts of weird encoding issues. Notice that Content-Transfer-Encoding: quoted-printable is added about the markup. Also notice that 3D appears after every =. Also, hard line breaks have been added to the p element. At the end of each line there is an = sign.
How do I prevent this from happening?
Google storage the email using the standard RFC822, and in this specific case as you can see on the headers beside the Content-Type text/html you can find the header Content-Transfer-Encoding: quoted-printable, (https://en.wikipedia.org/wiki/Quoted-printable).
So you need to parse the RFC822 message to get the actual html.
Find the correct chunk (the format of the message is like a multipart using the boundary that you will find in the first headers
Parse the headers of the Chunk and to get the encode-type (not always its a quote-printable so be careful)
Using the encode of the previous step decode the body of the chunk
I hope this answer you question
<div class="vcard" itemscope itemtype="http://schema.org/LocalBusiness">
<strong class="fn org" itemprop="name">Commercial Office Bangalore</strong><br/>
<span class="adr" itemprop="address" itemscope itemtype="httep:schema.org/PostalAddress">
<span class="street-address"itemprop="streetAddress">330, Raheja Arcade, 1/1 Koramangala Industrial Layout</span><br/>
<span class="locality"itemprop="addressLocality">Bangalore</span>
<span itemprop="postalCode"class="postal-code">560095</span><br/>
<span class="region"itemprop="addressRegion">Karnataka</span><br/>
<span class="country-name">India</span><br/>
<span class="tel id"="phone"itemprop="telephone">+91-80-41101360</span><br/>
<span class="geo"itemprop="geo"itemscope itemtype="http://schema.org/GeoCordinates">
<abbr class="latitude" property="latitude">12.936504</abbr>
<abbr class="longitude" property="longitude">77.6321344</abbr>
<meta itemprop="latitude" content="12.936504" />
<meta itemprop="longitude" content="77.6321344" />
</span>
</span>
I want to make lat and logitude invisible for user and visible for Google bot. What shall I do?
If you mean the Microdata (using Schema.org):
Just remove the abbr elements. You are already giving this data in meta elements (which can be used in the body), which is the correct way to provide data that should/can not be visible on the page:
<meta itemprop="latitude" content="12.936504" />
<meta itemprop="longitude" content="77.6321344" />
(Note that you were using property attributes, but they are not allowed in Microdata, only in RDFa.)
(Also note that you use http://schema.org/GeoCordinates but it should be http://schema.org/GeoCoordinates. And httep:schema.org/PostalAddress is also wrong.)
If you mean the Microformat (using hCard):
You could reuse the meta elements used with Microdata:
<meta class="latitude" itemprop="latitude" content="12.936504" />
<meta class="longitude" itemprop="longitude" content="77.6321344" />
But I’m not sure if all Microformat parsers support this.
The abbr elements with lat and lon can be set to display:none, which does exactly what you are asking for, hiding the content from humans, while still serving it up to bots:
abbr{display:none}
/** or **/
.latitude,
.longitude{display:none}
Although I can't honestly see what's wrapping them in your example. Ff the span with class .geo is the parent element, you could make that display:none instead.