I am having trouble using a script I found at http://www.marcofolio.net/webdesign/use_a_custom_font_on_your_website.html
The problem is, when I load a page, the text shows up then each word is replaced by a generated image of it using the PHP GD lib.
It creates a flicker effect that I can't seem to get rid of. There are options is the js file:
var hideFlicker = true;
var hideFlickerCSS = "replacement-screen.css";
var hideFlickerTimeout = 0;
But when I change any of those settings, nothing happens.
Please help!
Thank you.
For what you seem to be trying to do, image replacement is an extremely outdated method. All the ninja-devs are using technology called #font-face for their fonts and font replacements.
It's simpler, doesn't require anything to happen on the server and text on the page can be modified dynamically.
You can use services like http://www.fontsquirrel.com/ or http://code.google.com/webfonts for ready made font packages.
If you have a custom font (that you have a license for) you can create an #font-face package for it, using fontsquirrel's #font-face generator: http://www.fontsquirrel.com/fontface/generator
And then you just define your fonts in the CSS. Simple, elegant and works in 99% of browsers (yes, even IE6)
Cheers!
Related
When using PHP 8.1 and mpdf 8.1.2, when generating a PDF, the body of the resulting pdf is empty. While when I just output the HTML used in writehtml, I do get the full content including the css interpreted correctly.
However, when I comment out the <style>{% include '#App/inlineStyles/pdf.css' %}</style> part, it does render the PDF correctly, however (obviously) without the required styling.
I also tried seperately including both using 2 different writeHTML calls (with different modes for css). This resulted in the css not being applied (but the content being written).
The pdf.css file doesn't contain anything weird/invalid. It's partially based on tailwind and generated from .scss files.
I tried new Mpdf(['debug'=>true]) and also tried to catch any mpdfexceptions, but there were none.
Can somebody help me out?
EDIT:
The reason for this happening is within CssManager.php that the entire css gets removed:
// Remove CSS (tags and content), if any
$regexp = '/<style.*?>(.*?)<\/style>/si'; // it can be <style> or <style type="txt/css">
$html = preg_replace($regexp, '', $html);
EDIT2:
How am I supposed to include a file? I think I know the problem; I require the tailwind css component in my .css file which I'm including. The length of my .css file is 38601 lines (1000kb). The problem is in Mpdf/CssManager.php, line 481 (the code above). The return of the preg_replace is null because the file is too long.
In the past (with PHP 7.3 & an older version of mpdf) I did manage to include the tailwind css also into the mpdf writehtml. But in this version it does not work any longer.
My main question is, what is the best way to include the tailwind component? As I'm guessing that the length is what is causing $html to be null and therefore resulting in a blank page
(I'm not sure whether it would still be required to include a file (?))
I have a small website using only PHP, HTML, and CSS and want to add Dark Mode on it. I've found a lot solutions, but all of them use JavaScript. Is that possible to add Dark Mode without JS?
One option could be to use a routing element in your URL that determines (using server side logic) which set of cascading style sheets gets loaded.
For example in http://foobar.com/dark/path/to/content the /dark/ part of the URL could make the server load your "dark" theme CSS files.
You already have all you need. Browser detection is done with CSS following the Media Queries Level 5 specification using a prefers-color-scheme media query for detection. If you're familiar with responsive web-design with CSS then you already have all the knowledge - the only difference is that responsive CSS is about geography (sizes, columns, padding, spacing, font-size, etc.) and prefers-color-scheme is about ... well ... color. Thomas Steiner (#DenverCoder9) has an awesome article "prefers-color-scheme: Hello darkness, my old friend" that covers this.
If you are asking about PHP specifically then you are out of luck - there is no dark mode detection methodology for server side-processing.
All efforts thus-far by the W3C (and its sponsors) has been focused on client-side / Jamstack.
There is a recommendation by Thomas Steiner (same guy) to implement a Proposed server-side client hint, but this has not been adopted (yet?) by the W3C or the browsers.
Either way - there is a significant drawback in server-side detection (both with Thomas' recommendation and my solution below) in that the server will only know about a state change (e.g. macOS "Auto" mode when night fall happens) on the next server request, or more visibly, the first load of the page.
My recommendation is to leverage CSS / client-side only on this - Thomas gives some practical guidance on two methods,
1x CSS with both color schemes supported, and
2x CSS, with one being light and the other dark. I've made a educative whitepaper applying some of these methods with the CSS framework Bootstrap at vinorodrigues/bootstrap-dark to show how easy that can be - without server-side processing.
Having said that - if you must insist on PHP or server-side detection there is no workaround - but one must use some JS. The most efficient way is to leverage the js-cookie/js-cookie project, and include the following code into your HTML pages:
<script src="https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js"></script>
<script>
// code to set the `color_scheme` cookie
var $color_scheme = Cookies.get("color_scheme");
function get_color_scheme() {
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
}
function update_color_scheme() {
Cookies.set("color_scheme", get_color_scheme());
}
// read & compare cookie `color-scheme`
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
update_color_scheme();
// detect changes and change the cookie
if (window.matchMedia)
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
</script>
And then your PHP will detect this cookie like this:
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
if ($color_scheme === false) $color_scheme = 'light'; // fallback
Which you can use to load the CSS:
// Load the CSS for the correct color-scheme
if ($color_scheme == 'dark') {
?><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinorodrigues/bootstrap-dark#0.0/dist/bootstrap-night.min.css"><?php
} else {
?><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0.css/bootstrap.css"><?php
}
Or, like this:
?>You are in <?= $color_scheme ?> mode.<?php
You can do a clone of the css and change the background-color, buttons... It's not really necessary really to use JavaScript
If you want to do just a button for change the css, i don't really know how to do it, but if you want to do another webpage but just for Dark Mode, just put the clone off the css that you created.
I want to dynamically create an svg that I can use in an <img/> tag. This in itself is easy; create an svg, set the header and echo the generated parts in their correct place.
The problem is, I want to be able to embed fonts in the svg.
I've tried using the #font-face rule in the css of the svg, but that didn't work (MDN says that it only works on Android and Safari).
Is there any cross-browser way to do this?
Solutions I've Considered:
Possible Solution #01:
The solution:
In my main file, create an svg file which uses the #font-face css rule, and then use exec() to use inkscape to convert that svg into another svg, which converts all letters into paths. I then could use echo file_get_contents($inkscape_file) with the correct headers to output it as a svg which can be used with an <img/> tag.
The problem with this:
This creates 2 additional files, so seems very inefficient. Furthermore, since each user will end up generating several images, the space it takes up would grow phenomenally.
Possible Solution #02:
The solution:
Make a template in illustrator, then save it as svg, and tick the embed all glyphs option. Then replace the text & the styles with the options from the PHP script. Use the correct header and output this.
The problem with this:
This severely limits the amount of fonts that can be used, as it is limited to only those which I create a template for. My desired behaviour was to add the option for users to upload their own fonts and use them. This solution does not allow for that.
Additional information that may be of some relevance:
My development server runs fedora, and the production server uses redhat.
The #font-face rule I am currently using is as follows:
#font-face {
font-family: Potato;
src: url("/fonts/potato.otf");
}
You can't load any external resources declared in the svg from the <img> tag.
The only solutions would be some crappy ways to append the glyphs or the fonts into the svg file itself.
Actually there is a not so crappy way to do it as you found in this answer by lèse-majesté.
The best way is then still IMO to not use an <img> tag to display the svg documents, but rather use an <iframe> or an <object> tag, with the #font-face declared inside the svg file, or even directly include an inline version into the document. These methods do allow the loading of external resources such as fonts.
Then you just have to save the fonts on your server or just an url to the font in the #font-face declaration.
I need some help writing an awesome class to take a style sheet, detect browser specific CSS3 rules, and add support for all compatible browsers. This way, we can just write our styles sheets for one browser and then process the CSS files when we are ready for production.
Here's my thoughts on the class so far:
class CssRewriter {
public function reformCss($file) {
// Get the CSS as a string
$cssString = file_get_contents($file);
// Use regex to capture all styles delimited by {...}
// Use regex to determine if the any of the captured styles are browser
// specific (starts with -moz, -webkit, etc)
// Determine which CSS3 rules are not present and add them to the style
// (so if you have -moz-linear-gradient, automatically add the webkit
// version)
}
}
Yikes. CSS parsers are not as easy as you imagine, man. Depending on regular expressions is just asking for one typo to be totally misinterpreted.
Not the answer you were looking for, but quite possibly a better one: have you considered using Sass and mixins? You're not the first to hit the issue of the repetitive nature of CSS, so someone else has already faced the challenge of a CSS pre-processor for you.
Your best bet would be to modify existing CSS parser like CSS Tidy and add in a additional logic to output backwards-compatible CSS.
I know that I can output an image using GD by using
<img src='draw.php'>
Where draw.php is a file containing the code to create an image. How can I instead output the image via a function call (I am using the Zend Framework so will be using a View Helper) rather than simply pointing to a .php file in an img tag as above?
Any help greatly appreciated.
you can't.
at least not in a useable way - you could encode the image with base64:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt=""/>
i don't have any idea which browsers support this, though ... quick test:
firefox: ok
chrome: ok
opera: ok
ie6: fail
ie7: fail
safari: fail
ok, forget it.
but, you're probably trying to do something different - passing the file through ZF. i can't help you with that, but it should work roughly like this:
in your controller, set the output type to image/png (however ZF handles that) pass through your image and make sure ZF doesn't add anything to the output (like additional html and stuff).
Why not make your View Helper create an image, write it to disk, and then output/return the img tag with the correct source attribute?
Send appropriate headers (content type) and then use http://www.php.net/image_jpeg