Getting length of var and creating a width

Question

I have a banner background that is complex and the text blends into it so I need to add a background to this div so it shows the text given. Is there a way using PHP that I can get the length of the text and turn it into a px so I then can use it to set a width on the div?

Its the entry-title that I want to be automatic

HTML:

<div class="fusion-page-title-bar fusion-page-title-bar-none fusion-page-title-bar-left">
    <div class="fusion-page-title-row">
        <div class="fusion-page-title-wrapper">
            <div class="fusion-page-title-captions">
                <h1 class="entry-title" data-fontsize="31" data-lineheight="NaN">Cheats Hidden Vegetables</h1>
            </div>
        </div>
    </div>
</div>

Function:

function avada_page_title_bar( $title, $subtitle, $secondary_content ) {
        global $smof_data;
        $post_id = get_queried_object_id();

        // Check for the secondary content
        $content_type = 'none';
        if ( strpos( $secondary_content, 'searchform' ) !== FALSE ) {
            $content_type = 'search';
        } elseif ( $secondary_content != '' ) {
            $content_type = 'breadcrumbs';
        }

        // Check the position of page title
        if ( metadata_exists( 'post', $post_id, 'pyre_page_title_text_alignment' ) && 
             get_post_meta( get_queried_object_id(), 'pyre_page_title_text_alignment', TRUE ) != 'default' 
        ) {
            $alignment = get_post_meta( $post_id, 'pyre_page_title_text_alignment', TRUE );
        } elseif ( $smof_data['page_title_alignment'] ) {
            $alignment = $smof_data['page_title_alignment'];
        }

        // Render the page title bar
        echo sprintf( '<div class="fusion-page-title-bar fusion-page-title-bar-%s fusion-page-title-bar-%s">', $content_type, $alignment );
            echo '<div class="fusion-page-title-row">';
                echo '<div class="fusion-page-title-wrapper">';
                    echo '<div class="fusion-page-title-captions">';
                        if( $title ) {
                            // Add entry-title for rich snippets
                            $entry_title_class = '';
                            if ( ! $smof_data['disable_date_rich_snippet_pages'] ) { 
                                $entry_title_class = ' class="entry-title"';
                            }                   
                            echo sprintf( '<h1%s>%s</h1>', $entry_title_class, $title );

                            if ( $subtitle ) {
                                echo sprintf( '<h3>%s</h3>', $subtitle );
                            }
                        }

                        // Render secondary content on center layout
                        if ( $alignment == 'center') {
                            if ( fusion_get_option( 'page_title_bar_bs', 'page_title_breadcrumbs_search_bar', $post_id ) != 'none' ) {
                                echo '<div class="fusion-page-title-secondary">';
                                    echo $secondary_content;
                                echo '</div>';
                            }
                        }

                    echo '</div>';

                    // Render secondary content on left/right layout
                    if ( $alignment != 'center' ) {
                        if ( fusion_get_option( 'page_title_bar_bs', 'page_title_breadcrumbs_search_bar', $post_id ) != 'none' ) {
                            echo '<div class="fusion-page-title-secondary">';
                                echo $secondary_content;
                            echo '</div>';
                        }
                    }

                echo '</div>';
            echo '</div>';
        echo '</div>';
    }
}

You can't tell with php, as it depends on the style the text gets. javascript can do what you want — baao, Aug 14 '15 at 01:14
`strlen` http://php.net/manual/en/function.strlen.php *"Is there a way using PHP that I can get the length of the text"* — Funk Forty Niner, Aug 14 '15 at 01:22
@Fred-ii- you do NOT wont to make assumptions above element sizing based on the strlen. Even different browsers render layout different at times, even if they have the primary font installed, and thats not even mentioning different devices. Stick to a CSS or JS+CSS solution that can take into account the actual RENDERED size of the element. — Daniel Brose, Aug 14 '15 at 01:26
@DanielBrose assumptions based on no code and the OP asked it in the question; *answered*. How to check a string length in PHP. Edit: Ah, now they showed code. — Funk Forty Niner, Aug 14 '15 at 01:27
@Jess Can you please share the outputed html (click viewsource if needed, or use F12 element view in dev console) — Daniel Brose, Aug 14 '15 at 01:29
and @Fred-ii- - the OP asked explicitly " Is there a way using PHP that I can get the length of the text and turn it into a px so I then can use it to set a width on the div" - strlen does nothing for px, nor doesnt it account for obvious question of the 'actual' rendered size for different browsers. I do get that your trying to help, but a comment that doesnt actually account for OP but only a few words doesnt help here - there are better questions out there on that — Daniel Brose, Aug 14 '15 at 01:32

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

As noted in comments, you wouldnt do this with PHP.

Javascript would be a better bet, though pure CSS is applicable in most cases (but you didnt share your html so couldnt tell you which is best)

These should answer your question:

With CSS:

How can I dynamically resize a DIV element's width to fit its text content?

Autoresize Element (div) to Fit Horizontal Content

With JQuery or CSS:

Dynamically resize container to fit text

I couldnt see a pure-js accepted answer, but I would just stick with CSS anyway, as thats what every other question had 10 answers using, often including the accepted answer.

These should be able to affect any type of tag, 'p' included, with minimal tweaking.

If a CSS only solution works, then use it.

UPDATE - IMPORTANT

Now that code has been shared and question clarified, I have a new and very simple solution.

CSS repeating background, sprite or 1px png

Apply a 1px image with some transparency or muted colours or whatever, and repeat it so it fills behind the text.

This might be applied to either the "fusion-invoice-caption" or the "h1" tag.

Worst case, you look at previous links and add another wrapper tag around the h1 text, but i cant see that being needed.

background: url("path/to/background.png") top left repeat-x;

The linked post has more info and some suggestions about data-uri for pathing.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 14 '15 at 01:19

Daniel Brose

1,394
10
24

Thanks Daniel I have expanded my question but your on the right track :) – Jess McKenzie Aug 14 '15 at 01:27
@JessMcKenzie - cant you just apply a css background to "fusion-page-title-captions"? A background with muted colours (or a png image with transparency of 0.x) would prob be best, and captions looks like it wraps the text already. If not, you could prob even apply it to the 'h1' and just add "padding: 5px;". Tell me if that would work and ill include quick demo of it in my answer. – Daniel Brose Aug 14 '15 at 01:34
Was my idea but theres no set width - shows 100% of the other divs and I cant really set a width as the titles change in length – Jess McKenzie Aug 14 '15 at 01:38
@JessMcKenzie Your image doesnt need to change sizing, nor would be a concern anyway if you applied it to the 'h1'. In future, just look around at websites that use complex banners, or even slideshow plugin pages, or even just looser google for 'dynamic sized background' or something. Your fixed on the need for a px width, you never needed that even IF the image itself was not repeated, as it would size to its holder unless you explicitly override that. "background-image", not "image" html tag. – Daniel Brose Aug 14 '15 at 01:43

Getting length of var and creating a width

1 Answers1