When rendering math containing only letters and other symbols without ascenders (e.g. "x") inside a <td> tag, the text does not align on the baseline (tested with Chrome 56 and Firefox 52 on Windows 1.
Example:
<html>
<head>
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<style>
td {border:1pt solid gray;}
table {border-collapse: collapse;}
</style>
</head>
<body>
<table><tr>
<td>reference</td>
<td>\(x\)</td>
<td>\(x\)x</td>
<td>\(xx\)</td>
<td>\(\cdot\)</td>
<td>\(\cdot t\)</td>
<td>\(=\)</td>
<td>\(=t\)</td>
</tr></table>
</body>
<html>
Is there an easy way to correct this?
You will get better results if you use
td {
border:1pt solid gray;
vertical-align: baseline;
}
since the default vertical alignment for table cells is middle, and the mathematics produced by MathJax have tight bounding boxes, so center vertically based on those heights.
Related
I want to use 2 fonts at the same time for English and Arabic characters. Haven't been able to figure out how to do it :(
These are the fonts I'm trying to use.
Arabic: https://fonts.google.com/specimen/Almarai?query=almarai
English: https://fonts.google.com/specimen/Raleway?query=raleway
On web, it would be as simple as font-family: Raleway, Almarai, sans-serif, Arial;
If anyone knows how to do it, I would really appreciate the help!!
#import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Almarai&family=Raleway&display=swap');
body {
font-family: 'Almarai', sans-serif;
}
h2 {
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World! is in this font style and I am too!</h1>
<br>
<h2>I am styled as RALEWAY</h2>
</body>
</html>
Explanation: Google fonts provide rules to specify in CSS to import it as you do it also specifies how you use the font in this example I've demonstrated how. you use the import("font link here") to import the fonts or you could link them in the head. then you use the font-family: 'font name here' with an element {} to specify that the font is active. Then that element should be in that font.
The cloud looks like it's inside the mountain image's box/outline. I thought the margin should be affected relative to either parent div container or viewport. I am new to CSS and don't understand why this is happening ?
Taken screenshot with pesticide activated for the outlines
body {
background-color: grey;
margin: 0;
text-align: center;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.cloud2 {
position: absolute;
margin-top: 50px;
margin-left: 15px;
}
<body>
<div class="top-container">
<img class="cloud1" src="images/cloud.png" alt="cloud-img">
<h1>Welcome</h1>
<p>This is jungle</p>
<img class="cloud2" src="images/cloud.png" alt="cloud-img">
<img class="mountain" src="images/mountain.png" alt="mountain-img">
</div>
</body>
With position: absolute (and fixed) you always want to provide one or more positioning constraints (i.e. top, left, bottom, right) so that css knows how to position the element relative to the "nearest positioned ancestor".
By positioning an element absolutely, you are telling css that you want to position this element such that it takes up no space on the DOM with regard to the flow layout. Without providing any positioning constraint css only knows the element to which it should position.
You may assume the default is just to place the element in the top left (i.e. top: 0, left: 0) but that's not the case. The absolute element will just be thrown where it would have been positioned as a static element but without taking up any of the block/inline space. So this is why the order of the element relative to its siblings is important when no positioning constraints are used. By the way I have NEVER used this in my career, I've always used positioning constraints to be explicit! See demo below.
So short answer is just use positioning constraints and you're good.
body {
background-color: grey;
margin: 0;
text-align: center;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.cloud2 {
position: absolute;
margin-top: 50px;
margin-left: 15px;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="top-container">
<img src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
<h1>Welcome</h1>
<p>This is jungle</p>
<img class="cloud2" src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
<img class="mountain" src="https://www.pngkey.com/png/full/111-1118124_cartoon-clip-art-transprent-png-free-download-mountain.png" alt="mountain-img" width="80%">
</div>
</body>
</html>
There are many gotchas with position: absolute so be aware.
Aside
CSS takes time to know and understand. There are rules to guide you
but a lot of the learning process is trial and error and on top of that the rules are somewhat different between browsers too. I've found many
solutions to extreme edge cases that I have since forgotten, the trick
is to remember just enough to find the solution again. Over time it
will become second nature. Also using the dev tools elements->styles
panel to quickly experiment can help you find a solution or learn
about all the properties and their values.
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I've been trying hard, but I can't find the reason. Check www.kanionek.pl
How to get rid off the gap between the header and top of the window? There's .site: 15px auto, but even if I reduce it to 0 there's still 21px extra. Hope you can help.
I know I can use negative margin, but I would like to know the reason. Part of header:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'dream' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
Part of template:
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
css fragments:
.site{
max-width: 960px;
margin: 15px auto;
border: 2px solid #808080;
border-radius: 10px;
overflow: hidden;}
Header margin and padding set to 0 do not help.
Body padding and margin are set to 0 and the only trace is that when I change css body section line-height to "0" that gap is gone.
Something is adding a zero width no-break space right after the <body> tag, forcing the following block-display <div> down one line. Probably one of the many scripts. I couldn't tell what, but there you go.
To see it, open the Firefox inspector, right-click on the <body> tag, and click "Edit as HTML". Right after the tag there is (at least in my Firefox) a red dot which is the placeholder for that invisible character. You can copy it and paste it into something that will tell you the codepoint etc.
I solved the problem - maybe it will help someone some day. I could not locate exactly zero-width char, but being almost sure it should be in header.php, I opened it notepad++ and saved using utf-8 without BOM encoding.
I'm loading basic HTML into DOMPDF. In landscape mode, all the pages after the first are overlapping.
Here is my (basic) HTML which renders fine in the browser:
<div id="certificates-layout-1" style="<?php echo $styles['outer-container']; ?>">
<div style="<?php echo $styles['inner-container']; ?>">
<div style="<?php echo $styles['fullname']; ?>">
<?php echo $data['fullname']; ?>
</div>
<div style="<?php echo $styles['fullcouncil']; ?>">
<?php echo $data['fullcouncil']; ?>
</div>
<div style="<?php echo $styles['session_date']; ?>">
<?php echo $data['session_date']; ?>
</div>
</div>
</div>
Here is my DOMPDF render logic:
$filename = (isset($params['filename'])) ? $params['filename'] : 'ubcdet_report_' . date('YmdHis') . '.pdf';
$lib = $_SERVER['DOCUMENT_ROOT'] . '/sites/all/libraries/vendor/';
require_once($lib . "dompdf/dompdf/dompdf_config.inc.php");
$dompdf = new DOMPDF();
$dompdf->load_html($report);
$dompdf->set_paper('letter', 'landscape');
$dompdf->render();
$dompdf->stream($filename, array("Attachment" => false));
exit(0);
I tried with A4 paper as well, same result.
I also tried moving the render() BEFORE set-paper and the overlapping issue goes away, but it will ONLY render as portrait (tried A4 here as well).
I have not tried outputing as actual file before rendering in browser for download, but I will.
This is what the result looks like...
Any suggestions appreciated. Thanks.
====================================
UPDATE Per Request from BrianS
Thanks for your attention. Here is a dump of the rendered HTML:
<html>
<head></head>
<body>
<div id="certificates-layout-1" style="font-family: Times New Roman; font-size:33px; text-align:center; page-break-after:auto;">
<div style="height:672px; width: 906px; border: thin solid #666666;">
<div style="font-size:45px; font-weight:bold; margin-top:96px; margin-bottom:10px;">John Smith</div>
<div style="margin-bottom:125px;">Council of Councils</div>
<div style="font-weight:bold;">April 16 - 19, 2015</div>
</div>
</div>
<style>
#font-face {
font-family: TimesBold;
src: url('/sites/all/modules/ubcdet/ubcdet_report/fonts/timesbd.ttf');
}
</style>
<style>
}
#page {
margin: 0;
}
html {
margin: 72px 76px;
}
body {
width: 1056px;
margin:0;
}
.hint {
background: none repeat scroll 0 0 #6AEA91;
font-size: 13px;
padding: 50px 10px;
text-align: center;
width: 250px;
position: absolute;
}
#media print {
.hint {
display:none;
}
}
</style>
</body>
</html>
I don't think there's anything too unusual in there, but maybe I'm wrong. Let me know if you need additional information. Thanks.
Heights are a tricky thing in dompdf when you're pushing against the page boundaries. For full-page blocks I recommend using positioned content. If this isn't possible I'd set DOMPDF_DPI to 72 (the fixed "pixel" depth of a PDF) so that you get a one-to-one translation from HTML to PDF.
In general I suggest using percents to better place an element within the page boundaries, except that dompdf is a bit more fuzzy around the page margins so you have to give a few extra pixels there if you need to fit content to a page (this is why I usually go for positioned content for full-page elements).
In your case let's work with a paper size of A4 in landscape (since you mentioned it). That paper size/layout gives you a height of roughly 595 pixels. Adding up all the heights your document totally blows past that (>1100 in a rough estimate) which means paging will occur. dompdf is dragging the last line of the container to the next page. So this explains the text layout for the initial block.
As for why the layout breaks so horribly after that ... I have no idea. Usually a layout break is due to poorly-formed HTML, but yours is just fine. Were I to guess I'd say a parent element is lost on page break resulting in null positioning information. This is something we'll have to look at.
Before I continue some notes:
You only need to set margins on the page level. If I recall correctly that defines the margin for the HTML element. The body margin is not defined and so default to 0px.
body height and width is always the height/width of the page content area; no need to set that unless you really want the body to not fill the page.
dompdf does not yet support box-sizing (otherwise this would all be much simpler). height and width are defined by the content box and extra margin/padding is added to the content box to get the full box size (plus keep in mind the mysterious extra padding required around the page margins).
I changed up your HTML/CSS a bit to make it do what you want. Simpler is better, especially for dompdf.
<html>
<head>
<style>
#page {
size: a4 landscape;
margin: 72px 76px;
}
body {
font-family: Times New Roman;
font-size: 33px;
text-align: center;
border: thin solid #666666;
}
.certificate-name {
font-size: 45px;
font-weight: bold;
margin-top: 96px;
margin-bottom:10px;
}
.certificate-title {
margin-bottom: 125px;
}
.certificate-date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="certificates-layout-1">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
<div id="certificates-layout-2">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
</body>
</html>
When working with any tools you should always keep in mind it's strength and weaknesses ... and dompdf has its fair share of weaknesses.