HTML browser not printing in new line - html

Need some help with browser printing.
I tried to create a form that have TextArea which insert \r\n into database (mongoDB) when type multiple lines of text just fine.
eg:
HP Color LaserJet Pro M252dw Toner (Y)\r\nP/N: CF402A
While in browser it goes to new line just fine (using white-space: pre) inline style
td(style="white-space: pre")=
eg:
HP Color LaserJet Pro M252dw Toner (Y)
P/N: CF402A
When printing from browser it's goes back into same row as before
eg:
HP Color LaserJet Pro M252dw Toner (Y) P/N: CF402A
I tried using pug .replace('\r\n','<p>') and it will show <p> as a string not as HTML syntax.
I'm using PUG as my template engine run on Node + Express
browser is Chrome.
I'm very new to programming so not sure if I'm doing it wrong or not?
Also this is first time I posting question in Stackoverflow so if I do anything wrong feel free to suggest.
Thank you very much for your answer :)

Found a fix from this link: https://github.com/pugjs/pug/issues/2583
it seems that I need to put ! in front of my variables

Related

LaTeX in R Notebook not rendering properly in HTML (hats are skewed to the right)

When I output an r Notebook to html, and use latex, most of the output renders fine.
When I use hats though, it's not lined up properly on the character I'm 'hatting'.
For example:
---
title: "R Notebook"
output: html_notebook
---
Hello Everyone, $\pi = 3.14159...$ but my estimate is $\hat{\pi}=3.13$
Outputs into an HTML file:
Even though, when I hover over the latex in the code, it renders properly:
Another thing I now notice is that, the latex output font when I hover is nicer than the HTML output, is it possible to change the HTML output font to the 'hovering' font?
EDIT: My OS and software versions are MacOS Catalina 10.15.3 with RStudio version 1.1.456
It turns out I just needed an RStudio update, and it solved the problem. I'd tried updating RStudio through the application, but since I had the option 'Ignore Updates' it would always notify me that I had the latest version, so I had to download the .dmg from the website and re-install.
If anyone can help me change the font though, I'd really appreciate it.

Formatting Text in Placeholders

I'm using officer to create many ppt files. I have a template that i have been using for over a year that's worked great. Since the latest update (6.23.2019) the formatting of the placeholders in the slide master of the template do not persist to the output ppt. For example, in the slide master, I have a placeholder that is size 18, red, Adobe Clean Light font. When the ppt is rendered the text appears as size 24, black, Adobe Clean Bold font. Any ideas on why this is happening?
I don't have a great answer as to why this is happening, but the crux of the issue is using type/id instead of ph_label. If you use ph_label, the formatting persists from the template to the output ppt.

VSCode Emmet html boilerplate?

We used to be able to type ! inside an html document in vscode to get html boiler plate content completion as documented here.
However it no longer works. Thoughts?
I noticed that if we type ! and select Edit > Expand Abbreviation, the ! is replaced with boilerplate, but I no longer get the intellisense that was there before.
Update
Looks like we need to do ctrl+shift+p and search for User Settings. Filter for the emmet settings and select the Trigger expansion on tab then the ! is replaced with the corresponding emmet snippet.
I also selected Show suggestions as snippets, but the intellisense / snippet is still not showing up.
If you want to get html boilerplate with Emmet Abbreviation, you should type html:5 and hit tab.
I have faced this issue in visual studio.
Step-1:
try below steps in url. https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
Step-2:
if it worked : "cheers .!"
else:
it could be issue with select language mode. on the bottom of visual studio next to LF on your screenshot select language mode and change it to html.
Thanks & Regards, Surya kiran.
The issue was with Language mode only. You will get the option to select the Langauage mode on the bottom.
Been very annoyed for many, many long minutes by the boilerplate shortcut's suddenly, inexplicably not working (maugre much extension-de-installing and intalling and re-installing, even with VS Code uninstalls and re-installs, but what I'm come up with from mining various forums (what does seem to work and doesn't appear to be settings-dependent or peculiar to my laptop) is:
COMMAND+K plus COMMAND+L (one can just HOLD COMMAND and type K and then L sequentially).
In the Emmet Abbreviation window that comes up type ! as usual and then press Enter/Return.
Simply striking ! will bring up the boilerplate. One can then simply press Enter to return to the code.
The two-stroke process of ! + TAB is now replaced by the only marginally more involved five-stroke process of ⌘ + K + L + ! + Enter.
For me it was the "<" problem
this is not working: <html
this is working: html
After a recent update to VS Code the familiar why of getting a html boilerplate failed. You could add a index.html to the file explore and the window would open for its content.
Using Shift and the exclamation mark key would produce it. That is no longer the case instead create your file in the explore. When it opens the window type html, you will receive a dropdown to select from instead.
enter image description here
I experienced this issue after configuring my VS Code environment for an online course. In my case, the behavior was due to the following pair being added to my settings.json file:
"emmet.showExpandedAbbreviation": "never"
After I removed this, the shortcuts returned.

How to convert MS Outlook smiley (Wingdings) to something displayable in a browser?

In the noble effort to re-invent every wheel, our company has recently rolled our own custom web-based e-mail app, of which I was the primary designer.
One thing I've noticed is that smileys coming in from MS Outlook-based e-mails (sent from third parties) are not appearing correctly. Example: A happy face just displays a J
The HTML of the inbound message comes in like this:
<span style="...;font-family:Wingdings;...">J</span>
I know that Firefox and Chrome do not support the Wingdings font because it is non-standard. However, I am tasked with coming up with a fix.
Is there a good way to either 1) force the browser to load and use Wingdings or 2) otherwise convert the J to a smiley?
I'd rather not do anything crazy like try some wingdings-detection-regex - or even worse, parse the DOM - just to get some stupid emoticons working. Maybe there is already some library out there that already handles this?
For what it's worth, GMail seems to not 'fix' this problem either. iOS doesn't in the message view, but puzzlingly does fix it in the inbox view (replaces the J w/ emoji)
EDIT
To clarify, this question is regarding inbound messages from third parties. Outlook, by default, autocorrects ":)" to the Wingdings smiley. There's nothing I can do to prevent this coming in. What I need is a solution to correct for this.
EDIT 2
Again, the app itself is a web based e-mail client (Gmail, etc.). E-mails go in to here, NOT to users' individual Outlook/phones/other e-mail clients. It only goes into the web app.
To avoid having to parse the HTML or manipulating the DOM, a simple solution would be to use CSS3 web fonts by linking the Wingdings font-family to a copy of the Wingdings font file on your server:
<style>
#font-face {
font-family: Wingdings;
src: url(link_to_wingdings_font_file.ttf);
}
</style>
However, a license is required for this approach.
You could embed the SWEC (Symbola-based Wingdings Emoticons Compatibility) font: https://drive.google.com/open?id=0BwDrnPQfa-aMOEx0bEZCQUNrSGs
It provides basic compatibility with Wingdings emoticons. (In Wingdings, "J" represents a smile, "K" represents a lack of expression, and "L" represents a frown.) Background: certain versions of Microsoft e-mail clients still in use change user-typed expressions such as ":)", ":|", and ":(" into "J", "K", and "L", respectively, and then specify Wingdings as the font family; recipients on systems which do not include a Wingdings-compatible font are not able to see the intended emoticons, which can cause confusion.
You need to manually substitute it prior to sending the email as you have no control over what fonts the reader has installed. You also can't include anything outside bland old html and css (unless you want to mess with VML)
First I would try running your wingding through a html converter to see if there is a html code for it.
Besides that, you could try a webfont wingdings equivalent, however there are issues with Outlook playing nice when webfonts are imported in email (ignores your font stack, falling back to Times New Roman).
Besides that, all that is left is ZephyrusDigital's suggestions of using an image or :).
Against my better judgement I have decided to go for the quick hack and just use a regular expression. Here it is for anyone else that runs into the same problem:
$html = preg_replace('/\<SPAN*?(Wingdings)*?[^\>]*\>J(\<o\:p\>\<\/o\:p\>)*\<\/SPAN\>/i', ' :) ', $html);
use :)
kidding!
why not save the wingdings smiley in photoshop as a png, or make another custom one? you could use <img src="http://something.com/images/smiley.png" style="display:inline-block;"/> and it won't look weird in a text block as long as it isn't taller than your line-height.

Inputs print without text inside them, but are visible on the screen

I have a problem with a project that I have been working on for a while now. When I open an entry, the inputs all have data in them. However when I go to actually print the entry (using the print-mode, CTRL+P), I notice that the select, and textarea fields are missing the selected or input text on paper. What's going on here? I have googled for hours and can't come up with anything relevant... help! Thanks!
Link to Project (Click "Demo" to create a session - required)
Link to Entry (Click this after you click the 1st link)
Update : Before now I have just been using Google Chrome to test printing. However, when I tried FireFox, it printed alright, is there anything special I need to do to get Chrome to work??...
RESOLUTION : I am using jQuery and I found that by removing the ui-corner-all class from the inputs before printing, I could then print. Thanks anyways!
If you're using Internet Explorer, then this discussion thread may help you (summary: IE can get confused when printing malformed docs). Check your doctype tag matches your output (the w3c markup validator is very useful)
Edit - I see you're using chrome, but I suggest you still check your page is well formed :)
RESOLUTION: I'm using jQuery and I found that by removing the ui-corner-all class from the inputs before printing, I could then print. Thanks anyways!