I have multiple forms with tinyMCE textareas that saves content to the database in order to generate a PDF with the content from the database. The user can input text or images to the textarea.
Whenever the user center-align the image with TinyMCE, it doesn't show in the PDF. It doesn't give me any errors, it simply doesn't show. If I go back to the form and right-align the image, it shows again, but the users of the system required full control of the interface.
does anyone knows what could be causing this?
Notes:
I'm aware of this bug however none of the suggestions I found there fixes my issue.
I'm using Laravel-dompdf
This is a sample of the view that is being used by DOMPDF, the image is contained within product description.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{Lang::choice('page_elements/general.proposal', 2)}}</title>
<style type="text/css">
</style>
</head>
<body>
<div class="product_section">
<div class="text-block">{{($proposalProduct->description)}}</div>
</div>
</body>
</html>
This is a sample of what the product description (formatted by TinyMCE) is returning.
<p>This is a sample product, using images and tinyMCE.</p>
<p><img style="-webkit-user-select: none; margin-left: auto; margin-right: auto;" src="http://mywebsite.com/products/images/product1.png" alt="" /></p>
Thanks for the help.
Related
In a presentation, I would like to create a Twitter Timeline with a few selected tweets. In the best case it should look as natural as if someone went to Twitter on his own computer or saw it on his smartphone.
I am using LateX Beamer for the rest of the slides, but I am flexible if it is another software that allows to export a PDF/Image that I could include in LateX.
(There are a lot of tools on how to integrate live Tweets in PowerPoint / Keynote , but I want to do it for historical tweets and will be offline during the presentation.)
I was trying the following:
- Simply take screenshots of the tweet and arrange them within LateX or PowerPoint. Looks ok but not super nice, and quite cumbersome to do.
Since it is possible to extract an html of a tweet to embed on a homepage, I thought of doing this for the presentation. Unfortunately, I don't know much of html / reveal.js presentations.
Has anybody found a good solution for a similar problem?
EDIT:
I started reveal.js and found the following plugin: https://github.com/rajgoel/reveal.js-plugins/tree/master/embed-tweet
I was then trying to apply it and followed the intros to reveal.js and also saved the source code of the plugin into my plugin folder for reveal.js. However, it does not work (=Returning a blank page in the html). Can anybody point me to my error? (I am completely new to reveal.js / html so sorry if it is basic?)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js 3 Slide Demo</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!--Add support for earlier versions of Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
<!-- Wrap all slides in a single "slides" class -->
<div class="slides">
<!-- ALL SLIDES GO HERE -->
<!-- Each section element contains an individual slide -->
<section>
<div class="tweet" data-src="https://twitter.com/marcfbellemare/status/972558957645631488"></div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Required, even if empty.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/embed-tweet/embed-tweet.js' },
// ...
]
});
</script>
</body>
</html>
i have a pdf form that i need to be able to import as a background then use Dompdf to overlay html/text.
can this be done?
thanks
Dompdf is a library for converting HTML -> PDF. I'm no expert on that particular library but as far as I can tell it doesn't do things like overlaying html/text.
PDF cannot be imported into HTML because it isn't an HTML format and it isn't an image. There might be a parser library somewhere (e.g. http://www.pdfonline.com/easyconverter/sdk/pdf-to-html/), but without your own fairly extensive work you wont get that PDF document to be displayed in HTML.
HOWEVER, you CAN use something like this, it'll show your PDF document as the background, create a div that covers the screen just above the PDF document to make it non-interactive, then you can put all your contents above that. Note that there will be controls showing on the sides which as far as I know can't be prevented since they're provided by the browser when displaying a PDF file (you could use some fancy JS/CSS to prevent it I'm guessing but I don't know exactly how off the top of my head).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF as background</title>
</head>
<body>
<iframe src="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" style="width: 100vw; height: 100vh;position:absolute;top:0;z-index:0;"></iframe>
<div style="position:fixed;width:100%;height:100%;z-index:1"></div>
<div id="content" style="position: absolute;top:50%;left: calc(50% - 4cm);z-index:2">
<h1 style="font-size:20px;background:#00ff00;">I am on top of the PDF document!</h1>
</div>
</body>
</html>
I want the hyperlink to apply to the image only but do not know how to end the linking.
It continues to link the header and other text blocks below my hyperlink line. I'm not sure what I'm doing wrong. How do I isolate the hyper link to just the image? I am using google chrome as my browser
Here is my code:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"
<title>Example Document</title>
</head>
<body>
<h1>This is Craig's Favorite Dog.</h1>
<p>Click on image for more information.
<article>
<dd><a href="https://en.wikipedia.org/wiki/Newfoundland_(dog)">
<img src="https://media.mnn.com/assets/images/2016/04/newfoundland- dog.jpg" height="240" width="360"
</a></dd>
</article>
</p>
</body>
<br>
<br>
<h2>This is the fart of the dog<h2>
<audio controls>
<source src="fart.mp3" type="audio/mpeg">
<source src="fart.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</html>`
The image tag is not terminated - finish it with a greater than character (i.e. >).
<img src="https://media.mnn.com/assets/images/2016/04/newfoundland-dog.jpg" height="240" width="360" />
Also note that I added a slash (/) before the end of the tag. That is because image tags have no permitted Content - from MDN:
Permitted content None, it is an empty element.
Other suggestions:
Don't add the closing body tag (</body>) before the rest of the contents are added (e.g. the h2 tag, the audio tag, etc).
Permitted content for the paragraph tag (<p>) is Phrasing content but the article tag is flow content so just move the article tag after the paragraph tag.
The closing tag for the heading 2 towards the end is missing the closing character: </h2>
See this plunker example with the updates applied
I've been making websites for a few years now, but only recently have I started using the html5 doctype and today I discovered the behaviour where a padding-bottom of 4px is added to images.
The padding disappears if you change the doctype to xhtml1.0
here is the simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technic-Al</title>
<style>
html, body {
margin:0;
padding:0;
}
#contain {
width: 900px;
background-color:#6C0;
}
</style>
</head>
<body>
<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">
</div>
</body>
</html>
changeing the doctype to any of the others removes the bottom-padding (green from the background)
Quite a few people have come on here to suggest the fix
line-height=0
I believe there is another fix that works as well.
Or should I say "work-around"
but surely this is a bug with the html5 doctype?
who do we speak to about it?
who deals with a bug like this?
how do we get it fixed?
Does anybody here know how to get this fixed?
It's not a bug, it's what the CSS spec says should happen. It's not HTML5 specific, the HTML 4.01 strict and XHTML 1.0 strict doctypes will do the same thing.
It's not padding - it's the consequence of the computed height of the line box.
There's no hope of getting it changed, Too many web pages depend on the existing behaviour.
The appropriate authority for this is the W3C CSS working group.
I had an issue where page was showing padding in bottom of page
img { display:block ; }
writing above in css file solved my problem. Hope this help
Use the vertical-align property in your css :
img{
vertical-align:top;
}
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options