How to force a monospaced font to render in Facebook? - css

I made a program that generates ASCII art from an image. I want users to be able to copy and paste that ASCII art to their wall and have it display properly.
Problem:
Facebook doesn't use a monospace font.
Does anyone have any ideas on a workaround?

𝚈𝚘𝚞 πšŒπšŠπš— πšπš›πš’ π™ΌπšŠπšπš‘ π™Όπš˜πš—πš˜πšœπš™πšŠπšŒπšŽ πš˜πš— 𝚚𝚊𝚣.𝚠𝚝𝚏
But it must be done one line at a time unfortunately. But it is unicode so you can prepare it first in a text editor and copy/paste into facebook.

Basically the question is: can you post a formatted text on the wall? The answer is no, sorry. Facebook currently doesn't support any html, markdown-like syntax, or html entities in their wall posts, only plain text.

have you tried the following html tags (they may get filtered, but may not)
<pre> my code </pre>
<tt> my code </tt>

I get that this is a 9 year old question, but I was looking for something similar, saw http://qaz.wtf/u/ in the comments, and went digging.
Found this:https://github.com/cpsdqs/monotext
It's a single-file script (js) that appears to accomplish the same thing:
π™³πš˜πšπšŽβ€€πšπš˜πš›β€€πš•πš’πšπšŽ
πš‚πšπš˜πš•β€€πš†πš˜πš†β€€πš‚πš’πšπšŽ
I'd imagine you could (as I plan to) use it as a base to convert something faster than one line at a time. Hope it helps someone!

monospace: Try a backtick ``before and after your text.`
italic: _italic_
bold: *bold*

Related

R Blogdown: insert images side by side using knitr

I am working on a personal website using blogdown. I know about the handy addin for inserting an image - it works well, but for only one image. Is there a way, using knitr::include_graphics, to insert multiple images side-by-side?
I'm aware of using something like this:
![image text](path/to/image.png) ![other image text](path/to/image2.png)
But this cannot adjust the size of each image, which is an important formatting option for me.
Note:
While poking around for a solution before I post this question, I found this github issue which seems to be similar to what I'm talking about.
Edit:
Using something like this:
<img src="path/to/image.png" width="50%"/><img src="path/to/image2.png" width="50%"/>
Was suggested, but it only displays the images on top of each other in the document.
I'll post the solution mentioned in the above comments since it worked the best for me, and I'll certainly come back to this post to use this in the future. The answer here seems to be the only thing that works for me. If getting the path name correct is difficult, run the command getwd() in the line above to make sure readPNG is looking in the right place.

Wordpress FLIR (Facelift Image Replacement) plugin clipping off end of text

I'm using the FLIR for Wordpress plugin (v0.8.9.2) with FancyFonts enabled. I'm running Wordpress 3.1. The problem I'm having is that it appears the plugin is cutting off a couple pixels off of the end of some of the text that it generates. It doesn't do it for all text, but where it happens, it happens consistently.
Here are some examples:
In my search for a solution, I've found a number of people with this issue, but never any solutions. Any ideas would be greatly appreciated. Thank you!
I know this was asked quite a while ago, but while researching the problem I came up with a solution. Every page I'd read on this was a bunch of people bickering about the source of the problem and reproducing it, but nobody provided a solution.
This doesn't fix the problem at its source, but it works perfectly. Open generate.php
Find:
$FLIR['text'] = html_entity_decode_utf8($FLIR['text_encoded']);
Replace With:
$FLIR['text'] = html_entity_decode_utf8($FLIR['text_encoded']) . " ";
All it does is force a space after every input string. The space is rendered along with the rest of the text, but is cut off (so you don't see it). This doesn't add the space to the actual HTML, so if it's rendered using a text-browser, rendered without FLIR, or accessed by a crawler (for SEO) the additional space will not show. It is only inserted into the PHP function which creates the image.
After searching for about an hour, I thought it would be helpful for there to be at least one fix on Google.
EDIT: This doesn't work for text with letter-spacing. I was about to give up and just not use letter spacing, but I found this this worked (again, not solving the problem at the source but fixing the visual issue in the same way). Open inc-flir.php
Find:
return rtrim($ret);
Replace With:
return $spacetxt . rtrim($ret) . $spacetxt;
This inserts the same amount of space on either side of the image as are in-between each character. I added the spaces to both the left and right side so that the text will be mostly centered.
EDIT AGAIN:
Oh yeah! And don't forget clean both FLIR's cache and your browser's cache or you wont see the updates!
Thanks. i would use font-face to fix the problem, but BOTH answers (on those phpΒ΄s) made the trick.
The problem was with stable version 1.2, then I found v2.0beta3 out there. PROBLEM WAS WITH CHROME , by the way...
Oh... i you use mode=Β΄wrapΒ΄, youΒ΄ll probably still have the problem with chopped text at the last part of the paragraph. In a phrase, the width of an H1 cuts off the last part of the letter, so I added a non breaking space directly to the problematic word.
Example B&A:
<h3>Nuestra visiΓ³n de la Seguridad InformΓ‘tica </h3>
then...
<h3>Nuestra visiΓ³n de la Seguridad InformΓ‘tica </h3>
VoilΓ‘!
So, three patches to fix an OLD php font plugin... and your help was gold for me. Thanks!

Can freetextbox display links that were not explicitly added?

I would like to display links that are pasted in as links rather than text but freetextbox does not seem to do this. For instance, if somebody pastes in http://www.stackoverflow.com it looks like a link but shows up only as text. Do I need to convert this myself or is there a setting in the editor to take care of this?
It depends. In most cases, you need to convert it yourself. Sometimes when you copy a link you are actually getting a link and not just the text. But yes, you'll have to get your hands dirty here.

In-text hyperlinks shown by Internet Explorer without the following space. What can be the reason? YUI?

I've a problem which is most likely some ugly CSS mistake, but I just can't spot the solution (and a few changes I tried did not help).
Some of in-text hyperlinks (not all!) are shown by Internet Explorer without the following space.
here is the example
See the link WatchBot just below the Rationale title (and a few similar links deeper in the article). Firefox, Opera, Chrome, Konqueror - all display it properly: WatchBot can. IE (6.0 but IIRC also 7.0) displays it as **WatchBot***can*.
I am using Yui-reset and yui-base. Is it possible that those libraries cause the problem?
Do you have a script running on, and altering, the content in any way? I say this because the page loads normally initially, but looks as though it undergos some modification later in the loading lifecycle.
If you think reset or base are making this happen try removing them one at a time - I haven't had any experience of this error before however (I usually use the full whack: Reset, Grids, Base and Fonts).
What I did notice however is that the first WatchBot link of the page is simply this:
<p>Have you ever been curious how is
WatchBot
picking the games to observe and save? Here is the explanation.</p>
Where as the second link looks like this:
<span>Due to the FICS limitations </span>
WatchBot<span> can
I have no idea what that second span is doing there - might be something to check up on. (It validated fine however - so there's definitely an closing span somewhere).
I'd say a good place to start would be to but a space after the anchor but before the span, rather than right after the span start tag.
Current state of the things: as steve_c spotted first, and buti-oxa confirmed, it looks like the layout is being spoiled by javascript (and as Ross noted, some extra spans are injected). Thank you all, I missed it.
I am to make experiments and selectively disable those scripts (analytics and google ads) to check whether it helps (my current bet is that maybe I have some HTML error or naming conflict)
Did you try to disable pageTracker? It seems to be the only script on your page, and it looks fine to me in its static form.
EDIT: I wondered what span Ross was talking about - I did not see any. I viewed the source. I just learned that Firefox allows to see both source and generated source (Toos/Web Developer/View Source). Sure enough, generated source has additional span inserted.
Solution: my page was spoiled by the text-link-ads script (which, in fact I activated on English blog by mistake - this is script by adkontekst.wp.pl, Polish firm). After disabling it everything is OK.
Thanks for everybody who pointed me into the right direction.

CSS Copy and paste problem

I've developed a system in my application where emails are picked up with a regex, and then reversed in the source (to thwart bots). I then add the span class 'obfuscate email'. I then use CSS to reverse the the text back to be displayed and Javascript make sure that mailto: links still work.
I was pretty happy with my solution until I realised that copying and pasting the email puts it in the clipboard backwards. I was wondering if there was any way I could remedy this? I've been testing in Firefox 3 for OS X.
The page in question is available here: http://www.leaklocations.com.au/contact-us/
To see the problem, simply copy and paste the email on that site.
You can use the same Javascript to reverse the text as well as the mailto links. If the user doesn't have Javascript, then you can either settle for this problem or use an image.
I personally think it's going a bit over the top, but if you really want to obfuscate the address, why not obfuscate it in a human readable way? Instead of reversing the address, make the server output "info at leaklocations dot com dot au" and get javascript to fix it up?
If you wanted to stick to using the RTL CSS method, you could try playing around with the unicode character to reverse text: \u202E I'm not sure if that will help, but it's worth looking at
To see how this works, run this javascript:
alert("one \u202E two \u202E three")
and it'll output "one owt three"
Seriously, is it worth all this effort to obfuscate email addresses? Once the email makes it into a spammer's hands, it's all over. Better to have a good spam filter instead.
And if you use JavaScript to reverse the email addresses back again you are adding extra work for the browser on page load. If JavaScript is turned off or a user is on a mobile device that doesn't support JavaScript, they are screwed too.
Why not use something like MailHide from the reCaptcha folks to hide email addresses instead?

Resources