Sarcastic Font Tag

[spiffshine]

A member of my forum had the great idea of using "sartalics" - or italics - to indicate sarcasm. Even better would be the ability to use a custom [sartalic] tag for my members to use!

I had the pseudo-brilliant idea to fake a [sartalic] tag by using text replacement with class styling, but that idea was squashed when I learned of the div class limitation in v5. That said, I think this would be relatively simple to implement as a plugin, but I am not skilled enough to accomplish it myself. Is this something someone would be willing to help me out with, or maybe just point me to the How to Build a Plugin When You Are Relatively Clueless manual?

I have a bit of CSS that will slant a font to the left (opposite regular italics):
.sartalics {
   -moz-transform: skewX(15deg);
   -webkit-transform: skewX(15deg);
   -o-transform: skewX(15deg);
   -ms-transform: skewX(15deg);
   transform: skewX(15deg);
}


Again on the topic of div classes in v5, I understand that this limitation is to prevent "breaking" the layout of the forum with bad implementation of floats, etc. Is there anything in the CSS above that could potentially reap havoc and destruction? (Brian?)

I know there are a few custom tags out there made with plugins like [ spoiler] by Todge and [ soundcloud] by Virgil Sovereign, so this is within the realm of possibility, right?

[spiffshine]

Bump

[spiffshine]

Bump once last time...

[Wormopolis]

put this in global footer

<script type="text/javascript">
$('td.content div.message').each(function() {
if ($(this).html().match(/\[sartalic\]/i)) {
$(this).html($(this).html().replace(/\[sartalic\]/gi,'<div class="sartalic">').replace(/\[\/sartalic\]/gi,'</div>'));
}
});
</script>

[spiffshine]

Thank you for trying, Wormopolis, but I can't use div class styling in ProBoards v5... at least not without a plugin (I think). I did try placing this script in the footer, along with adding my custom CSS, but nothing happened.


EDIT: Well, that's not entirely true... the [sartalic] tags do not show in the post, but they also do not format the text inside.

[Wormopolis]

can you link me to a post?

[spiffshine]

Jun 19, 2013 6:11:49 GMT -8 Wormopolis said:

can you link me to a post?

Well, what do you know... it worked! I had "sartalic" in one place and "sartalics" with an s in another. That was my bad. Thank you so much for your help!!

Here are sartalics in action:
tstappedout.proboards.com/thread/3628/testing-new-forum-feature

[Wormopolis]

We can't. Thread isn't public.

[spiffshine]

Jun 21, 2013 13:34:08 GMT -8 Wormopolis said:

We can't. Thread isn't public.

Oh, sorry. I forgot about the placement. I have moved it to a section of the site that allows guest posts. Try this link:
tstappedout.proboards.com/thread/3644/test

The code you gave me technic ally works, but there are line breaks before and after the "sartalic" text with [testdiv][/testdiv]. Also, the tags seems to affect text within CODE tags and also transform emoticons. 

I tried changing your code a bit to work in-line with span [testspan][/testspan] but the transform does not happen.

---

<script type="text/javascript">
$('td.content div.message').each(function() {
if ($(this).html().match(/\[testspan\]/i)) {
$(this).html($(this).html().replace(/\[testspan\]/gi,'<span class="sartalic">').replace(/\[\/testspan\]/gi,'</span>'));
}
});
</script>

[Wormopolis]

<script type="text/javascript">
$('td.content div.message').each(function() {
if ($(this).html().match(/\[sartalic\]/i)) {
$(this).html($(this).html().replace(/\[sartalic\]/gi,'<font class="sartalic">').replace(/\[\/sartalic\]/gi,'</font>'));
}
});
</script>

[spiffshine]

Thank you for your help Wormopolis. With a little more research I have found that 3D transforms in CSS really only work in divs, and not in span or font styles... and they are not widely supported.

It was a nice idea, but probably not worth any more time. Thanks!

[Wormopolis]

put it back to div then

and as one last test, change your CSS

.sartalics {
-moz-transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
transform: skewX(15deg);
display: inline;
}