vb.org Archive - bbcode font-size semantics

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)

- - bbcode font-size semantics (https://vborg.vbsupport.ru/showthread.php?t=282857)

PinkMilk

05-13-2012 12:16 PM

bbcode font-size semantics

Currently vb uses for bbcode font-size and so I'm trying to replace it with 

So far I've edited class_bbcode.php
Example (color):

PHP Code:


		
			
html' => '<font color="%2$s">%1$s</font>',

to:

PHP Code:


		
			
html' => '<span style="color:%2$s;">%1$s</span>',

and output seems fine except for font-size ...

PHP Code:


		
			
html' => '<font size="%2$s">%1$s</font>',

to:

PHP Code:


		
			
html' => '<span style="font-size:%2$spx;">%1$s</span>',

as it calls the old sizes 1 - 7

so my question is where can I find where to change "default" font sizes 1 - 7 to say 10 - 20 (px)?

kh99	05-14-2012 10:52 AM

Someone asked that question on stackoverflow: http://stackoverflow.com/questions/8...-size-10-to-px . Someone there came up with a conversion to ems.

PinkMilk

05-14-2012 12:11 PM

Thanks but that's not what I mean, converting sizes to Points/Pixels/Ems is the easy part, I'm needing to change how vbulletin converts the members bbcode choice:

PHP Code:


		
			
html' => '<span style="font-size:%2$spx;">%1$s</span>,

Rather than:

PHP Code:


		
			
html' => '<font size="%2$s">%1$s</font>,

Now one way I guess would be to add a "1" before the replace var turning 1 into 11, 2 into 12 etc etc

Code:

html' => '%1$s,

..but I would still like to know where in vbulletin the font-size function, CSS or whatever is allowing me to choose specifically which font sizes I wish whether it be within a template or php file as I can't find where myself.

kh99	05-14-2012 02:48 PM

Oh, OK. I think what you can do is change that code to use a callback like this:

Code:

                        // [SIZE=XXX]

                        $tag_list['option']['size'] = array(

                                'callback' => 'handle_bbcode_size',

                                'option_regex' => '#^[0-9\+\-]+$#',

                                'strip_empty' => true

                        );

Then write a function called handle_bbcode_size that takes the size number 1-7 as a parameter and returns the replacment html. That way you can write whatever php you want to do the conversion. (Edit: I think the function actually takes two parameters, the text between the tags and the font size number).

BTW, I haven't tried it, and looking at the other tags that have a callback I notice none of them have an option_regex so I don't know if that works with a callback or not.

NeutralizeR

04-15-2015 04:38 AM

Hello... Can you please help me on this? How can i use %2$s and %1$s in the sample function below?

PHP Code:


		
			
function handle_bbcode_size($text, $size, $fontsize = '')  
{  
    
    
        if ($size)
        {
            switch ($size)
            {
                case '1':
                    $fontsize = '11px';
                    break;
                case '2':
                    $fontsize = '14px';
                    break;
                case '3':
                    $fontsize = '17px';
                    break;
                case '4':
                    $fontsize = '20px';
                    break;
                case '5':
                    $fontsize = '23px';
                    break;
                case '6':
                    $fontsize = '26px';
                    break;
                case '7':
                    $fontsize = '29px';
                    break;
            }
        }
        else
        {
            $fontsize = '14px';
        }            

            return '<span style="font-size:$fontsize">$text</span>';
        
    
        
}

NeutralizeR

04-17-2015 02:04 AM

Can you please say if it is possible or not please? :)

kh99	04-17-2015 09:54 AM

Well, I never did actually try it, as I mentioned above. But did you make the change to $tag_list that I posted above? It's in includes/class_bbcode.php. And the handle_bbcode_size function should go in there too, somewhere before the final } so that it's part of the class.

NeutralizeR

04-23-2015 03:33 AM

PHP Code:


		
			
        if (($vbulletin->options['allowedbbcodes'] & ALLOW_BBCODE_SIZE) OR $force_all)
        {
            // [SIZE=XXX]
            $tag_list['option']['size'] = array(
                'callback' => 'handle_bbcode_size',
                'option_regex' => '#^[0-9\+\-]+$#',
                'strip_empty' => true
            );
        }

PHP Code:


		
			
    /***Handles a [size] tag.********************** */
    
    
    function handle_bbcode_size($text, $size = '')  
    {  


        if ($size)
        {
            
            switch ($size)
            {
                case '1':
                    $size = '12px';
                    break;
                case '2':
                    $size = '15px';
                    break;
                case '3':
                    $size = '18px';
                    break;
                case '4':
                    $size = '21px';
                    break;
                case '5':
                    $size = '24px';
                    break;
                case '6':
                    $size = '27px';
                    break;
                case '7':
                    $size = '30px';
                    break;
            }
        }
        else
        {
            
            $size = '15px';
        }            
                      
            return '<span style="font-size:' . $size . '">' . $text. '</span>';
        
    
        
    }

It's working :) But there is another problem now.

I enter some text in WYSIWYG text area and select the text, then i pick a size like 5.

It changes the font size perfectly. (in the page source code it still says <font*)

I click the preview button (in newreply), the page reloads and it still displays font size as "5".

I check the page source code both in the preview table cell and WYSIWYG text area and they both display "<span style***" which is correct.

I click the preview button once again and this time i notice the text's font size is converted to default size and the size tag is completely removed.

Then I opened vbulletin_textedit.js and changed the line below:

Code:

option.innerHTML = '' + sizeoptions[n] + '';

to:

Code:

option.innerHTML = '' + sizeoptions[n] + '';

It didn't work. Something is still adding "<font size" tag...

kh99	04-23-2015 09:53 AM

Oh, right, I forgot about the fact that it has to be able to go back and forth between bbcode and html. There's a file includes/class_wysiwygparser.php that goes from html to bbcode, and it uses the tag instead of the font-size attribute. So you could either change your replacement to use the font tag (which I know isn't the way it's done these days), or else figure out how to change the code in class_wysiwygparser.php. I only glanced at it, but there's a function parse_style_attribute(), and it currently doesn't parse out the font size. You might be able to add a line to the $searchlist array to make it find the font size and insert a size tag for it. Probably something like:

Code:

array('tag' => 'size', 'option' => true, 'regex' => '#font-size:\s*([0-9]+px;?)#i', 'match' => 1)

then you'd also need code to convert the matched text to your font number. If this isn't something you can do, I'll give it a try later.

NeutralizeR

04-23-2015 10:42 AM

Quote:

Originally Posted by kh99 (Post 2543946)

Code:

array('tag' => 'size', 'option' => true, 'regex' => '#font-size:\s*([0-9]+px;?)#i', 'match' => 1)

then you'd also need code to convert the matched text to your font number. If this isn't something you can do, I'll give it a try later.

It's beyond my knowledge :) Thank you for your time! I'll be waiting.

--------------- Added 23 Apr 2015 at 15:47 ---------------

Btw, my vb version is 3.8.8 and i don't see a file named class_wysiwygparser.php. Maybe it's a vb 4.x file? There is file named functions_wysiwyg.php though.

Is this the related section?

PHP Code:


		
			
// ###################### Start WYSIWYG_fontparser #######################
function parse_wysiwyg_font($fontoptions, $text)
{
    $tags = array(
        'font' => 'face=',
        'size' => 'size=',
        'color' => 'color='
    );
    $prependtags = '';
    $appendtags = '';

    $fontoptionlen = strlen($fontoptions);

    foreach ($tags AS $vbcode => $locate)
    {
        $optionvalue = parse_wysiwyg_tag_attribute($locate, $fontoptions);
        if ($optionvalue)
        {
            $vbcode = strtoupper($vbcode);
            $prependtags .= "[$vbcode=$optionvalue]";
            $appendtags = "[/$vbcode]$appendtags";
        }
    }

    parse_style_attribute($fontoptions, $prependtags, $appendtags);

    return $prependtags . parse_wysiwyg_recurse('font', $text, 'parse_wysiwyg_font') . $appendtags;
}

kh99	04-23-2015 06:39 PM

Yeah, I forgot that you were using vb3, but they just changed the functions into a class, so it's pretty much the same thing. Here's the modified parse_style_attribute function I came up with:

PHP Code:


		
			
    function parse_style_attribute($tagoptions, &$prependtags, &$appendtags)
    {
        $searchlist = array(
            array('tag' => 'left', 'option' => false, 'regex' => '#text-align:\s*(left);?#i'),
            array('tag' => 'center', 'option' => false, 'regex' => '#text-align:\s*(center);?#i'),
            array('tag' => 'right', 'option' => false, 'regex' => '#text-align:\s*(right);?#i'),
            array('tag' => 'color', 'option' => true, 'regex' => '#(?<![a-z0-9-])color:\s*([^;]+);?#i', 'match' => 1),
            array('tag' => 'font', 'option' => true, 'regex' => '#font-family:\s*(\'|)([^;,\']+)\\1[^;]*;?#i', 'match' => 2),
            array('tag' => 'b', 'option' => false, 'regex' => '#font-weight:\s*(bold);?#i'),
            array('tag' => 'i', 'option' => false, 'regex' => '#font-style:\s*(italic);?#i'),
            array('tag' => 'u', 'option' => false, 'regex' => '#text-decoration:\s*(underline);?#i'),
         array('tag' => 'size', 'option' => true, 'regex' => '#font-size:\s*([0-9]+px;?)#i', 'match' => 1)
        );

        $style = parse_wysiwyg_tag_attribute('style=', $tagoptions);
        $style = preg_replace(
            '#(?<![a-z0-9-])color:\s*rgb\((\d+),\s*(\d+),\s*(\d+)\)(;?)#ie',
            'sprintf("color: #%02X%02X%02X$4", $1, $2, $3)',
            $style
        );
        foreach ($searchlist AS $searchtag)
        {
            if (!is_bbcode_tag_allowed($searchtag['tag']))
            {
                continue;
            }
              if (preg_match($searchtag['regex'], $style, $matches))
            {
            if (strtoupper($searchtag['tag']) == 'SIZE')
            {
               $sizes = array('12px'=>1, '15px'=>2, '18px'=>3, '21px'=>4, '24px'=>5, '27px'=>6, '30px'=>7);
               if (isset($sizes[$matches[$searchtag['match']]]))
               {
                  $matches[$searchtag['match']] = $sizes[$matches[$searchtag['match']]];  
               }
               else
               {
                  $matches[$searchtag['match']] = 2;
               }
            }
            $prependtags .= '[' . strtoupper($searchtag['tag']) . iif($searchtag['option'] == true, '=' . $matches["$searchtag[match]"]) . ']';
            $appendtags = '[/' . strtoupper($searchtag['tag']) . "]$appendtags";
            }
        }
    }

It replaces the existing function (which I think is somewhere below the code you posted). I actually tried it on vb4, but I looked at the vb3 function and made a couple changes, so I think it might work (or if not, it's close).

Unfortunately, what doesn't work right is the font dropdown in the editor (at least in vb4). You can use the menu to set the size of selected text, but it won't showthe size of selected text or let you change the size if text already has a size (I think probably because it doesn't recognize the <span... way of doing it, so it just tries to add another on the outside, which does nothing). I don't know what to do about hat, or whether it needs to be fixed in js somewhere, but I don't have time to look at that. (Maybe it will work in vb3, or at least be an easier problem to fix).

Edit: No, same problem in vb3. But you've already looked at the js so maybe you have a head start. It looks like color, font, bold, italics, etc are done with attributes, so maybe you can find where those are handled and add font-size like we did in the php. I think the goal of the Op was to change the sizes associated with the numbers, so if that's true you might be able to go back to using and get everything to work just using the changes to the tag list, but maybe you have a different goal.

NeutralizeR

04-25-2015 07:18 AM

1 Attachment(s)

Thank you for your reply. It's working, but as you stated, dropdown problem and extra spans make it unusable at the moment. I'm still searching for the source of tags (they are added when you select a text and choose a size for the first time, a refresh converts them to span).

I attached my uncompressed vbulletin_textedit.js. Two instances of font tags are converted to span and i really can't find where else <font size and <font face tags are generated.

I also noticed that <font face, <font color and <font size tags are merged into one tag like:

Code:

test

I guess I'll need a span replacement, too.

kh99	04-25-2015 09:43 AM

I think for the ckeditor it might be in clientscript\ckeplugins\enhancedsourcearea\plugin. js, but I'm not sure if that file is used directly, because I seem to remember that all the ckeditor plugins are combined into one file. But I tried to search for a section of the code and it was only found once, so I could be wrong about that. I suppose I should just try changing something in that file and see if it has any effect.

NeutralizeR

04-25-2015 11:09 AM

vBulletin 3 does not have a clientscript\ckeplugins\ folder :( It's really weird. I can't figure out what else building the WYSIWYG editor. I made a mass search in all *.js and *.php files but could not find any other <font tags.

kh99	04-25-2015 11:20 AM

Quote:

Originally Posted by NeutralizeR (Post 2544126)

Oops, of course you're right. Then it looks like you must be looking in the right place. Maybe I'll look a little if I get a chance later (although I don't know anything about how the editor works).

kh99	04-25-2015 01:28 PM

OK, I think the problem has to do with the section in vbulletin_textedit.js that starts with:

Code:

/**

* Set Size Context

*/

this.set_size_context = function(sizestate)

That section tries to call a function queryCommandValue('fontsize'), which I guess returns the numeric value of the font size of the selected text (like you set in a tag), but doesn't know how to return the value if the font size is being set by CSS. A possible solution seem to have something to do with selection ranges, but I couldn't figure it out in the few minutes I spent on it. I figured maybe you know more js and could figure it out.

NeutralizeR

04-26-2015 05:57 AM

Yes, i'd seen that section but could not think of any ways to alternate the code. I posted a question @ stackoverflow and if i get an answer I will post here. Thanks.

All times are GMT. The time now is 04:24 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02589 seconds Memory Usage 1,877KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (11)bbcode_php_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (17)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: