वेब पेज के "अखबार" लेआउट का एल्गोरिदम

यह पोस्ट विशेष रूप से एक व्यक्तिगत ब्लॉग में लिखा गया है, ताकि सामान्य लोगों को रोकना न हो।



समस्या काम पर उत्पन्न हुई: कुछ निश्चित लेख हैं, संभवतः चित्रों के साथ, और केवल चित्रों के साथ, और अच्छी चीजों का यह गुच्छा स्वचालित रूप से अखबार के प्रारूप में एक वेब पेज पर लिपटा होना चाहिए - अर्थात, कई कॉलमों में, एक कॉलम में एक लेख, दूसरे में - तीन, लेकिन ऊंचाई में कम। और फिर भी सभी चित्रों को कॉलम में दर्ज करें ताकि यह बिल्कुल एक अखबार के प्रसार की तरह दिखाई दे।

किसी कारण से, मैं विश्वास नहीं करना चाहता कि मैं इस तरह के कार्य का सामना करने वाला पहला व्यक्ति हूं। यह इस तथ्य को नकारता नहीं है कि मैं पहले से ही एल्गोरिदम की लगभग कल्पना करता हूं;) लेकिन फिर भी, मैं उन लोगों को सुनना चाहूंगा जिन्होंने पहले ही इस तरह के कार्य का सामना किया है। या सिर्फ उन लोगों को जो कार्य को दिलचस्प लगा। हाँ, कोई भी, वास्तव में =)



चलिए शुरू करते हैं।



0) स्रोत डेटा

मान लीजिए कि हमारे पास लेखों / चित्रों का एक निश्चित समूह है। प्रत्येक लेख में चित्र भी हो सकते हैं (लेकिन नहीं है)। एक अखबार के पृष्ठ की चौड़ाई है, 1000px कहते हैं। और उन स्तंभों की संख्या है जिन्हें इस पृष्ठ में विभाजित किया जाना चाहिए।



सामान्य विचार:

पृष्ठ को "वर्गों" (प्रसिद्ध कार्टून से तोते का एक निश्चित एनालॉग) में विभाजित किया गया है। यानी यदि हमारे पास पांच कॉलम हैं, तो कॉलम की चौड़ाई 200px है, और वर्ग की ऊंचाई क्रमशः 200 पीएक्स है। नतीजतन, हमें ऊंचाई में 5 वर्ग की चौड़ाई और अनंत में एक आयत मिलती है। फिर सामग्री के आकार के लिए सभी विभिन्न विकल्पों का एक मिसकैरेज होता है - उदाहरण के लिए, एक ही लेख 1x4 वर्ग और 2x2, और 4x1 - यानी के आकार में दोनों बनाया जा सकता है। क्षेत्र समान है। लेकिन आपको दो सूक्ष्म बिंदुओं को देखना चाहिए:

क) यदि लेख में चित्र हैं, तो उन्हें आकार बदलने / काट-छाँट करने की आवश्यकता है, जिससे इसकी चौड़ाई स्तंभ की चौड़ाई से कई गुना हो जाती है, और उसके बाद ही कुल क्षेत्र पर विचार करें;

ख) पाठ द्वारा कब्जा किए गए क्षेत्र पर विचार करना आवश्यक है, हमेशा फ़ॉन्ट वर्णों की चौड़ाई से शुरू होता है - अन्यथा हम सभी प्रकार के हाइफ़न के साथ "राउंडिंग ऑफ" का जोखिम चलाते हैं।

नतीजतन, सभी गणनाओं के बाद, हमारे पास उनके आकार में भिन्नता वाले तत्वों का एक सेट होता है, जिन्हें निश्चित रूप से एक निश्चित चौड़ाई के साथ एक आयत में अंकित करने की आवश्यकता होती है - यह अब कोई समस्या नहीं है। कम से कम विकल्पों की एक सरल गणना =) फिर परिणाम (वैसे, एक से अधिक इष्टतम व्यवस्था हो सकती है, फिर आप उनमें से कुछ को यादृच्छिक रूप से दे सकते हैं) कैश किया जाता है और उपयोगकर्ता को एक स्थिर htmlnik दिया जाता है, जिसमें लेख हार्ड-सेट आकारों के साथ divas में होते हैं। पिक्सेल। मूल पर एक नया लेख / चित्र - और पी-टाइम, और दो, और तीन - प्राप्त होने पर! - प्रक्रिया को दोहराएं।



सारांश में, एक संक्षिप्त एल्गोरिथ्म:

1. लेखों के क्षेत्रों के लिए विकल्पों की गणना, उनमें छवियां और "स्टैंड-अलोन" चित्र;

2. स्थान का इष्टतम (ओं) विकल्प चुनना।



यह विशेष रूप से कठिन नहीं है, लेकिन मैं मुख्य बिंदुओं को कहने के लिए (खुद के लिए भी) चाहता हूं।



1) एकल छवियों

ये वे हैं जो लेख में नहीं हैं, लेकिन केवल चित्र हैं। उनके साथ, मेरी राय में, सबसे आसान तरीका यह है कि हम या तो उनका आकार बदल दें या उन्हें हमारी ज़रूरत की चौड़ाई तक फसल दें, ऊंचाई आनुपातिक बनी रहे।

वैसे, एक विचार (भविष्य के लिए) भी है - चूंकि आप एक समाचार पत्र से पूर्ण समानता चाहते हैं, इसलिए आप चित्रों में शीर्षक लिख सकते हैं (उदाहरण के लिए डीजी का उपयोग करके)। लेकिन मैं विचलित था, यह कुछ समय बाद है, और यह भी एक तथ्य नहीं है =)



2) फ़ॉन्ट्स

ऐसा लगता है कि फ़ॉन्ट वर्ण की चौड़ाई के साथ तिरस्कृत नहीं किया जा सकता है - अन्यथा लेख की मात्रा की गणना करना संभव नहीं होगा। इसलिए, हमें फोंट के साथ काम करने के लिए कार्यक्षमता की आवश्यकता है - उदाहरण के लिए, एक सर्वर उपकरण जिसे php निष्पादित या .ttf फ़ाइलों के पार्सर द्वारा लॉन्च किया जाता है वह महत्वपूर्ण नहीं है। ये कार्यान्वयन विवरण हैं, लेकिन सभी फ़ॉन्ट चौड़ाई आधार में होनी चाहिए (इसे पार्सर की तुलना में तेजी से किक करने के लिए)।



३) लेखों में चित्र

एक निश्चित क्षेत्र पर कब्जा। अब तक, मेरा विचार है कि उन्हें एक कोने में धकेल दिया जाना चाहिए, और फिर पाठ सम्मिलित करें और "वर्गों" में कुल क्षेत्र पर विचार करें। फिर से, छवि को विभिन्न वर्गों में बढ़ाया जा सकता है, इसलिए यहां विकल्प भी संभव हैं।

इसके अलावा, यह मत भूलो कि कई छवियां हो सकती हैं। इस मामले में, मुझे अभी भी यह मुश्किल लगता है ... मुझे अभी भी इसके बारे में सोचना है। विचार स्वीकार किए जाते हैं।



4) सबसे अच्छे स्थान के लिए खोजें

मुझे कुछ भी मुश्किल नहीं दिख रहा है - तत्वों के लिए सभी विकल्पों के स्थान के लिए सभी विकल्पों की गणना करना, और, वास्तव में, वॉइला।



इसलिए, वापस लौटते हुए - मैंने यह क्यों लिखा।

मैं किसी भी टिप्स, ट्रिक्स और इसी तरह की अन्य चीजों को सुनना चाहता हूं। बदले में, मैं वादा करता हूं, जब सब कुछ तैयार है (और यह होगा, यह सुनिश्चित करने के लिए है), जनता के लिए एक लिंक पोस्ट करने के लिए।

अगर अचानक कोई ऐसा व्यक्ति है जिसने एक समान कार्य का सामना किया है - यह व्यक्ति सोने में मेरे वजन के लायक होगा;)

वैसे भी ... सहमत, कार्य तुच्छ नहीं है? ;) लेकिन मस्तिष्क हमेशा खिंचाव के लिए दिलचस्प है। व्यक्तिगत रूप से, मैं इस परियोजना के बारे में कम से कम खुश हूं - अगर मुझे लगता है, तो मेरे पास =) है

वैसे भी, इस पाठ में महारत हासिल करने वाले सभी को धन्यवाद। मैंने यथासंभव स्पष्ट रूप से लिखने की कोशिश की, लेकिन अगर मैं सफल नहीं हुआ, तो मैं किसी भी प्रश्न का उत्तर अनिवार्य रूप से टिप्पणियों में दूंगा।